ファビコン作成 (ICO・PNG)

使い方

1. 画像を選ぶか、枠の中にドロップします。PNG・JPEG・WebP・GIF・SVG に対応し、512 × 512 px 以上の正方形の画像がいちばんきれいに仕上がります。
2. 余白と角の丸みを調整し、背景を透明か単色から選びます。変更するたびに下の一覧が作り直されます。
3. site.webmanifest に入れるアプリ名があれば入力します。スマートフォンのホーム画面にサイトを追加したときに表示される名前です。
4. 「すべてダウンロード（ZIP）」を押すか、一覧からファイルを1つずつダウンロードします。
5. ファイルをサイトのルートフォルダにアップロードし、「<head> に入れるタグ」のタグをページの <head> 内に貼り付けます。

よくある質問

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

いいえ。サイズ変更とまとめる処理はブラウザの中だけで行います。

どのファイルが入っていますか？

favicon.ico (16·32·48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, favicon-head.html。HTML ファイルには貼り付け用のタグが入っています。

透明を選んだのに apple-touch-icon.png に背景があるのはなぜですか？

iOS は透明な部分を黒で塗り、角を自動で丸めます。そのため、このアイコンだけは常に背景を塗り（透明を選んだ場合は白）、角を丸めません。

正方形でない画像はどうなりますか？

縦横比を保ったまま中央に配置し、短い辺の側に余白ができます。アイコンいっぱいにしたい場合は、先に正方形に切り抜いてください。

16 px だとぼやけて見えます。

16 × 16 px では細い線や小さな文字がつぶれます。シンプルな形や1〜2文字にして、余白を小さくしてください。

ブラウザに古いアイコンが表示されたままです。

ブラウザはファビコンを長くキャッシュします。キャッシュを消して再読み込みするか、リンクにバージョンを付けてください（例：/favicon.ico?v=2）。