Quelles tailles d’icônes pour une extension Chrome ?

En bref : une extension Chrome utilise des icônes PNG de 16, 32, 48 et 128 px. Ouvrez le Générateur d’icônes d’extension Chrome d’Imgovo, ajoutez un logo et téléchargez un ZIP avec les quatre tailles et la partie icons de manifest.json. Tout est créé dans votre navigateur : votre logo n’est jamais envoyé.

Où chaque taille sert

Selon la documentation de Chrome, les quatre tailles ont des rôles différents :

Taille	Où elle apparaît
16 × 16 px	Favicon sur les pages de l’extension et menu contextuel
32 × 32 px	Souvent exigée sur les ordinateurs Windows ; utilisée aussi pour l’icône de la barre d’outils dans l’extrait ci-dessous
48 × 48 px	La page de gestion des extensions
128 × 128 px	Le Chrome Web Store et la boîte de dialogue d’installation

Comme l’icône de 16 px est minuscule, les détails fins et le texte mince disparaissent. Un symbole marqué ou une lettre fonctionne mieux qu’un logo détaillé.

Utilisez du PNG, pas du SVG

Chrome ne prend pas en charge le SVG pour les icônes déclarées dans manifest.json. Vous pouvez quand même partir d’un logo SVG : le générateur le dessine à chaque taille et enregistre des fichiers PNG. Pour convertir un SVG vous-même, le Convertisseur SVG le fait à une largeur exacte.

Pas à pas

1. Ouvrez le Générateur d’icônes d’extension Chrome et déposez un logo sur la page, cliquez pour le choisir ou collez-le depuis le presse-papiers. Une image carrée à fond transparent donne le meilleur résultat.
2. Sous Forme, choisissez Ajuster l’image entière pour garder tout le logo, ou Recadrer en carré pour remplir le carré.
3. Choisissez un Arrière-plan : transparent ou une couleur.
4. Saisissez le Dossier des icônes dans votre extension, par exemple icons/. Utilisez un nom de dossier simple, sans espaces et sans adresse web.
5. Réglez la marge intérieure et les Coins arrondis. Utilisez moins de marge pour les petites icônes.
6. Vérifiez les quatre aperçus sous Icônes.
7. Cliquez sur Télécharger les icônes (ZIP).

Déclarer les icônes dans manifest.json

Le ZIP contient les quatre fichiers PNG et un fichier nommé manifest-icons.json. Les mêmes lignes apparaissent aussi sous Ajouter à votre manifest.json, avec le bouton Copier. Elles comprennent deux parties : la clé icons (tailles et chemins) et la clé action (l’icône de la barre d’outils).

Le résultat ressemble à ceci. Les noms de fichiers de votre propre paquet peuvent différer : copiez donc les lignes fournies par l’outil :

{
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon-16.png",
      "32": "icons/icon-32.png"
    }
  }
}

Ce n’est pas un manifeste complet. Copiez les parties icons et action dans votre propre manifest.json, créez le dossier dans votre extension et placez-y les fichiers PNG.

Firefox et Edge

Leurs formats d’extension utilisent aussi une clé icons avec des fichiers PNG, mais chaque boutique a ses propres règles de validation et peut demander des tailles supplémentaires. Consultez la documentation de la boutique où vous publiez. Imgovo ne fait que créer les icônes ; il ne soumet ni n’approuve rien.

Liste de contrôle avant publication

• Les quatre fichiers PNG existent dans le dossier indiqué dans manifest.json.
• L’icône de 16 px reste lisible sur fond clair et sur fond sombre.
• L’icône correspond au logo de votre fiche sur la boutique.
• Vous avez testé l’extension dans votre navigateur après avoir modifié le manifeste.

Confidentialité

Les icônes sont dessinées dans votre navigateur et le ZIP est créé sur votre appareil. Votre logo ne quitte jamais votre ordinateur.

Essayez maintenant

Ouvrez le Générateur d’icônes d’extension Chrome, ajoutez votre logo et téléchargez les quatre tailles dans un seul ZIP. Pour une icône de site web, utilisez plutôt le Générateur de favicon.