アイコンを作るだけでは反映されません。サイトにファイルを置き、ページから参照します。ここではPolishToolsのパッケージをサイトのルートに配置する場合を説明します。
ZIP内のファイルを確認
favicon.icoには複数の小さいサイズ、icon-*.pngには個別画像が入ります。apple-touch-icon.png、icon-maskable-512.png、site.webmanifest、integration.htmlもあります。integration.htmlはページ全体ではなくheadタグの参考用です。
ルートとサブディレクトリ
生成したパスは/favicon.icoのように/で始まります。example.com/app/で動く場合は/app/かルートかを決めます。linkのhref、iconsのsrc、start_urlを実際の配信場所に合わせてください。
小さいアイコンとマスカブルの確認
16px画像を実寸で開き、線がつぶれていないか確認します。マスカブルはOSの切り抜きに備えて主要図柄に余白を設けます。PolishToolsは通常アイコンと別ファイルを生成します。
マニフェストを接続してもオフラインアプリにはなりません。インストールやオフライン動作には別の実装・ブラウザ条件の確認が必要です。
例:Astroのルート配信
ドメインのルートで配信するAstroサイトのアイコンを差し替えます。
手順
- 画像・ICO・マニフェストをpublicフォルダーへ置きます。
- レイアウトのheadにタグを反映し、古い参照との重複を確認します。
- ビルド・配信後に/favicon.icoと/site.webmanifestを確認します。
結果
ファイル配信とページの参照が揃えば配置は完了です。古いアイコンが残る場合はキャッシュや別のheadタグも確認してください。
よくある質問
マニフェストはそのまま使えますか?
名前・色・開始URL・アイコンパスを確認してください。サブディレクトリ配信では変更が必要な場合があります。