ファビコン指定の方法は様々あり、たくさんのファイルを作って指定したほうがいいという話もあるのですが、必要最低限のファイルと記述だけでどうにかならないでしょうか……。
今回は、AndroidのChromeで「ホーム画面に追加」のアイコンが出たり出なかったりする原因が分からなかったので調査してみました。
- 調査日
- 2025年1月1日
- 確認した環境
- Android 14 Chrome 131
- iOS 17.7
- macOS 14.7 Safari 18.2
- Windows 10 Chrome 131 / Firefox 133 / Edge 131
究極的にはicoファイルだけでも出る
faviconとapple-touch-iconに、Faviconジェネレーター で24～128pxまでのサイズを含めたfavicon.icoを指定したところ、それだけで各種ブラウザのタブや「ホーム画面に追加」などのUIにはアイコンがすべて表示されました。
<link href="./images/favicon.ico" rel="icon" />
<link href="./images/favicon.ico" rel="apple-touch-icon" />
rel=”apple-touch-icon”が無いと、iOSの「ホーム画面に追加」でアイコンが出ない
全部icoで出るなら、もしかして1行で足りるのでは……？ と思いましたが、apple-touch-iconの行を消すとiOSのホーム画面に追加時にアイコンが表示されませんでした。
<link href="./images/favicon.ico" rel="icon" />icoファイルの作り方によっては、Androidのホーム画面用に使えない
サイズが小さすぎるとダメ
icoファイルの生成サービスによって、icoをマルチアイコン（ひとつのファイルに複数のサイズのデータが入っている）として作るか、単一のサイズで作るか、マルチアイコンにするとしてもどんなサイズを含めるかが異なります。
Androidのホーム画面用に使うためには 96 × 96px程度必要なようで、少なくとも 64 ×64 px以下のサイズしか含まない favicon.ico では、Androidのホーム画面にアイコンが表示されませんでした。
Faviconジェネレーター で作る場合は、128pxのサイズを含める必要があるようです。
icoファイルをジェネレーターで生成するときは、そのサービスがfavicon.icoにどんなサイズを含めているか確認しましょう。
正方形じゃないとダメ
デザインデータの作りの都合で誤って 192 × 191px のように正方形ではない形になっていると、Androidのホーム画面にアイコンが表示されませんでした。
この状態でも、Chrome等のタブやiOSのホーム画面に追加には表示されます。
※ rel=iconとapple-touch-iconを別のファイルにしている場合は、icon側のサイズが正しくてもapple-touch-iconのサイズが誤っていれば、Androidのホーム画面にアイコンは表示されません。
rel=iconとapple-touch-iconを作り分けるとより素敵かも
apple-touch-iconを背景透過の円形にするとiOSのホーム画面では四方が黒塗りになるようです。
faviconとapple-touch-iconは表示されるサイズも異なりますので完全に別の画像として作り分けることを検討するとよいでしょう。
（Androidだと背景透過の円でもきれいに表示されるため、iOSを重視するかどうかにもよる）
<link href="./images/favicon.ico" rel="icon" />
<link href="./images/apple-touch-icon.png" rel="apple-touch-icon" />
Google検索結果に載るには？
検索結果に表示されるファビコンを定義する によれば、<link rel="icon" href="/path/to/favicon.ico"> があればOKで、rel="apple-touch-icon" の方も見てくれるようです。
正方形（アスペクト比 1:1）で8 × 8px以上である必要があるとのことで、48 × 48pxより大きなファビコンであることがおススメされています。
「正方形じゃないとダメ」の項目で述べた通り、誤って正方形ではない画像が指定されてしまうこともありうるので、iconやapple-touch-iconに指定されている画像が正しく正方形になっているかどうかはチェックしておきましょう。
コメント