SVG Favicon ジェネレーター

Favicon ZIPの各ファイルの役割

横にスクロールして表全体を確認 →

生成前に小さな表示を確認する

1. 0116pxのタブで確認する

   縮小で読めなくなる文字や細い装飾を整理します。横長ロゴは正方形で識別できる簡略版が必要になる場合があります。

2. 02余白とコントラストを調整する

   各辺8%から始め、明暗のプレビューを確認します。暗い背景にも同じ画像を表示します。独立したダークモード用画像を自動生成する機能ではありません。

3. 03識別しやすいサイト名を入力する

   名前はmanifestとタブプレビューに使います。サイト自体のHTMLタイトルは変わりません。既存のPWA設定がある場合はその設定を保持してください。

生成したfaviconファイルの設置方法

1. ZIPを展開し、画像とsite.webmanifestをドメインルートとして公開されるpublicディレクトリへ置きます。/favicon.svgを直接開き、404やトップページではなく画像が返ることを確認します。
2. 下のリンクをHTMLのheadへ追加します。フレームワークがアイコンのメタデータを管理する場合はそちらに同じパスを設定し、古い宣言との競合を避けます。
3. /assets/icons/などのサブフォルダーではHTMLのhrefを変更します。manifest内はmanifestからの相対パスです。PNGを同じフォルダーに置くかパスを変更してください。既存manifestにはアイコン項目を統合し、全体を上書きしないでください。
4. 画像とページの設定をデプロイし、新しいセッションで確認します。古いアイコンが残る場合は実際の取得URLを確認してください。タブのキャッシュだけでは失敗と判断できません。

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

Faviconが表示されないときの確認

古いアイコンが残る

公開済みのheadと画像URLを確認し、新しいセッションで試します。ブラウザーのキャッシュに加え、古い画像を指す重複した宣言も確認してください。

空白に見える・読みにくい

16pxの明暗プレビューを確認します。透過の白いロゴは白いタブで見えなくなるため、背景色やコントラストを見直します。

Manifestの画像が見つからない

site.webmanifestを開き、その位置から画像パスを確認します。icon-192.pngとicon-512.pngを同じフォルダーに置くか、実際のパスに変更してください。