ファビコンジェネレーター｜ICO・PNGを複数サイズ一括生成

HTML に1行も書かず、/favicon.ico をドキュメントルートに置くだけの方式です。ブラウザはこのパスを暗黙に探しに行くため、それだけで表示されます。

your-site/
└── favicon.ico   ← ここに置くだけ（HTML への記述は不要）

<!-- 明示的に書くなら、この1行だけで足ります -->
<link rel="icon" href="/favicon.ico" sizes="any">

ICO に加えて PNG と Apple Touch Icon を用意する、現在もっとも一般的な構成です。デスクトップのブラウザから iOS のホーム画面追加まで一通りカバーできます。

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

ホーム画面に追加したときにアプリのように起動する PWA では、site.webmanifest にアイコンを登録します。192px と 512px の両方が揃っていないとインストール可能と判定されません。

<!-- HTML（head 内） -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

<!-- site.webmanifest -->
{
  "name": "My Site",
  "short_name": "Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

SVG ファビコンは解像度に依存せず、SVG 内の CSS でダークモード時の色を切り替えられます。対応していないブラウザのために ICO・PNG を併記します。

<!-- HTML（head 内）。上から順に「読めるもの」が使われる -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- favicon.svg（ダークモードで色を反転させる例） -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

アイコンをルート以外に置く場合や、差し替えたのに古いアイコンが表示され続ける場合の書き方です。ファビコンはブラウザに強くキャッシュされるため、URL を変えるのが最も確実です。

<!-- 任意のディレクトリに置く場合はパスを明示する -->
<link rel="icon" href="/assets/icons/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png?v=2">

<!-- サブディレクトリで公開しているサイト（例: /docs/）は絶対パスに注意 -->
<link rel="icon" href="/docs/favicon.ico" sizes="any">