← カテゴリ一覧に戻る

ファビコン設定

link rel=icon

ファビコンはブラウザのタブやブックマークに表示される小さなアイコン。<link rel="icon"> で指定する。 複数サイズ・フォーマットを用意することでさまざまなデバイスに対応できる。

ファビコンのイメージ

U
UI Memo

← タブに表示される小さなアイコンがファビコン

基本的な設定

<head>
  <!-- 基本（ICOファイル） -->
  <link rel="icon" href="/favicon.ico">

  <!-- PNGファイル（サイズ指定） -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

  <!-- SVGファビコン（モダンブラウザ） -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>

Apple Touch Icon（iOS・iPadOS）

iOSでホーム画面に追加したときに表示されるアイコン。rel="apple-touch-icon" で指定する。 180×180px が推奨サイズ。

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Web App Manifest（PWA対応）

PWAとしてインストールされたときのアイコンは manifest.json で管理する。

<!-- HTMLで参照 -->
<link rel="manifest" href="/manifest.json">

<!-- manifest.json -->
{
  "name": "My App",
  "short_name": "App",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

比較ファビコンフォーマットの比較

形式対応特徴
.ico全ブラウザ複数サイズを1ファイルに格納できる。後方互換性が高い
.pngモダンブラウザ透過対応。サイズごとにファイルが必要
.svgChrome/Firefox/Safariベクター形式で拡大縮小が綺麗。ダークモード対応も可能

Tips推奨構成

<head>
  <!-- レガシーブラウザ向け -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- モダンブラウザ向けSVG（最優先） -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">

  <!-- iOS向け -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- PWA -->
  <link rel="manifest" href="/manifest.json">
</head>

SVGを優先指定することでダークモード対応（prefers-color-scheme メディアクエリ）も1ファイルで実現できる。

🤖 AIプロンプトテンプレート

以下の要件を満たす、`<link rel="icon">` を使ったファビコン設定のHTMLサンプルを作成してください。

- 基本の `.ico` ファイル指定と PNG ファビコンの `<link>` タグを記述すること
- `sizes` 属性を使って 16x16・32x32・180x180（Apple Touch Icon）を指定すること
- `<link rel="apple-touch-icon">` による iOS 向けアイコン設定を含めること
- `manifest.json` と `<link rel="manifest">` によるPWA対応のアイコン設定も示すこと
- SVGファビコン（`type="image/svg+xml"`）のモダンな指定方法も含めること

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo