ファビコンジェネレーター。

1〜2 文字の文字や自分のロゴから、Web サイトや Web アプリに必要なアイコンをすべて作ります。favicon.ico、Apple タッチアイコン、Android とマスカブルアイコン、Web マニフェスト、そして HTML や Next.js に入れるタグです。ロゴが SVG なら SVG のファビコンも作ります。ブラウザのタブや iPhone、Android のホーム画面での見え方をプレビューしてから、1 つの ZIP でまとめてダウンロードできます。ブラウザの中で動くので、画像がアップロードされることはありません。

作り方

文字画像

文字フォント

形

四角角丸円

背景文字の色

私たちのデザインシステムの色

アプリ名

favicon.ico、apple-touch-icon.png、Android 用 192 と 512、マスカブルアイコン、site.webmanifest、head.html。

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2F6FEB">

ブラウザ内で動作します。ここに追加したものはアップロードも保存もされません。

ファビコンの作り方

何から作るかを選びます。
- 文字： 1〜2 文字を入力し、フォントと形（四角、角丸、円）を選んで、背景と文字の色を決めます。うまくいく配色から始めたいなら、私たちのデザインシステムの色をクリックするだけです。
- 画像： ロゴを PNG、JPG、WebP、SVG で追加し、周りの余白を調整します。ファビコンの背景は透明にもできます。
プレビューを確認します。 ライトとダークのブラウザのタブ、iPhone のホーム画面、丸く切り抜かれる Android のホーム画面です。
すべてのアイコンを 1 つの ZIP でダウンロードします。
ファイルをサイトのルートフォルダに置きます（多くのプロジェクトでは public/）。ページから HTML タグか Next.js の metadata をコピーして、プロジェクトに入れます。

ZIP の中身

ファイル	使われる場所
`favicon.ico`（16、32、48 ピクセル）	ブラウザのタブ、ブックマーク、古いブラウザ
`favicon.svg`	新しいブラウザでくっきり表示されるタブ。SVG ロゴを追加したときだけ作成
`apple-touch-icon.png`（180 ピクセル）	iPhone や iPad のホーム画面にサイトを追加したときのアイコン
`android-chrome-192x192.png` と `512x512.png`	Android のホーム画面と、Web アプリのインストール案内
`maskable-icon-512x512.png`	円などの形に切り抜かれる Android のアイコン
`site.webmanifest` と `head.html`	アプリの名前、色、アイコンと、それらをつなぐタグ

マスカブルアイコンでは、文字やロゴを画像の中央 80% に収めます。Android が決して切り抜かない安全領域です。Apple と Android のアイコンは、ホーム画面では透明がうまく表示されないため、必ず単色の背景を付けます。

Codex でアイコンを組み込む

ダウンロードしたファイルをプロジェクトに入れてから、Codex に組み込みを頼みます。

ファビコンのファイルを追加する

[public/] に新しいファビコンのファイルを置きました：favicon.ico、favicon.svg（ある場合）、apple-touch-icon.png、Android とマスカブルのアイコン、site.webmanifest です。古いファビコンとアイコンのファイルを削除し、head.html のタグを [ルートレイアウト] に追加して、site.webmanifest のアプリ名を [あなたのアプリ名] にしてください。ほかにアイコンへの参照が残っていないかも確認してください。

Next.js の App Router を使っているなら、HTML タグの代わりに、ツールの metadata と viewport のコードをコピーしてください。

よくある質問

このファビコンジェネレーターは無料ですか？

はい。登録も透かしも、回数制限もありません。

画像はアップロードされますか？

いいえ。ブラウザがあなたのデバイス上ですべてのアイコンを描き、ZIP を作ります。サイトが数えるのはツールが使われたことだけで、入れた内容は記録しません。

ファビコンはどのサイズが必要ですか？

ほぼすべてのサイトで必要なのは、16、32、48 ピクセルを含む favicon.ico、180 ピクセルの Apple タッチアイコン、そして Web マニフェストに書く 192 と 512 ピクセルのアイコンです。ZIP の中身はちょうどそれです。ロゴが SVG なら、新しいブラウザでくっきり表示される SVG ファビコンも ZIP に入ります。

古いファビコンがまだ表示されるのはなぜ？

ブラウザはファビコンを長いあいだキャッシュします。プロジェクトから古いファイルが消えていることを確かめてから、プライベートウィンドウで開くか、ブラウザのキャッシュを消すと新しいものが表示されます。