Icônes Web, PWA et Chrome

Le ZIP Web contient favicon.ico, des PNG de 16/32 px, une icône Apple touch de 180 px, des icônes PWA de 192/512 px, site.webmanifest et og.png de 1200x630.

Contenu du ZIP Web

Les deux PNG PWA sont des icônes carrées classiques. Leurs noms et tailles correspondent au tableau icons de site.webmanifest ; og.png est une image de partage distincte.

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

Relier les icônes à votre site

1. Copiez les fichiers de Web dans le dossier public et publiez-les à la racine du domaine, ou adaptez les chemins au dossier choisi.
2. Modifiez name et short_name dans site.webmanifest. start_url et scope sont relatifs au manifeste ; les chemins exportés des icônes commencent par /. Adaptez-les si les images sont dans un sous-dossier.
3. Ajoutez les liens du manifeste, du favicon et d'Apple touch dans le head HTML. Utilisez HTTPS ou localhost. Dans les outils du navigateur, vérifiez le manifeste et que chaque URL retourne une image, pas une page HTML de repli.

<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"
}

Ces icônes ne sont pas préparées comme images maskable. Le ZIP n'ajoute ni service worker ni fonctionnement hors ligne ; les icônes seules ne garantissent pas l'installation. Testez le navigateur et l'appareil visés.

Générateur de Favicon et d'icônes PWA

Exporter les icônes et images promotionnelles Chrome

Importez une image et choisissez Chrome pour télécharger les PNG et les visuels rectangulaires. L'image est centrée sur blanc ; finalisez le design avant l'envoi.

• Icônes d'extension : PNG de 16, 32, 48 et 128 px et fichier de départ Manifest V3.
• Icône de boutique (128x128) : PNG séparé pour la fiche Chrome Web Store.
• Petite vignette (440x280) : PNG opaque pour le petit emplacement promotionnel.
• Marquee (1400x560) : Grand visuel promotionnel facultatif, distinct d'une capture d'écran.
• Captures : Capturez l'extension séparément en 1280x800 ou 640x400. Cet outil ne capture ni n'encadre les écrans.

Générateur d'icônes et d'images pour extensions Chrome

Références officielles

• Web App Manifest
• Chrome Web Store