2026年 favicon サイズ: 本当に必要なファイル

公開日 2026年8月7日 · 更新日 2026年8月7日 · 7 分で読めます

多くのブランドは favicon を 1 ファイルだけで済ませるべきではありません。2026年の実用的な構成は、小さなブラウザ fallback を含む favicon.ico、32x32 PNG、180x180 の Apple touch icon、そしてサイトをインストールできるなら 192x192 と 512x512 の manifest アイコンです。これで同じロゴをブラウザタブ、Google Search、iOS ホーム画面保存、アプリのようなインストール面まで無理なく使えます。

2026年7月6日に kitnex.ai と既存の Kitnex ブログを見直すと、prompt、mockup、配色、ファイル形式、商用利用、公開チェックリストまではかなり整っていました。一方で抜けていたのは deployment の説明です。ロゴが決まったあと、実際にタブ、検索結果、ショートカット、ホーム画面に出る小さなアイコン群へどう分解するかがまだ不足していました。

重要ポイント

• Google Search はサイトごとに 1 つの正方形 favicon を使い、最低 8x8、推奨は 48x48 超です。
• iOS のホーム画面保存は rel=icon だけでなく apple-touch-icon を見ます。
• インストール可能なサイトでは manifest アイコンと、必要に応じて maskable アイコンが有効です。
• 本当の課題は書き出し数ではなく、極小サイズでも読める記号を残せるかです。

favicon は何サイズで作るべきか

Google は favicon を正方形で最低 8x8 ピクセルとし、さまざまな表示面で見やすくするため 48x48 より大きいサイズを勧めています。さらに Google Search が使う favicon はサイトまたは hostname ごとに 1 つだけです。つまり装飾的な差分よりも、ブランドとして安定して見えることが優先されます。実務では、その条件を満たしたうえでブラウザ用 fallback、Apple touch icon、manifest アイコンを分けて持つのが現実的です。

• Google の最低条件は正方形で 8x8 以上。
• 実務上の目安は 48x48 より大きいこと。
• 基本セットは favicon.ico、Apple touch、manifest。
• 絵柄は統一し、サイズだけを変える。

なぜ 1 ファイルでは足りないのか

HTML では複数の rel=icon を宣言でき、ブラウザは type や sizes を見て適切なものを選びます。一方で iOS は Web Clip に rel=icon を使わず、apple-touch-icon を探します。Apple の資料にも 152x152、167x167、180x180 などの touch icon サイズが示されています。つまり同じブランド記号でも、使われる面ごとにファイルを分ける必要があります。

• ブラウザタブとブックマーク: rel=icon。
• Google Search: ホームから読まれるサイト単位の favicon。
• iOS ホーム画面保存: apple-touch-icon。
• インストール可能サイト: manifest と maskable。

多くのブランドが用意すべきファイルセット

まず favicon.ico に 16x16、32x32、48x48 などの小さな fallback を入れます。次に現代的なブラウザ向けに 32x32 PNG、iPhone のホーム画面用に 180x180 の apple-touch-icon、そしてインストールや splash 向けに 192x192 と 512x512 の manifest アイコンを追加します。ポイントは無限に書き出すことではなく、実際に読まれるファイルだけを持つことです。

• favicon.ico: ブラウザと旧環境の fallback。
• favicon-32x32.png: 現代ブラウザ向け raster。
• apple-touch-icon.png 180x180: iPhone ホーム画面保存。
• icon-192x192.png: よく使われる install サイズ。
• icon-512x512.png: より大きいシステム面向け。
• maskable-icon-512x512.png: Android 風の切り抜きに強い任意ファイル。

maskable アイコンが必要になる場面

MDN では manifest アイコンに any、maskable、monochrome などの purpose を指定できると説明しています。web.dev は重要な図形を中央の安全領域に収めるべきだとし、その半径はアイコン幅の約 40% と案内しています。外側 10% は切り落とされる可能性があるため、完全な wordmark をそのまま縮小するのではなく、小さな面に強い symbol を先に作るほうが安全です。

• インストール面があるなら maskable を優先。
• 重要な形は中央の安全領域へ。
• 長い文字、細線、弱いコントラストは避ける。
• 明暗両方の背景で確認する。

公開前に favicon をどうテストするか

Google は Googlebot-Image が favicon ファイルを読めること、Googlebot がホームページを読めることを求め、再クロールには数日から数週間かかる場合があると述べています。だからこそ公開後はパスを安定させ、head から正しく参照し、むやみに名前を変えないことが重要です。そのうえで実際のブラウザタブ、iPhone ホーム画面保存、Chrome や Android の install 導線、16〜32 ピクセル表示を順に確認してください。

• head タグと manifest をセットで確認。
• iPhone のホーム画面保存を実機で試す。
• インストール可能なら install 画面も確認。
• 16〜32 ピクセルを明暗 UI で見る。
• 本番のファイル名はなるべく固定する。

よくある質問

参考ソース

• Define a favicon to show in search resultsGoogle Search Central
• Links - HTML StandardWHATWG
• icons - Web app manifestMDN Web Docs
• HTML attribute: relMDN Web Docs
• Configuring Web ApplicationsApple Developer
• Adaptive icon support in PWAs with maskable iconsweb.dev

さらに見る