ファビコンは、ブラウザのタブでウェブサイトを表す小さなアイコンです。プログレッシブウェブアプリ（PWA）の場合、ウェブマニフェストとモバイルホーム画面用の大きなアイコンも必要です。
ファビコンとPWAアイコンの設置
Web ZIPにはfavicon.ico、16/32 px PNG、180 px Apple touchアイコン、192/512 px PWAアイコン、site.webmanifest、1200x630のog.pngが含まれます。
Web ZIPの内容
2枚のPWA PNGは通常の正方形アイコンです。名前とサイズはsite.webmanifestのicons配列に対応し、og.pngは別の共有用画像です。
サイトからアイコンを参照する
- Web内のファイルをサイトの公開フォルダーにコピーし、ドメイン直下に配置するか、配置先に合わせてパスを変更します。
- site.webmanifestのnameとshort_nameを編集します。start_urlとscopeはマニフェストの位置に対する相対パスで、出力アイコンのパスは/から始まります。サブフォルダーに配置する場合は変更してください。
- HTML headにmanifest、favicon、Apple touchのリンクを追加します。HTTPSまたはlocalhostで配信し、ブラウザー開発ツールでマニフェストと各画像URLを確認します。HTMLの代替ページではなく画像が返ることを確かめてください。
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">これらはmaskable用に設計された素材ではありません。ZIPにはservice workerやオフライン機能がなく、アイコンだけでインストールできるとは限りません。対象ブラウザーと端末でテストしてください。
Web・PWA・Chromeの組み込みガイドを読む