Een favicon voor je website maken (ICO, PNG, Apple- en Android-iconen)
Op deze pagina
Kort antwoord: begin met een eenvoudige vierkante afbeelding, een letter of een emoji, haal die door de Favicon-generator van Imgovo, download de ZIP, upload de bestanden naar je site en plak de regels uit head-snippet.html in de <head> van je pagina’s. Sitebouwers zoals WordPress, Shopify en Wix hebben meestal een instelling “Site-icoon” waar je in plaats daarvan de PNG van 512 px kunt uploaden.
Waarvoor een favicon dient
De favicon is het kleine icoon in het browsertabblad. Het verschijnt ook in bladwijzers en in de browsergeschiedenis, en telefoons gebruiken verwante iconen wanneer iemand je site aan het startscherm toevoegt. Een site zonder favicon toont een standaardplaatsvervanger, en dat ziet er onaf uit.
Omdat het icoon zo klein wordt getoond, doet het ontwerp er meer toe dan de resolutie.
Ontwerp voor piepkleine formaten
- Houd het eenvoudig. Een gedurfde vorm of een of twee letters werkt. Een gedetailleerd logo wordt bij 16 × 16 pixels een vlek.
- Gebruik sterk contrast. Tabbladen kunnen licht of donker zijn. De generator toont je icoon in een licht en een donker tabblad.
- Kies liefst een vierkante bron. Is je logo breed, kies dan “Hele afbeelding passend”, of zoom in op de hoofdvorm en sleep de afbeelding op zijn plek.
- Gebruik een transparante achtergrond als het icoon in het tabblad moet opgaan. Bij foto’s snijdt de generator bij tot een vierkant en kun je het kader verplaatsen en inzoomen.
- Laat wat ruimte. Met de instellingen voor opvulling en afgeronde hoeken krijgt de vorm lucht.
- Kies kleuren uit je logo. Kleurenpalet uit afbeelding geeft je de exacte HEX-codes. Om te controleren of een combinatie van tekst en achtergrond leesbaar is, zie je Kleurcontrast controleren.
Heeft je logo een achtergrond die je niet wilt, dan kan Achtergrond verwijderen die eerst transparant maken. Zie De achtergrond van een foto verwijderen. Om een vierkant logo afgeronde hoeken of een cirkel te geven, slaat Afbeelding afronden een transparante PNG op.
Stap voor stap
- Open de Favicon-generator.
- Kies de bron: een afbeelding of logo (PNG, SVG, JPG, WebP en meer), een tot drie letters, of een emoji. Je kunt ook het voorbeeldlogo proberen.
- Sleep de afbeelding in het uitsnijkader, of gebruik de pijltjestoetsen, en stel zoom, opvulling, afgeronde hoeken en de achtergrond in.
- Bekijk de voorbeelden: een licht en een donker tabblad, het icoon van 16 px op ware grootte en vergroot, een iPhone-startscherm en een Android-cirkel.
- Vink de gewenste bestanden aan en vul de map in waar je ze gaat uploaden (bijvoorbeeld
/of/assets/icons/). - Download de ZIP, of sla losse bestanden op uit de lijst.
De lijst toont de echte grootte van elk bestand. Imgovo leest elk bestand na het maken weer in en controleert de formaten, de ICO-directory, het manifest en de regels in het HTML-fragment. Ongedaan maken en Opnieuw werken met Ctrl+Z en Ctrl+Shift+Z.
Wat er in de ZIP kan zitten
| Bestand | Formaat | Gebruikt voor |
|---|---|---|
| favicon.ico | 16, 32 en 48 px in één bestand | Browsertabbladen, oudere browsers |
| favicon-16x16.png, favicon-32x32.png, favicon-96x96.png | 16, 32 en 96 px | Browsertabbladen, schermen met hoge dichtheid |
| favicon.svg | vector | Scherp icoon op elk formaat, optionele donkere modus (alleen SVG-logo’s) |
| apple-touch-icon.png | 180 px | Startschermen van iPhone en iPad |
| android-chrome-192x192.png, android-chrome-512x512.png | 192 en 512 px | Android en installeerbare webapps, uploads van het site-icoon |
| maskable-icon-192x192.png, maskable-icon-512x512.png | 192 en 512 px | Android-iconen die in een cirkel of een andere vorm kunnen worden uitgesneden |
| site.webmanifest | – | Beschrijft de iconen voor installeerbare webapps |
| head-snippet.html | – | De regels om in je pagina’s te plakken |
| README.txt | – | Een korte beschrijving van het pakket |
Het Apple-icoon krijgt een effen achtergrond, omdat iPhones en iPads transparante gebieden zwart tonen.
SVG-favicon en donkere modus
Is je logo een SVG, dan kun je favicon.svg toevoegen. Imgovo verwijdert eerst scripts, links en ingebedde webinhoud uit het bestand en vertelt je hoeveel onderdelen eruit zijn gehaald. Voor een logo in één kleur kun je een lichte en een donkere kleur toevoegen: het bestand volgt dan het thema van de browser. Browsers die geen SVG-favicons ondersteunen, gebruiken favicon.ico. Om een SVG eerst te verkleinen of de kleuren aan te passen, gebruik je de SVG-optimalisatie.
Maskable-iconen
Android kan een app-icoon uitsnijden tot een cirkel of een afgeronde vierkant. Een maskable icoon houdt het logo binnen een veilige zone en vult de rest met een achtergrondkleur. Zet in de voorbeelden “De veilige zone van het maskable icoon tonen” aan om de cirkel te zien.
Voeg de bestanden toe aan je site
- Upload de iconbestanden naar de map die je in de generator hebt ingevuld.
- Kopieer de HTML uit het vak “HTML kopiëren” van de generator, of uit
head-snippet.html. - Plak die in de
<head>van elke pagina, of in de gedeelde lay-out of sjabloon van je site.
Een typische set regels ziet er zo uit. Gebruik het exacte fragment dat de generator je geeft, omdat het bij jouw bestanden en jouw map past:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">De iconpaden in site.webmanifest zijn relatief ten opzichte van het manifestbestand, dus houd het manifest in dezelfde map als de iconen.
Zoek in een websitebouwer de instelling “Site-icoon” of “Favicon” en upload de PNG van 512 px. De bouwer maakt de andere formaten dan zelf.
Als het nieuwe icoon niet verschijnt
Browsers cachen favicons fors. Nadat je nieuwe bestanden hebt geüpload:
- Laad de pagina opnieuw met een harde vernieuwing.
- Open de site in een privévenster of in een andere browser.
- Controleer of
/favicon.icodirect in de adresbalk opent. - Wacht even. Zoekmachines hebben soms tijd nodig om een nieuw icoon te tonen.
Alleen een ICO maken
Heb je alleen een .ico-bestand nodig, gebruik dan Afbeelding naar ICO: je kiest de formaten en het afgeronde bestand wordt teruggelezen als controle. Om in een bestaand icoon te kijken, open je het in de ICO-viewer. Voor andere formaten kan Afbeelding verkleinen een gewone PNG op de exacte afmetingen maken. Vragen over formaten behandelt JPG vs PNG vs WebP vs AVIF. Een stapsgewijze uitleg over ICO-formaten en het inspecteren van een iconbestand vind je in PNG of JPG omzetten naar ICO.
Privacy
Je logo verlaat je computer nooit. De iconen worden in je browser gemaakt en de ZIP wordt daar ook samengesteld.
Probeer het nu
Open de Favicon-generator, voeg je logo toe en download de complete iconenset.
Veelgestelde vragen
Wat is een favicon?
Een favicon is het kleine icoon dat een website vertegenwoordigt in browsertabbladen, bladwijzers en geschiedenis. Verwante iconen worden gebruikt wanneer een site als snelkoppeling naar het startscherm van een telefoon wordt toegevoegd, net als app's.
Met welke afbeelding moet ik beginnen?
Een vierkante afbeelding met een transparante achtergrond werkt het best. Eenvoudige, gedurfde logo’s en lettermerken houden beter stand dan gedetailleerde afbeeldingen, omdat fijn detail bij 16 × 16 pixels verdwijnt.
Waarom heeft het Apple-icoon een achtergrond?
iPhones en iPads tonen transparante gebieden als zwart, dus de generator vult ze met een effen achtergrond: de kleur van je icoon, wit, zwart of een kleur die je zelf kiest.
Kan ik alleen favicon.ico maken?
Ja. Gebruik de knop 'Alleen favicon.ico downloaden', of de tool Afbeelding naar ICO als je de formaten in het bestand zelf wilt kiezen.
Wordt mijn logo geüpload?
Nee. De iconen worden in je browser gemaakt en de ZIP wordt daar ook samengesteld.