ファビコンのサイズと設置用コード
ファビコンのサイズとコード
ファビコンのサイズとHTMLコード（2026年）：必要なものだけ | We.Inc
2026年にサイトで本当に必要なファビコンのファイルは、favicon.ico、SVG、180pxのAppleタッチアイコン、そして192と512のマニフェスト用アイコンです。コピーできるhead用タグとマニフェスト作成ツール付き。
ほぼすべてのブラウザーと端末は、5つのファイルでカバーできます。32×32のfavicon.ico、最新ブラウザー向けのSVGアイコン、iPhoneのホーム画面用の180×180のPNG形式のapple-touch-icon、そしてWebアプリマニフェストに記載する192×192と512×512のPNGです。Google検索では正方形のアイコンが求められ、48ピクセルより大きいものが理想です。
用意しておくべきファビコンのセット
- 任意（ベクター）
- 最新ブラウザーのタブ。どのサイズでもくっきり表示
- Webアプリマニフェスト、Androidのホーム画面
- Webアプリマニフェスト、インストール画面とスプラッシュ画面
古いファビコンのガイドには、もう誰も使っていない端末向けのサイズが20個以上も並んでいます。今はブラウザーが少数の良質な元ファイルから拡大縮小してくれるので、やるべきことは、適切な5つを選び、head用のタグを正しく書き、Googleがそれらをクロールできるようにすることです。下の作成ツールで、自分のサイト用のタグとマニフェストを生成しましょう。
- 512×512の正方形のマスター画像を1つ作り、マークを中央に置いて余白を設けます。
- 表にある5つのファイルを書き出すか、当サイトのファビコンジェネレーターで作成します。
- 作成ツールにサイト名と色を入力し、head用のタグとマニフェストをコピーします。
- ファイルをサイトのルートにアップロードし、全ページのheadにタグを貼り付けてから、強制再読み込みで確認します。
- 16ピクセル版を単体で確認しましょう。タブの大きさでは細かい文字や細い線が消えてしまうため、マークを簡略化しましょう。
- SVGにダークモード用のメディアクエリを入れ、暗いブラウザーのタブでも暗い色のロゴが見えるようにしましょう。
- Androidは残りの部分を切り抜くことがあるため、マスカブルアイコンの重要な部分は、半径が幅の40%の中央の円の内側に収めましょう。
- robots.txtでアイコンファイルやホームページをブロックしないでください。検索結果にファビコンを表示するには、Googleが両方をクロールできる必要があります。
- ブラウザーはファビコンを強力にキャッシュするため、差し替えるときはファイル名を変えるか、バージョンのクエリを付けましょう。
よくある質問
最適なファビコンのサイズは？
唯一の最適なサイズはありません。互換性のために32×32のICOを、最新のタブでくっきり表示するためにSVGを用意し、さらにホーム画面用に180ピクセルのAppleアイコンと、192と512のマニフェスト用アイコンを追加しましょう。Google検索は正方形の画像を求めており、最低8ピクセル、できれば48×48より大きいものが推奨されています。
Webサイトにファビコンを追加するには？
ファイルをサイトのルートに置き、全ページのheadにlinkタグを追加します。ICOとSVGにはrel icon、180ピクセルのPNGにはrel apple-touch-icon、そして192と512のアイコンを記載したJSONファイルを指すrel manifestです。このページの作成ツールがこれらの行を書き出してくれます。
Googleにファビコンが表示されないのはなぜですか？
Googleがホームページとアイコンファイルの両方をクロールできること、アイコンが正方形であること、リンクがホームページのheadにあることが必要です。Googleは独自のスケジュールでファビコンを再クロールするため、更新が反映されるまでに時間がかかることがあります。
favicon.icoはまだ必要ですか？
残しておく価値があります。一部のツール、フィードリーダー、古いブラウザーはHTMLを読まずに/favicon.icoを直接要求するため、ルートに小さなICOを置いておけばそれに応えられます。
マスカブルアイコンとは何ですか？
purposeにmaskableを指定したマニフェスト用アイコンで、Androidが円形、角丸の四角形などの形に切り抜けるよう、余白を多めに取って描かれたものです。ロゴは中央の安全領域の内側に収め、背景は端から端まで塗りつぶしましょう。
必要なファイルが減った理由
- 現在のブラウザーは最も近いアイコンを選んで拡大縮小し、SVG形式なら1つのファイルですべてのタブサイズに対応できます。かつて大量にあったWindowsのタイルやAppleのサイズは、すでに仕様が変わったプラットフォーム向けのものでした。
- AppleのSafariのドキュメントには今も端末ごとのタッチアイコンが記載されていますが、iOSは完全に一致するものがなければ大きいアイコンで代用するため、180ピクセルのPNGが1つあれば現行のiPhoneとiPadを十分にカバーできます。
マニフェスト用のアイコン
- web.devによると、Chromium系のブラウザーでサイトをインストール可能にするには、マニフェストに少なくとも192ピクセルと512ピクセルのアイコンが必要です。この2つがあれば、Chromeは他の密度向けに自動で拡大縮小します。
- マニフェストの各アイコンには、any、maskable、monochromeのいずれかのpurposeを指定できます。切り抜かれる形に合わせた余白は正方形で表示すると小さく見えすぎるため、maskable用には別のファイルを使いましょう。
検索結果にファビコンを表示させる
- Google検索は、ホームページでファビコンを見つけられた場合に、検索結果の横にそれを表示します。サポートされているrelの値は、icon、shortcut icon、apple-touch-icon、apple-touch-icon-precomposedです。
- GoogleはICO、PNG、GIF、JPEGなど、複数の形式に対応しています。Googlebotが取得を許可されていれば、アイコンファイルが別のドメインにあっても構いません。
linkタグとそれぞれの役割
head内のファビコン関連タグ
- <link rel="icon" href="/favicon.ico" sizes="32x32">
- 従来のタブアイコン。フォールバック用
- <link rel="icon" href="/icon.svg" type="image/svg+xml">
- SVGに対応したブラウザー向けのベクター形式のタブアイコン
- <link rel="apple-touch-icon" href="/apple-touch-icon.png">
- iOSとiPadOSのホーム画面アイコン
- <link rel="manifest" href="/manifest.webmanifest">
- インストール用アイコンを記載したJSONファイルを指す
- <meta name="theme-color" content="#4F98FB">
- 対応するモバイルブラウザーで、ブラウザーの画面に色を付ける
コピーして使えるファビコンのコード
5つのファイルのセット用headタグ
これらを全ページのheadに貼り付けます。ICOにsizes属性を付けておくと、一部のブラウザーがSVGよりICOを優先して選ぶのを防げます。
標準アイコンとマスカブルアイコンを含むマニフェスト
2つの標準アイコンと、余白を付けたマスカブル版です。typeフィールドがあれば、ブラウザーは使えない形式を読み飛ばせます。
ダークモードに対応するSVGファビコン
SVG内のstyleブロックが、ブラウザーがダークモードのときに塗りの色を切り替えるため、暗いタブでもマークが消えません。
コピー
Harbor Bakery
サイト
マイサイト
192と512のPNG
マスカブル版512 PNG
192と512のアイコンがないと、Chromium系のブラウザーはサイトのインストールを提案しません。
ファビコンのコード作成ツール
サイト名とテーマカラーを入力し、手元にあるファイルを選ぶと、それに合ったhead用のタグとマニフェストをコピーできます。
サイト名
テーマカラー
テーマカラーを選ぶ
テーマカラーの16進値
手元にあるファイル
head用のタグ
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る