Favicon ICO Generator

使い方

1. PNG または SVG の元ファイルを選択します。正方形が最もきれいで、それ以外は中央でクロップされます。
2. favicon.ico を作成を押すと、3 サイズのプレビューが下にサイズ表示付きで並びます。
3. favicon.ico をダウンロードして、サイトのルートなどビルドが想定する場所に置きます。
4. iOS のホーム画面用に apple-touch-icon.png（180x180）をダウンロードします。
5. HTML スニペットをコピーして、head と manifest に宣言するサイズを揃えます。

よくある用途

• ブラウザ共通の 1 ファイル —— PNG アイコンを別に配信していても、多くのブラウザはルートの favicon.ico を要求します。
• /favicon.ico のフォールバックを用意 —— 宣言の有無にかかわらず要求されるため、実体を置けばログの 404 を防げます。
• Apple タッチアイコンの追加 —— iOS は ICO ではなく専用の 180x180 PNG を使います。
• アイコン一式の記録 —— スニペットが、manifest 用にまだ必要なサイズを示します。
• ロゴ変更後の再生成 —— 1 つの元ファイルから全サイズを一度に作り直せます。

よくある質問

Q: PNG サイズを出力する favicon ジェネレーターとの違いは？ A: あちらはサイズごとに別の PNG ファイルを書き出します。こちらは 16x16・32x32・48x48 を 1 つの .ico コンテナにまとめ、ブラウザが /favicon.ico に期待する形式で出力し、さらに 180x180 の Apple タッチアイコン PNG を加えます。manifest が参照する PNG 一式にはあちらを使ってください。

Q: 256x256 のような大きいサイズも ICO に入りますか？ A: このツールは 16・32・48 までにしています。favicon の表示用途はそこで十分であり、ICO 形式では 256 を 0 値のバイトとして格納するためです。そこまで大きいアイコンは PNG のまま配信する方が適しています。

Q: BMP ではなく PNG エントリなのは？ A: PNG エントリはアルファチャンネルを保ててファイルも大幅に小さく、現行のブラウザは ICO 内の PNG をすべて読めます。BMP では別途 AND マスクが必要になり、サイズも数倍になります。

Q: SVG を編集したのに ICO が変わりません。なぜ？ A: ファイル入力は新しいファイルを選んだときだけ再実行されます。ICO は生成時点の元ファイルのスナップショットなので、更新したファイルをもう一度選択してください。