Webサイト・アプリで必要なファビコンの推奨サイズを一覧で確認できます。 制作・実装時のチェックに便利です。
推奨ファイル仕様
favicon.ico
レガシーブラウザ用（ルート配置推奨）
favicon.svg
モダンブラウザ用（ダークモード対応可）
icon-32.png
一般的なデスクトップブラウザ用
実装用コード
以下のコードをHTMLの <head> 内に貼り付けてください。
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="icon" href="/icon-32.png" type="image/png" sizes="32x32">
制作時のコツ
- SVG形式なら1ファイルで多解像度に対応可能
- iOS用は角丸にせず、正方形(180px)で作成
- favicon.ico は互換性のためにルートに配置
ファビコンサイズ一覧ジェネレーターとは？
本ツールは、WebサイトやWebアプリ（PWA）の制作において欠かせないファビコン（Favicon）の推奨サイズと実装コードを一目で確認できるリファレンスツールです。 ブラウザのタブ、スマホのホーム画面、Windowsのタイル表示など、多種多様なデバイスで正しくアイコンを表示させるための「正解のサイズ」と「HTMLタグ」を即座に導き出します。
こんなシーンで便利です
Webサイトの新規立ち上げ・納品
クライアントワークでのファビコン作成。主要ブラウザからiOS・Androidまで、漏れのないアイコン書き出しリストとして活用できます。
PWA（Webアプリ）の開発
ホーム画面追加時のスプラッシュ画面用サイズ（512pxなど）を確認。Android Chrome向けの適切な宣言方法も把握できます。
SVGファビコンへのモダン化
最新のブラウザで推奨されるSVG形式の記述方法を確認し、ダークモード対応のアイコン実装をスムーズに行えます。
サイトのモバイル最適化
Apple Touch Iconの最適なサイズを調査し、iPhoneユーザーのブックマーク表示を美しく整えます。
使い方は簡単 3ステップ
- 「デスクトップ」「モバイル」「PWA」のタブを切り替えて、必要なサイズを確認します。
- 「実装用コード」エリアから、HTMLのheadタグ内に貼り付けるスニペットをコピーします。
- 必要に応じて各項目のコピーアイコンをクリックし、個別のタグを取得します。
※各項目のコピーアイコンをクリックすれば、個別のlinkタグも取得可能です。
ご利用時の注意点
- ルートディレクトリのfavicon.ico：一部のブラウザやクローラーは /favicon.ico を直接探しに行くため、念のため配置しておくのが安全です。
- iOS用アイコンは「正方形」で：Apple Touch IconはiOS側で自動的に角丸処理が行われます。180px四方の正方形で書き出してください。
- キャッシュのクリア：反映されない場合はブラウザキャッシュをクリアするか、URL末尾にクエリ（?v=2など）を付けてください。
主要デバイス・ブラウザ別 ファビコン推奨サイズ一覧
2026年現在のモダンなWeb制作で標準とされるファビコンサイズと役割のまとめです。
| 用途・デバイス | サイズ | ファイル形式 | 役割・表示箇所 |
|---|---|---|---|
| ブラウザ共通 | 16 × 16 | .ico / .png | ブラウザのタブ、ブックマークバー |
| デスクトップ | 32 × 32 | .png | 高解像度ディスプレイ用の標準サイズ |
| iOS (iPhone/iPad) | 180 × 180 | .png | Apple Touch Icon（ホーム画面追加時） |
| Android / PWA | 192 × 192 | .png | ホーム画面アイコン・Webアプリ用 |
| Android / PWA | 512 × 512 | .png | スプラッシュ画面（起動時画面） |
| モダンブラウザ | サイズ不問 | .svg | ダークモード対応・高精細表示 |
【2026年のファビコン実装のポイント】
- ICO形式は必須か？：レガシーなブラウザへの配慮として、ルートディレクトリに
favicon.icoを配置するのが今でも最も安全なプラクティスです。 - iOS用（Apple Touch Icon）：iOS側で角丸処理が自動で行われるため、透過なしの背景色あり、かつ「正方形」で作成するのが基本です。
- PWA（Webアプリ）対応：
manifest.json内で192pxと512pxを指定することで、Androidのインストール画面や起動画面を最適化できます。 - SVGファビコン：ベクター形式（SVG）を使用すれば、1つのファイルで全解像度に対応でき、CSSメディアクエリを用いたダークモード・ライトモードの切り替えも可能になります。
※「ファビコン サイズ 2026」「apple touch icon サイズ」「favicon.ico png 違い」などの検索意図に基づき、最新のWeb標準を反映しています。
検索表示の最適化とマルチデバイス対応を加速させるファビコン運用ノウハウ
ファビコンの解像度基準を抑えるだけでなく、検索結果画面における掲載率（インデックス率）の向上や、次世代のマークアップ手法を実務へ落とし込むための応用知識です。
Googleの検索結果にファビコンが反映されない問題を回避する構造化とガイドライン規定
HTMLに正しいサイズを記述しても、Googleの検索結果（モバイル・デスクトップ）にファビコンが表示されない現象が多発しています。
これを防ぐには、Googleのクローラー（Googlebot-Image）がアイコンファイルをブロックしないようrobots.txtでのアクセスを許可し、かつブランドを適切に表す非透過の正方形（16の倍数サイズ）の画像URLをトップページのhead内に常時固定することが、インデックス率を最大化するための必須要件です。
Safariのピン留めタブやmacOSのDock表示を最適化するMac特有のアイコン実装
Mac版Safariでタブを固定した際や、MacのTouch Bar環境でサイトを視覚的に引き立たせるには、通常のPNGファイルではなくmask-icon（SVG形式）の指定が有効です。
linkタグの属性に「rel='mask-icon'」を指定し、アイコンの単色ベクターデータを記述した上で、テーマに合わせたhex形式のカラーコードを同一タグ内に明記することにより、macOSのUIと完全に調和した、解像度の劣化が一切ないシャープなベクターピンアイコンとして描画されます。
WordPressやNext.jsなどの主要CMS・モダンフレームワークにおける自動生成機能との共存
WordPressの「サイトアイコン機能（512pxのPNG1枚から自動生成）」や、Next.jsのApp Routerが持つ「Metadata API（favicon.icoやicon.pngの配置による自動構成）」を使用する場合、手動でコーディングしたlinkタグと競合して意図しないサイズが優先されることがあります。
フレームワーク側の自動生成ロジックとディレクトリ構造を正確に把握し、システムが裏側で出力するメタタグの優先順位（優先度：自動生成＞静的記述）を考慮した上で、アセットフォルダを整理することが、予期せぬ表示不具合を防ぐためのモダン開発の鉄則です。
よくある失敗と対策
「favicon.ico」の配置やファイルサイズを軽視して読み込みエラーやSEOペナルティ
モダンブラウザがPNGやSVGをサポートしたことでICO形式を省略するケースが増えていますが、Googleなどの検索クローラーや古いシステムは自動的にルートディレクトリの「/favicon.ico」へ直接リクエストを送信します。ファイルが存在しないと404エラーを連発してクロールエラー（SEOペナルティ）のトリガーになり、逆にマルチアイコン（16px/32px/48px）を詰め込みすぎて重いICOファイルを作ると表示速度を遅延させCore Web Vitalsのスコアを悪化させます。
💡 対策・解決策を見る▼
「apple-touch-icon.png」の背景を透過させてiOSホーム画面で黒く潰れる表示バグ
iPhoneやiPadなどのiOSデバイスでWebサイトを「ホーム画面に追加」した際に読み込まれる「Apple Touch Icon（アップルタッチアイコン）」。Web用ファビコンと同様にロゴ背景を透明（透過PNG）のまま書き出してしまうと、iOS仕様の自動背景補正によって透過部分が「真っ黒」に塗り潰されてしまい、サイトのブランドイメージが著しく低下する表示バグが発生します。
💡 対策・解決策を見る▼
「manifest.json」内のPWAスプラッシュ画面・Android用アイコンサイズ指定漏れ
スマホ対応（Android Chrome）やPWA（Progressive Web Apps）化の際、HTMLのheadタグ内だけでファビコンを制御しようとすると不十分です。「webmanifest（manifest.json）」で定義する「icons」配列のサイズ（192x192、512x512）が不足していたり、記述を忘れると、Android端末でアプリとしてインストールした際にアイコンが画質荒れを起こしたり、アプリ起動時のスプラッシュ画面にアイコンが表示されずエラーになります。
💡 対策・解決策を見る▼
ブラウザキャッシュの影響でコード変更やファビコン更新が反映されないリフレッシュ失敗
ファビコンの画像やファイルパス、HTMLコード（link rel）を修正してサーバーへアップロードしたにもかかわらず、過去の強いブラウザキャッシュが原因で、タブのアイコンが古いまま切り替わらないトラブルが多発します。これによりWeb開発者やコーダーが「実装コードが間違っているのか」と錯覚し、不要な修正を繰り返してコーディング作業時間を大幅にロスしてしまいます。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.このファビコンサイズ一覧ツールでは画像のアップロードや自動変換はできますか
A. いいえ。このツールは主要なデバイスやブラウザに必要な推奨サイズおよび実装用HTMLコードを確認するためのリファレンスツールです。画像のアップロード機能や変換機能はありません。
Q.確認したHTMLコードの利用やサイズ一覧データの閲覧に何か制限はありますか
A. いいえ。表示されている推奨サイズ一覧や実装用のHTMLコードスニペットは、どなたでもいつでも制限なく確認してコピーすることが可能です。Webサイト制作やアプリ開発の実務にそのままお役立てください。
Q.表示される推奨サイズやHTMLコードは最新のWeb標準に対応していますか
A. はい。主要ブラウザの仕様をはじめ、iOSのアップルタッチアイコン、AndroidやPWA向けのマニフェストファイル用サイズ、モダンなSVG形式の記述方法まで、2026年現在の最新のWeb標準に準拠したデータを掲載しています。
Q.ツールで確認したHTMLコードはスマートフォンのブラウザでもコピーできますか
A. はい。レスポンシブ設計に対応しているため、スマートフォンやタブレットのブラウザからでも画面崩れなく閲覧できます。各タブの切り替えや実装用コードエリアからのコピー操作も同様に行えます。
Q.このサイトのツールを利用することで入力データや閲覧履歴が外部に漏洩しませんか
A. はい、安全です。当ツールサイトは完全ローカル処理型の安全設計を採用しています。お客様がページ内で選択したタブの情報や閲覧データが外部サーバーへ送信されることはなく、データベース等への保存も一切行われません。処理はすべてお使いのブラウザ内だけで完結し、ページを閉じれば即座にデータは完全消去されるため、情報漏洩のリスクはありません。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。