アイコンを作るだけでは反映されません。サイトにファイルを置き、ページから参照します。ここでは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サイトのアイコンを差し替えます。

手順

  1. 画像・ICO・マニフェストをpublicフォルダーへ置きます。
  2. レイアウトのheadにタグを反映し、古い参照との重複を確認します。
  3. ビルド・配信後に/favicon.icoと/site.webmanifestを確認します。

結果

ファイル配信とページの参照が揃えば配置は完了です。古いアイコンが残る場合はキャッシュや別のheadタグも確認してください。

よくある質問

マニフェストはそのまま使えますか?

名前・色・開始URL・アイコンパスを確認してください。サブディレクトリ配信では変更が必要な場合があります。

参考資料

関連ガイド