Welke favicon-bestanden een website nodig heeft, en de maten per bestand

Een website heeft een kleine set iconbestanden nodig, en de meeste keuzes gaan over de maat. Zet een favicon.ico met afbeeldingen van 16, 32 en 48 pixel in de hoofdmap van de site, voor tabbladen in de browser en voor Windows. Voeg een Apple touch icon van 180 pixel toe voor het startscherm van iPhone en iPad, en PNG-iconen van 192 en 512 pixel die in een web-app-manifest worden vermeld. De Favicon-generator maakt ze allemaal van één logo en schrijft de HTML-regels die je in je pagina's plakt.

De bestanden en hun maten

De ZIP die de generator downloadt bevat alle zeven bestanden. Het bestand favicon.ico is opgebouwd uit drie PNG-afbeeldingen van 16, 32 en 48 pixel, die in één bestand zijn opgeslagen. Elk icoon is hetzelfde logo, alleen kleiner getekend. De generator werkt vanuit een versie van je afbeelding van 512 pixel en maakt elke maat daaruit.

De HTML-regels

De generator schrijft vier regels voor de head van je pagina's:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

De eerste regel wijst naar favicon.ico en geeft de maat op als 48 bij 48. De tweede geeft de PNG van 32 pixel. De derde noemt het Apple touch icon, en de vierde wijst naar het manifest, waarin de iconen van 192 en 512 pixel staan. De PNG van 16 pixel zit wel in de ZIP, maar niet in deze regels. Browsers zoeken ook zelf naar /favicon.ico, dus het bestand wordt nog steeds gevonden als de eerste regel ontbreekt. Houd de paden zoals ze zijn, tenzij je bestanden ergens anders staan.

Waarom kleine maten eenvoudige vormen nodig hebben

Bij 16 bij 16 pixel heeft een icoon in totaal 256 pixels. Een icoon van 48 pixel heeft er 2.304, en de bron van 512 pixel heeft er 262.144. Het meeste detail van een logo is weg tegen de tijd dat het 16 pixel bereikt, dus een dunne lijn of een klein woord wordt een waas. Gebruik een eenvoudig merkteken, of één of twee letters met sterk contrast.

De letteroptie accepteert één of twee tekens en tekent ze groot in het midden van het icoon, en verkleint ze als ze te breed zijn. De vormen zijn Vierkant, Afgerond en Cirkel. De voorbeeldweergave toont de resultaten van 16, 32, 48, 180 en 512 pixel naast elkaar, en tabbladen voor licht en donker, zodat je de kleine maten kunt beoordelen voordat je downloadt. De voorbeelden worden bijgewerkt wanneer je de vorm, de marge of de achtergrond aanpast, zodat je elke instelling eerst kunt proberen.

Marge, achtergrond en het Apple-icoon

De marge heeft drie instellingen: Geen marge, Klein en Groot. Klein laat aan elke kant 10 procent van het icoon leeg, en Groot laat 20 procent leeg. In de afbeeldingsmodus snijdt Geen marge de foto bij tot het vierkante midden, waardoor de uiteinden van een breed logo verloren gaan. De instellingen met marge passen de hele foto juist binnen het vierkant.

De achtergrondkeuzes zijn Transparant, Wit en Aangepast, en Transparant is de standaard. Het Apple touch icon is altijd ondoorzichtig. In de afbeeldingsmodus krijgen de transparante delen de gekozen achtergrond, of wit als de achtergrond Transparant is. In de lettermodus krijgen ze de achtergrondkleur van de letter. Transparante delen in een Apple touch icon kunnen op iPhone en iPad zwart verschijnen, daarom vult de generator ze op. De andere maten behouden de transparantie die je koos. Waarom een transparante PNG zwart wordt legt de oorzaak uit.

Een favicon is vierkant, dus een breed logo heeft eerst een vierkant kader nodig. De vierkante foto maken past de hele foto binnen een kader van 1:1, met een vervaagde, witte, zwarte of eigen rand, zodat er niets wordt afgesneden. Afbeelding formaat wijzigen stelt exacte pixels in. Met Verhoudingen behouden aan en beide zijden ingevuld, past de foto zonder vervorming binnen de kader. Fotoverhoudingen uitgelegd behandelt de gangbare vormen.

Wijzigingen die tijd nodig hebben

Browsers bewaren favicons in een cache. Een gewijzigd bestand op hetzelfde adres kan het oude icoon nog een tijdje tonen, dus een gewone herlaadactie is vaak niet genoeg. Open het adres van het icoon rechtstreeks om te controleren of het nieuwe bestand op de server staat, en herlaad daarna de pagina met de cache omzeild. Als het oude icoon nog steeds verschijnt, geef het nieuwe bestand dan een andere naam en pas de link aan zodat die ernaar verwijst.

Zo doe je het met fixmint

1. Kies Afbeelding en sleep je logo naar het vak, of kies Letter en typ één of twee tekens.
2. Zet Marge op Geen, Klein of Groot, en Achtergrond op Transparant, Wit of Aangepaste kleur.
3. Controleer de iconen van 16, 32 en 48 px op de tabbladen voor licht en donker, en de voorbeelden van 180 en 512 px.
4. Klik op ZIP downloaden voor alle zeven bestanden, of op favicon.ico downloaden voor alleen dat bestand.
5. Klik op HTML kopiëren en plak de regels uit HTML voor je head in de head van elke pagina.

Randgevallen

• Je afbeelding blijft op je apparaat. De generator maakt de iconen in je browser, en er wordt niets geüpload.
• Letters van twee tekens. Twee tekens worden geaccepteerd en kleiner getekend zodat beide passen, wat ze bij 16 pixel moeilijker leesbaar maakt dan één letter.
• Bestandsnamen. Houd de namen aan die de HTML gebruikt, want de links verwijzen ernaar.
• Onleesbare bestanden. Als een afbeelding niet kan worden omgezet in iconen, toont de generator de melding „Kan de iconen niet maken uit deze invoer. Probeer een andere afbeelding.” en wist hij de uitvoer. Probeer een ander bestand, of sla de afbeelding opnieuw op in een gangbaar formaat.