Favicon-generator
Publiceer niet met het standaardtabbladpictogram. Upload één afbeelding en exporteer de favicon-set die browsers, iOS, Android en PWA's verwachten.
Upload een afbeelding
PNG, JPG en SVG ondersteund. Een bron van 512x512 of groter werkt het beste.
Live-voorbeeld
HTML-fragment
<!-- Add inside <head> --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Best practices voor Favicon
Waarom meerdere maten belangrijk zijn
Browsers, bladwijzers, vastgezette tabbladen, installatieprompts en mobiele snelkoppelingen vragen allemaal om verschillende formaten. Een volledige set houdt het pictogram scherp in plaats van dat platforms een klein bestand kunnen opschalen.
PNG versus ICO
Moderne browsers kunnen goed omgaan met PNG-pictogrammen. ICO blijft nuttig voor oudere compatibiliteit, terwijl PNG doorgaans schonere transparantie en eenvoudiger beheer van assets biedt.
Ontwerp voor kleine maten
Een favicon wordt vaak gezien op 16x16. Eenvoudige vormen, sterk contrast en minder details overleven meestal beter dan een volledig logo dat in een tabblad is geperst.
Platformpictogramgids
Desktopbrowser
Wordt gebruikt voor tabbladen, bladwijzers en browsergeschiedenislijsten.
iOS/iPhone
Wordt gebruikt wanneer de website aan het startscherm wordt toegevoegd. Ondoorzichtige illustraties werken meestal het beste.
Android-Chrome
Wordt gebruikt naast een webmanifest voor installatieprompts, opstartschermen en taakwisselaars.
Snelle installatiegids
Downloaden en uitpakken
Gebruik de downloadknop om een zipbestand te exporteren dat PNG-assets, manifestbestanden en het head-fragment bevat.
Upload naar de public-root
Plaats de uitgepakte bestanden waar ze publiek bereikbaar zijn, zoals de public-map van de website.
Voeg de hoofdmarkering toe
Kopieer het gegenereerde head-fragment naar de head van uw document en wis de browsercache om de nieuwe pictogrammen te verifiëren.
Veelgestelde vragen
Wat zit er in het zip-bestand?
De zip bevat veelgebruikte favicon-PNG's van de browser, Apple Touch-pictogrammen, Android-pictogramgroottes en een website.webmanifest-bestand.
Wat is website.webmanifest?
Het is een JSON-manifest dat browsers vertelt hoe de website zich moet gedragen wanneer deze op een startscherm wordt geïnstalleerd of als een app wordt gestart.
Hoe gebruik ik deze pictogrammen?
Upload de gegenereerde bestanden naar de public-root en plaats de gegenereerde head-markup op de pagina's waarop de favicon zichtbaar moet zijn.
Waarom wordt mijn oude favicon nog steeds weergegeven?
Browsers cachen favicons agressief. Probeer een harde vernieuwing, wis de websitegegevens, wijzig de pictogram-URL of test in een nieuw browserprofiel.
Moet de favicon exact overeenkomen met het app-pictogram?
Het moet verwant voelen, maar het hoeft niet identiek te zijn. Veel merken gebruiken een vereenvoudigd merkteken voor favicon-formaten en een rijker pictogram voor geïnstalleerde app-pictogrammen.