Welke icoonformaten heeft een Chrome-extensie nodig?

Kort antwoord: een Chrome-extensie gebruikt PNG-iconen van 16, 32, 48 en 128 px. Open de Chrome-extensie-icoongenerator van Imgovo, voeg één logo toe en download een ZIP met alle vier de formaten plus het icons-deel van manifest.json. Alles wordt in je browser gemaakt, dus je logo wordt nooit geüpload.

Waar elk formaat wordt gebruikt

Volgens de documentatie van Chrome hebben de vier formaten verschillende taken:

Formaat	Waar het verschijnt
16 × 16 px	Favicon op extensiepagina’s en in het contextmenu
32 × 32 px	Vaak vereist op Windows-computers; ook gebruikt voor het werkbalkicoon in het fragment hieronder
48 × 48 px	De beheerpagina voor extensies
128 × 128 px	De Chrome Web Store en het installatievenster

Omdat het icoon van 16 px zo klein is, verdwijnen fijn detail en dunne tekst. Een krachtig symbool of één letter werkt beter dan een gedetailleerd logo.

Gebruik PNG, geen SVG

Chrome ondersteunt geen SVG voor de iconen die in manifest.json zijn opgegeven. Je kunt wel met een SVG-logo beginnen: de generator tekent het op elk formaat en slaat PNG-bestanden op. Wil je een SVG zelf omzetten, dan doet de SVG-omzetter dat op een exacte breedte.

Stap voor stap

1. Open de Chrome-extensie-icoongenerator en zet een logo op de pagina neer, klik om het te kiezen of plak vanaf het klembord. Een vierkante afbeelding met een transparante achtergrond werkt het best.
2. Kies onder Vorm Hele afbeelding laten passen om het hele logo te behouden, of Bijsnijden tot vierkant om het vierkant te vullen.
3. Kies een achtergrond: transparant of een kleur.
4. Voer de map van de iconen in je extensie in, bijvoorbeeld icons/. Gebruik een eenvoudige mapnaam, zonder spaties en zonder webadres.
5. Pas Opvulling en Afgeronde hoeken aan. Gebruik minder opvulling voor kleine iconen.
6. Controleer de vier voorbeelden onder Iconen.
7. Klik op Iconen downloaden (ZIP).

De iconen aan manifest.json toevoegen

De ZIP bevat de vier PNG-bestanden en een bestand met de naam manifest-icons.json. Dezelfde regels staan ook onder Toevoegen aan je manifest.json, met een knop Kopiëren. Ze bevatten twee delen: de sleutel icons (formaten en paden) en de sleutel action (het werkbalkicoon).

Het resultaat ziet er zo uit. De bestandsnamen in je eigen pakket kunnen afwijken, dus kopieer de regels die de tool geeft:

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

Dit is geen volledig manifest. Kopieer de delen icons en action naar je eigen manifest.json, maak de map in je extensie en zet de PNG-bestanden erin.

Firefox en Edge

Hun extensieformaten gebruiken ook een sleutel icons met PNG-bestanden, maar elke store heeft eigen beoordelingsregels en kan om extra formaten vragen. Raadpleeg de documentatie van de store waarin je publiceert. Imgovo maakt alleen de iconen; het dient niets in en keurt niets goed.

Checklist voordat je publiceert

• De vier PNG-bestanden staan in de map die in manifest.json wordt genoemd.
• Het icoon van 16 px is nog leesbaar op een lichte en een donkere achtergrond.
• Het icoon komt overeen met het logo dat je in de storevermelding gebruikt.
• Je hebt de extensie in je browser getest nadat je het manifest hebt gewijzigd.

Privacy

De iconen worden in je browser getekend en de ZIP wordt op je apparaat gemaakt. Je logo verlaat je computer nooit.

Probeer het nu

Open de Chrome-extensie-icoongenerator, voeg je logo toe en download alle vier de formaten in één ZIP. Gebruik voor een websiteicoon in plaats daarvan de favicon-generator.