Web・PWA・Chromeのアイコン

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/
  favicon.ico
  favicon-16x16.png
  favicon-32x32.png
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png
  site.webmanifest
  og.png
  README.txt

サイトからアイコンを参照する

1. Web内のファイルをサイトの公開フォルダーにコピーし、ドメイン直下に配置するか、配置先に合わせてパスを変更します。
2. site.webmanifestのnameとshort_nameを編集します。start_urlとscopeはマニフェストの位置に対する相対パスで、出力アイコンのパスは/から始まります。サブフォルダーに配置する場合は変更してください。
3. 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">

{
  "name": "My App",
  "short_name": "App",
  "start_url": "./",
  "scope": "./",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

これらはmaskable用に設計された素材ではありません。ZIPにはservice workerやオフライン機能がなく、アイコンだけでインストールできるとは限りません。対象ブラウザーと端末でテストしてください。

ファビコン＆PWAアイコンジェネレーター

Chromeのアイコンとプロモーション画像を出力

画像をアップロードしてChromeを選ぶと、PNGアイコンと長方形の画像を出力します。白い背景に素材を中央配置するため、提出前にデザインを確認してください。

• 拡張機能アイコン：16、32、48、128 pxのPNGとManifest V3のひな形。
• ストアアイコン（128x128）：Chrome Web Store掲載用の個別PNG。
• 小タイル（440x280）：小型プロモーション枠用の不透明PNG。
• Marquee（1400x560）：任意の大型プロモーション画像。掲載用スクリーンショットとは別です。
• スクリーンショット：実際の画面を1280x800または640x400で別途撮影してください。このツールでは撮影やフレーム追加は行いません。

Chrome拡張機能アイコン・ストア画像生成ツール

公式資料

• Web App Manifest
• Chrome Web Store