Faviconは幾つ用意する?

カテゴリー: blog オン 2023年6月10日

気がつくとデバイスが増えていくにつれて必要なfaviconが複数必要になっていました。

調べると最大で20個以上必要という話もありますが、6個くらいがもっとも多い印象です。

WordPressだと512px x 512pxの画像を1つアップすることで自動的に出力してくれます。静的サイトの場合自分で複数サイズの用意が必要ですが、マルチアイコン生成ジェネレータでマルチアイコンにしてまとめることができます。


android-chrome.png(192px×192px)
apple-touch-icon.png(180px x 180px)
favicon.ico(マルチアイコンで16px x 16pxと32px x 32px)

また、デザインの際には以下に注意が必要です。
スマホのホーム画面に登録された場合、角が丸くなるので余裕をもったデザインが必要。
iOSでは背景がない場合、透過する場所が黒になるので透過画像は避ける。