Zoek een faviconmaker en de meeste geven je een zip met een ICO-bestand, negen PNG’s, een manifest en een browserconfiguratie voor een Microsoft-tegel die al jaren niet meer bestaat. Bijna niets daarvan is nodig.
Het ICO-formaat bestaat omdat Internet Explorer erom vroeg. Elke huidige browser neemt een PNG, en de meeste hebben liever een SVG.
Wat je echt nodig hebt
| Bestand | Waarvoor |
|---|---|
favicon.svg |
het icoon in het tabblad, scherp op elke maat, kan meegaan met donkere modus |
favicon-32x32.png |
terugval voor wat geen SVG neemt |
apple-touch-icon.png van 180 px |
beginscherm van iOS |
PNG’s van 192 en 512 |
installatievraag en opstartscherm op Android |
Vier bestanden en vier regels HTML. Een SVG-favicon is de eerste om toe te voegen, omdat hij op elk scherm scherp blijft en een prefers-color-scheme-regel kan bevatten, zodat een donker logo in donkere modus licht wordt; dat kan geen enkele PNG.
Waarom 16 pixels de echte beperking is
Het icoon in een browsertabblad is 16 pixels breed, of 32 op een scherm met hoge dichtheid dat op 16 wordt getoond. Dat is niet genoeg ruimte voor een logo.
Op die maat is er plek voor één vorm of één letter. Detail krimpt niet, het wordt pap: een woordmerk wordt een grijze veeg, een gedetailleerd embleem een klodder.
Daarom zijn zoveel favicons één beginletter. Geen luiheid: het is het enige dat leesbaar is. Ontwerp eerst voor 16, en werkt het daar, dan werkt het overal.
Waarom een vierkante bron ertoe doet
Een favicon is vierkant. Geef een generator een breed logo en hij moet er balken omheen zetten, die op een weergavefout lijken, of bijsnijden, waarbij de uiteinden wegvallen.
Bijsnijden tot het kader vol is, is de betere standaard omdat balken er kapot uitzien, maar het echte antwoord is een vierkant beeldmerk aanleveren. De meeste merken met een breed woordmerk hebben voor precies deze situatie een compact symbool.
Waarom verschijnt mijn nieuwe favicon niet?
Omdat browsers favicons veel hardnekkiger cachen dan andere bestanden, en een harde verversing vaak negeren.
Het bestand is vrijwel altijd in orde. Wat werkt: de URL van het icoon direct openen en die verversen, de sitegegevens wissen, of een ander browserprofiel. De bestandsnaam veranderen werkt altijd en is tijdens het ontwikkelen de praktische keuze.
Vragen die mensen stellen
Heb ik nog een favicon.ico in de root nodig? Sommige crawlers en feedlezers vragen erom en loggen een 404 als hij ontbreekt. Onschadelijk, hoe dan ook.
Kan één SVG alles dekken? Voor browsers in de praktijk wel. iOS wil voor het beginscherm nog een PNG.
Doet de favicon iets voor SEO? Google toont hem naast het resultaat in mobiel zoeken, dus hij beïnvloedt of iemand klikt. Het is geen rankingfactor.
En de configuratie voor Microsoft-tegels? Afgeschaft. Kan veilig weg.
De faviconmaker, voorlopig in het Engels, maakt de maten die gebruikt worden en geeft je de HTML, en foto verkleinen en afbeelding bijsnijden helpen een vierkante bron klaar te maken.