--- title: "ファビコンの作り方｜サイズ・形式・設置方法を解説" description: "ファビコン（favicon）の作り方と設置方法を解説します。推奨サイズ・対応形式（ICO・PNG・SVG）、HTMLへの記述方法、スマートフォンのホーム画面アイコン設定もまとめました。" date: 2026-05-27 tags: [ファビコン, Web制作, HTML] related_tools: [ico, icon] draft: false --- ファビコン（favicon）はブラウザのタブ・ブックマーク・検索結果に表示される小さなアイコンです。サイトのブランドイメージを伝える重要な要素ですが、サイズや形式のルールを知らないと正しく表示されないことがあります。 ## ファビコンとは `favicon` は「Favorites Icon」の略で、Internet Explorerがお気に入り登録時に使ったことが始まりです。現在はブラウザタブ・アドレスバー・スマートフォンのホーム画面アイコンなど、さまざまな場所で使われています。 ## 推奨するファビコンのサイズと形式 ### 最低限必要なファイル | ファイル | サイズ | 用途 | |---|---|---| | `favicon.ico` | 16×16・32×32（マルチサイズ）| ブラウザタブ・ブックマーク（IE含む）| | `favicon.png` | 32×32 | モダンブラウザのタブ | ### 完全対応する場合 | ファイル | サイズ | 用途 | |---|---|---| | `favicon.ico` | 16×16 + 32×32 + 48×48 | 全ブラウザ対応 | | `favicon-32x32.png` | 32×32 | Safariピン留めタブ | | `apple-touch-icon.png` | 180×180 | iOSホーム画面アイコン | | `android-chrome-192x192.png` | 192×192 | Androidホーム画面アイコン | | `android-chrome-512x512.png` | 512×512 | Android起動スプラッシュ | | `favicon.svg` | ベクター | 高解像度ディスプレイ対応（Chromeなど）| ## HTMLへの記述方法 `` 内に記述します。 ```html ``` ### SVGファビコンのダークモード対応 SVG形式では CSS メディアクエリを使ってダークモードに対応できます。 ```svg ``` ## ファビコンの作り方 ### 既存の画像から作る 1. ロゴ・アイコン画像（PNG推奨）を用意する 2. 正方形にトリミングする（横長・縦長のロゴはマージンを付けて正方形に） 3. 16×16 / 32×32 / 48×48 にリサイズする 4. ICO形式に変換する [ファビコン生成ツール](/ico/)では、PNGまたはJPEGをアップロードするとマルチサイズの `favicon.ico` をブラウザ内で生成・ダウンロードできます。 ### デザインのポイント - **シンプルに**: 16×16pxでも識別できるデザインにする。細いフォントや複雑な図形は潰れる - **正方形**: タブでは必ず正方形で表示される - **ブランドカラーを使う**: サイトのメインカラーを使うと認識しやすい - **背景は透過か白**: 透過PNGがもっとも汎用性が高い ## よくある問題と解決方法 ### ファビコンが更新されないブラウザがキャッシュを保持しているためです。 - ハードリフレッシュ（Ctrl+Shift+R / Cmd+Shift+R） - ブラウザのキャッシュをクリア - URLにクエリ文字列を付ける: `href="/favicon.ico?v=2"` ### 特定のブラウザで表示されない - `favicon.ico` はルートディレクトリ（`/favicon.ico`）に置く - `` は古い書き方。`rel="icon"` を使う - Safari はSVGを優先するためSVGが壊れていると表示されない ### スマートフォンのホーム画面に追加したとき画像が出ない `apple-touch-icon.png`（180×180px）が必要です。`` の記述も確認してください。