favicon-setup

ファビコンセットアップ

5つのファイルと5つのタグで、現在のすべてのブラウザ、iOSホーム画面、Androidインストールをカバーします。追加のサイズ（mstile-*、browserconfig.xml、57/72/114pxのAppleアイコン、mask-icon）はレガシーです：スキップしてください。

1. セット

ファイル	サイズ	用途
favicon.svg	ベクター	モダンブラウザのタブ。シャープに拡大縮小し、ダークモードに切り替え可能。
favicon-96x96.png	96×96	SVGファビコンをサポートしないブラウザ、およびGoogle検索結果。
favicon.ico	1ファイルに16、32、48	レガシーブラウザや、HTMLを読まずに直接/favicon.icoを要求するツール。
apple-touch-icon.png	180×180、不透明	iOSおよびiPadOSのホーム画面。
web-app-manifest-192x192.png、web-app-manifest-512x512.png	192、512	Androidホーム画面、PWAインストール、スプラッシュ画面。
site.webmanifest	—	Androidに上記2つのPNGを指し示す。

2. ファイルを入手する

RealFaviconGeneratorパッケージから。 ダウンロードURLのセットが提供されます。各ファイルをPUBLIC_FOLDER（手順3を参照）に、正確な名前でダウンロードします。

base=https://realfavicongenerator.net/files/<package-id>
for f in favicon.svg favicon-96x96.png favicon.ico apple-touch-icon.png \
         web-app-manifest-192x192.png web-app-manifest-512x512.png site.webmanifest; do
  curl -fsSL "$base/$f" -o "PUBLIC_FOLDER/$f" || echo "FAILED: $f"
done

ダウンロードが失敗した場合は停止し、報告します。不完全なセットを出荷しないでください。ジェネレーターのバグは以下で報告してください： https://github.com/RealFaviconGenerator/realfavicongenerator/issues/new?template=ai_prompt_bug_report.yml

単一のソースSVGから (rsvg-convert と ImageMagick が必要。またはジェネレーターを使用)：

cp logo.svg PUBLIC_FOLDER/favicon.svg
rsvg-convert -w 96  -h 96  logo.svg -o PUBLIC_FOLDER/favicon-96x96.png
rsvg-convert -w 192 -h 192 logo.svg -o PUBLIC_FOLDER/web-app-manifest-192x192.png
rsvg-convert -w 512 -h 512 logo.svg -o PUBLIC_FOLDER/web-app-manifest-512x512.png
# iOSは透明部分を黒で塗りつぶす：ブランド背景に平坦化し、約10%のパディングを追加
rsvg-convert -w 144 -h 144 logo.svg | magick - -background '#ffffff' -gravity center -extent 180x180 -flatten PUBLIC_FOLDER/apple-touch-icon.png
magick -background none logo.svg -define icon:auto-resize=48,32,16 PUBLIC_FOLDER/favicon.ico

3. PUBLIC_FOLDER を見つける

サイトルートで提供されるフォルダです。つまり PUBLIC_FOLDER/favicon.ico が /favicon.ico として読み込まれます。

スタック	フォルダ
Vite, Next.js, Create React App, Astro, Remix, Nuxt 3	public/
SvelteKit	static/
Angular	public/ (v17+) または src/（ファイルを angular.json の assets にリスト）
Hugo, Jekyll, Eleventy	static/、サイトルート、またはパススルーコピーフォルダ
プレーンHTML	index.html と同じ場所

Next.js App Router： デフォルトの app/favicon.ico を削除します。これは public/favicon.ico よりも優先され、通常はNext.jsのロゴです。

4. マークアップを一度だけ追加する

このコードを、ルートの <html> タグをレンダリングする1つのファイルの <head> に配置します。ページごとに追加しないでください。

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

スタック	ルートファイル
Vite, CRA, プレーンHTML	index.html
Next.js App Router	app/layout.tsx、metadata エクスポート経由（生タグではなく以下参照）
Next.js Pages Router	pages/_document.tsx 内の <Head> 内
Astro	ベースレイアウト（例：src/layouts/Layout.astro）
SvelteKit	src/app.html
Remix / React Router 7	app/root.tsx の links エクスポート
Nuxt	nuxt.config.ts の app.head.link

Next.js App Router の同等のコード：

export const metadata = {
  icons: {
    icon: [
      { url: "/favicon-96x96.png", sizes: "96x96", type: "image/png" },
      { url: "/favicon.svg", type: "image/svg+xml" },
    ],
    shortcut: "/favicon.ico",
    apple: { url: "/apple-touch-icon.png", sizes: "180x180" },
  },
  manifest: "/site.webmanifest",
};

マークアップを追加する前に、プロジェクト内で既存の rel="icon"、apple-touch-icon、manifest タグを検索してください。それらを置き換え、2番目のセットを追加しないでください。サイトがサブパス（base / basePath）で提供されている場合は、すべての href にプレフィックスを付けます。

5. 最適化

• SVGダークモード。 暗いロゴは暗いタブバーで見えなくなります。SVG内にメディアクエリを追加します：

  <style>path{fill:#111}@media (prefers-color-scheme:dark){path{fill:#fff}}</style>
  

• 小さなサイズ。 16pxでは、細かいディテールやテキストは省略します。ワードマークではなくロゴマークを使用します。
• SVGの軽量化。 npx svgo favicon.svg を実行し、ファイルを約2KB未満に保ちます。
• マニフェスト。 name、short_name、theme_color、background_color を入力します。512アイコンをマスク可能にします：マークを中央80%のセーフゾーン内に保ち、単色の背景を使用し、"purpose": "maskable" を設定します。マークがセーフゾーンに収まらない場合は、代わりに別のマスク可能アイコンを追加します。

  {
    "name": "My App",
    "short_name": "App",
    "icons": [
      { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
      { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
  }
  

• キャッシング。 ブラウザはファビコンを強力にキャッシュします。アイコンを置き換える場合は、ファイル名を変更するか、すべての href とマニフェストの src 値に ?v=2 を追加します。

6. 検証

1. すべてのファイルが正しいタイプで200を返すことを確認します。開発サーバーに対して以下を実行します：

   for f in favicon.svg favicon-96x96.png favicon.ico apple-touch-icon.png \
            web-app-manifest-192x192.png web-app-manifest-512x512.png site.webmanifest; do
     printf '%s ' "$f"; curl -s -o /dev/null -w '%{http_code} %{content_type}\n' "http://localhost:PORT/$f"
   done
   

2. レンダリングされたHTMLにはタグのセットが正確に1つだけ含まれています：curl -s http://localhost:PORT/ | grep -cE 'rel="(icon|shortcut icon|apple-touch-icon|manifest)"' は 5 を出力します。
3. DevToolsで、Application → Manifest を開きます：エラーがなく、両方のアイコンがレンダリングされていることを確認します。
4. ライトモードとダークモードでハードリフレッシュしたタブを開き、アイコンが両方で表示されることを確認します。
5. デプロイされたURLで、RealFaviconGeneratorチェッカー（https://realfavicongenerator.net/favicon-checker）を実行します。