Zo gebruik je deze tool
- Kies Letters en typ een of twee tekens met je eigen kleuren, of kies Afbeelding en selecteer een logo (bij voorkeur vierkant en minstens 512 px).
- Controleer het voorbeeld van elk formaat, vooral dat van 16 en 32 px, die in browsertabbladen worden weergegeven.
- Download de ZIP en upload de bestanden naar de hoofdmap van je website.
- Plak de HTML-tags in de head-sectie van je pagina’s en pas zo nodig de naam in site.webmanifest aan.
Hoe het werkt
Browsers en apparaten zoeken pictogrammen op verschillende plekken. De set die je hier maakt, dekt de meest voorkomende gevallen: favicon.ico met afbeeldingen van 16, 32 en 48 px voor browsertabbladen, bladwijzers en oudere software die automatisch /favicon.ico opvraagt; PNG-bestanden van 16 en 32 px waarnaar wordt verwezen met link-tags; een apple-touch-icon van 180 × 180 voor wanneer iemand je site toevoegt aan het beginscherm van een iPhone of iPad; en pictogrammen van 192 en 512 px waarnaar wordt verwezen vanuit site.webmanifest voor Android-beginschermen en installeerbare webapps.
Het bestand favicon.ico bevat de pictogrammen als PNG-afbeeldingen in een ICO-container. Deze kan door alle huidige browsers en Windows Vista of hoger worden gelezen. De ICO- en ZIP-bestanden worden samengesteld met code op deze pagina; er wordt niets naar een server verstuurd.
Voor kleine formaten is een eenvoudig ontwerp nodig: bij 16 × 16 pixels verdwijnen dunne lijnen en kleine tekst. Een opvallende letter of een vereenvoudigd logo werkt daarom beter dan een volledig logo met tekst. De afbeelding wordt in meerdere stappen verkleind met hoge kwaliteit. Het apple-touch-icon krijgt altijd een effen achtergrondkleur, omdat iOS transparante delen zwart maakt. iOS rondt de hoeken zelf af.
Na het uploaden van nieuwe pictogrammen kunnen browsers de oude favicon nog een tijdje tonen, omdat ze deze agressief in de cache opslaan. Een harde refresh of het rechtstreeks openen van /favicon.ico helpt meestal.
Voorbeelden
Letterpictogram voor een nieuw project
Typ ‘TG’ in witte letters op een donkergroen afgerond vierkant voor een strak pictogram dat in een browsertabblad leesbaar blijft op 16 × 16 px, zonder dat je een logo hoeft te laten ontwerpen.
Pictogram van een bestaand logo
Een PNG-logo van 1024 × 1024 met een transparante achtergrond levert, met de optie Hele afbeelding passend maken, transparante tabbladpictogrammen op en een apple-touch-icon in je merkkleur.
Breed logo
Bij een woordmerk van 1200 × 300 blijven met de optie Midden uitsnijden alleen de middelste letters over. Met de optie Hele afbeelding passend maken blijft alles zichtbaar, maar wordt het pictogram erg klein. Een apart vierkant beeldmerk ziet er meestal beter uit.
Veelgestelde vragen
Heb ik favicon.ico nog steeds nodig?
Ja, dat is nog steeds nuttig. Sommige browsers, feedlezers en tools vragen /favicon.ico op in de hoofdmap van de site, ook zonder link-tag. Moderne browsers gebruiken ook de PNG-pictogrammen waarnaar in de HTML wordt verwezen.
Waar moet ik de bestanden plaatsen?
Upload ze naar de hoofdmap van je website, naast je startpagina. Zo werken /favicon.ico en de andere paden in de HTML. Gebruik je een submap, pas dan de paden in de link-tags en in site.webmanifest aan.
Waarom wordt mijn oude favicon nog steeds weergegeven?
Browsers slaan favicons afzonderlijk en langdurig op in de cache. Probeer een harde refresh, open /favicon.ico in een nieuw tabblad of controleer het in een privévenster. Als je de bestanden een andere naam geeft, bijvoorbeeld favicon-v2.ico, worden ze ook opnieuw geladen.
Maakt deze tool een SVG-favicon?
Nee. De tool maakt PNG- en ICO-bestanden, die overal werken. Heb je al een SVG-logo, dan kun je dat zelf toevoegen met een link-tag met het type image/svg+xml, naast deze bestanden.
Privacy
De pictogrammen, het ICO-bestand en de ZIP worden in je browser gemaakt. Je afbeelding en tekst worden niet geüpload, opgeslagen of opgenomen in analytics.