Maak van een afbeelding een sitepictogram, in alle formaten.
of klik - bij voorkeur PNG (512×512 ideaal)
Het kleine pictogram dat een website vertegenwoordigt in het browsertabblad, bij bladwijzers, in de geschiedenis, in mobiele zoekresultaten en op het beginscherm van een telefoon als je de site daar vastzet. Zonder favicon toont de browser een algemeen pictogram, waardoor een site onaf lijkt.
Kies een afbeelding, bij voorkeur vierkant en minstens 512 × 512 pixels. Toolo maakt:
| Bestand | Grootte | Functie |
|---|---|---|
| favicon.ico | 16, 32, 48 px | Tabbladen en bladwijzers, alle browsers |
| apple-touch-icon | 180 px | Beginscherm van iPhone en iPad |
| Pictogram 192 | 192 px | Beginscherm van Android, PWA-manifest |
| Pictogram 512 | 512 px | Opstartscherm van webapps |
Zet favicon.ico in de hoofdmap van je site: browsers zoeken hem automatisch op /favicon.ico. Voeg daarna in de <head> van je pagina's de bijbehorende tags toe, bijvoorbeeld:
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="apple-touch-icon" href="/apple-touch-icon.png">Voor een installeerbare webapp neem je de pictogrammen van 192 en 512 op in je bestand manifest.webmanifest.
Browsers bewaren favicons lang in de cache. Laad de pagina geforceerd opnieuw, open de site in een privévenster of voeg een versieparameter toe aan het adres, zoals /favicon.ico?v=2.
favicon-16x16.png tot en met favicon-512x512.png.favicon.ico, favicon-32x32.png, favicon-192x192.png, favicon-512x512.png en favicon-180x180.png, hernoemd naar apple-touch-icon.png.<head> van elke pagina.<link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/manifest.webmanifest">, alleen als je site een manifest heeft, waarin je de PNG's van 192 en 512 voor Android opneemt.In een CMS hoef je geen code aan te raken. In WordPress stel je het site-icoon in via Weergave > Customizer > Site-identiteit, of in het blok Site-logo bij een blokthema: upload de PNG van 512 px en WordPress zet de tags zelf. In Shopify open je Webwinkel > Thema's > Aanpassen en daarna de thema-instellingen, onder Logo of Favicon, afhankelijk van het thema.
Naast de browsercache kan ook een cacheplugin of een CDN het oude bestand blijven tonen: leeg die cache na de wijziging. In de zoekresultaten van Google wordt de favicon pas bijgewerkt als Google je homepage opnieuw crawlt, wat enkele dagen kan duren.
Bij voorkeur wel. Een niet-vierkante afbeelding wordt aangepast en kan daardoor iets vervormen. Snijd haar eerst vierkant bij met Afbeelding bijsnijden.
Nee. De pictogrammen worden in je browser gemaakt; de afbeelding verlaat je apparaat niet.
Ja. De transparantie blijft behouden in het ICO-bestand en in de PNG's.
Voor tabbladen is favicon.ico genoeg. De PNG's van 180, 192 en 512 pixels zorgen voor een betere weergave op het beginscherm van telefoons en in webapps.
Minstens <link rel="icon" href="/favicon.ico" sizes="any"> en <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Voeg de PNG van 32 px en een manifest toe als je ook Android en webapps wilt bedienen.
WordPress vraagt een vierkante afbeelding van minstens 512 × 512 pixels: gebruik het bestand favicon-512x512.png uit het pakket.
Nee, de zip bevat alleen de PNG-afbeeldingen. Heeft je site een manifest nodig, maak dan zelf manifest.webmanifest aan en neem daarin de PNG's van 192 en 512 px op.