ICOとfaviconとは
どのウェブサイトを開いても、ブラウザのタブに表示される小さなアイコンがfaviconです。通常は.icoファイルで、PNGも使われます。faviconはウェブサイトの「顔」であり、ユーザーは多数のタブの中からこれを頼りに素早くサイトを見分けます。
ICOフォーマットが必要な理由
モダンブラウザはPNGのfaviconをサポートしていますが、ICOフォーマットには依然として代替できない利点があります：
- 互換性が最も高い： 古いブラウザやWindowsデスクトップのショートカットはICOしか認識しない
- 複数サイズの同梱： 1つのICOファイルに16x16、32x32、48x48など複数サイズを格納でき、システムが自動的に選択
- ブックマーク、PWAアイコン： 一部のケースでは依然としてICOが必要
DocsAll画像→ICOツール
画像→ICOツールで素早く生成：
- 正方形のソース画像を用意（256x256以上のPNG推奨）
- ICO変換ツールを開き、ソース画像をアップロード
- ツールが複数サイズのICOを自動生成
- .icoファイルをダウンロード
faviconの設定方法
基本設定
favicon.icoをウェブサイトのルートディレクトリに置くと、ブラウザが自動的に認識します。HTMLのheadでlinkタグを使って明示的に宣言することも可能で、rel属性をiconにし、hrefをfavicon.icoに指定します。
複数デバイス対応
モダンなウェブサイトでは複数サイズを同時に設定することを推奨します：
- favicon.ico：デフォルト、ルートディレクトリに配置
- apple-touch-icon.png（180x180）：iOSのホーム画面追加用
- icon.png（192x192、512x512）：PWA用
ソース画像のデザインのコツ
- PNGを使う： 透明背景をサポートし、PNGから変換したICOの方が見栄えが良い
- 正方形： 16x16、32x32は表示サイズ、ソース画像は大きめの方が縮小しやすい
- シンプルに： 小さいサイズでは複雑な柄が潰れるため、シンプルな図形とブランドカラーを使う
- 透明背景： 白い四角を避け、ブラウザのタブに溶け込ませる
よくある問題
faviconが更新されない
ブラウザのキャッシュは頑固です。faviconを変更しても反映されない場合は、強制リフレッシュ（Ctrl+F5）するか、パスにバージョンパラメータを付けます（例：favicon.ico?v=2）。
アイコンがぼやけて表示される
ソース画像が小さすぎるか、正方形でないものが引き伸ばされています。256x256以上の正方形PNGで再生成してください。
鮮明なfaviconはウェブサイトをよりプロフェッショナルに見せます。ICOツールを使えば数分で完了します。タブを空欄のままにしないようにしましょう。