ファビコンは1つの画像ではありません。ブラウザのタブの小さなアイコンであり、サイトをホーム画面に追加するときにスマートフォンが使うより大きなアイコンであり、PWAのマニフェストやアプリスイッチャーが期待するさらに大きなアイコンです。文脈ごとに求める大きさが違い、1つでも外れると目に付きます。16ピクセルのアイコンをホーム画面のタイルいっぱいに引き伸ばせば、訪問者が気付く程度に壊れて見えます。
この生成ツールは1つの画像から一式を作ります。元画像を正方形に中央でクロップし、ブラウザ標準のフィルターではなくpicaリサンプラーで各サイズへ縮小し(16ピクセルではこの差が決定的です。素朴な縮小はロゴを染みに変えます)、本物のマルチ解像度.icoファイルとともにZIPにまとめます。
アイコンはブラウザ内で生成されます。未公開のロゴやブランド資産がアイコンサービスへアップロードされることはありません。
<head>にコピーしてください。| ファイル | サイズ | 使用先 |
|---|---|---|
| favicon.ico | 16、32、48を統合 | ブラウザのタブ、ブックマーク、旧環境の対応 |
| favicon-16x16.png | 16 × 16 | 標準密度の画面のタブアイコン |
| favicon-32x32.png | 32 × 32 | 高密度の画面のタブアイコン |
| favicon-48x48.png | 48 × 48 | Windowsのサイトショートカット |
| apple-touch-icon.png | 180 × 180 | iOSのホーム画面 |
| icon-512.png | 512 × 512 | Androidのホーム画面、PWAマニフェスト、アプリスイッチャー |
.icoは名前を変えただけのPNGではなく、16・32・48ピクセルの版を収めた本物のマルチ解像度コンテナです。Windowsや旧いブラウザが描画する文脈に合った大きさを自動的に選びます。
ZIPをサイトのルートに展開し、すべてのページの<head>に次を追加してください。
| 用途 | タグ |
|---|---|
| 基本のファビコン | <link rel='icon' href='/favicon.ico' sizes='any'> |
| 標準密度 | <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'> |
| 高密度 | <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> |
| iOSのホーム画面 | <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'> |
512ピクセルのアイコンはlinkタグではなくWebアプリのマニフェストから参照します。
ファビコンはたいてい16ピクセル四方で表示されますが、これは本文の文字1つ分ほどの大きさです。ワードマーク全体はその大きさでは判読不能で、細部の多いイラストはノイズになります。
通用するのは1文字、単純なモノグラム、あるいは明るいタブ背景と暗いタブ背景の両方でコントラストの強い太い図形1つです。ロゴを16ピクセルに縮めて腕の長さだけ離れて見てください。何かわからなければ、他の人にもわかりません。
最低512 × 512で、できれば正方形が望ましいです。元画像は正方形に中央クロップされるため、横長のロゴは両端が切れます。それが問題なら正方形にするツールで先に余白を足してください。
はい。16、32、48ピクセルの画像を収めた本物のマルチ解像度ICOコンテナで、拡張子を変えただけのPNGではありません。Windowsや旧いブラウザが正しく読み取ります。
Webサイトのルートディレクトリに置き、/favicon.icoのようなパスでアクセスできるようにしてください。そのうえで上記のlinkタグをページに追加します。
ブラウザがファビコンを非常に強くキャッシュするためです。強制再読み込みするか、アイコンファイルのURLを直接開いて正しく配信されているか確認してからページを再読み込みしてください。
PNGファイルはアルファチャンネルを保ちます。ただし透明なアイコンは明るいタブ背景と暗いタブ背景の両方で通用する必要がある点にご留意ください。
いいえ。クロップ、縮小、ICOの組み立てはすべてブラウザ内で行われます。