推奨ファイル仕様
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 は互換性のためにルートに配置
Advertisement
ファビコンサイズ一覧ジェネレーターとは？
本ツールは、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など）を付けてください。
Advertisement
主要デバイス・ブラウザ別 ファビコン推奨サイズ一覧
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標準を反映しています。
よくある質問（FAQ）
Q.自分の画像をアップロードして変換するツールですか？
A. いいえ。本ツールは「正しいサイズ一覧」と「実装用コード」を確認するためのリファレンスツールです。画像をアップロードする必要がないため、デザインデータがサーバーに送信されるリスクはありません。
Q.ここに表示されるコードは商用サイトで使っても大丈夫ですか？
A. はい、もちろんです。一般的なWeb標準に基づいたコードを生成していますので、個人・商用問わず自由にご利用いただけます。
Q.利用履歴が保存されることはありますか？
A. ありません。当サイトでは閲覧データをサーバー側で収集・保存することは一切ありません。完全匿名で安心してご利用いただけます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。