Gratis favicongenerator voor alle platforms

Een favicongenerator bespaart je het vervelende deel van het brandingwerk voor een website: hetzelfde logo in zes formaten exporteren, elk bestand juist benoemen en de tags schrijven die elk platform vertellen waar het ze kan vinden. De favicon is klein, maar reist ver. Hij staat in browsertabbladen, bladwijzers en geschiedenis, op de beginschermen van telefoons en naast je sitenaam in de Google-resultaten, waar Google om een vierkant icoon van minstens 8x8 pixels vraagt en een groter formaat dan 48x48 aanraadt (Google Search Central, favicons in search results).

Hoe gebruik je de favicongenerator?

Sleep een PNG-, JPG- of SVG-bestand in de tool, bij voorkeur van 512x512 pixels of groter. De generator tekent je afbeelding op een canvas in elk formaat met hoogwaardige afvlakking en toont de zes resultaten naast elkaar.

1. Bereid een vierkante bron voor. De tool schaalt je afbeelding naar elk vierkant formaat zonder bij te snijden, dus een rechthoekig logo ziet er uitgerekt uit. Snijd het eerst bij tot een vierkant, met een beetje marge rond het beeldmerk.
2. Sleep het bestand erin of klik om het te selecteren. De voorvertoning verschijnt binnen een seconde.
3. Download het pakket met de knop “Alles downloaden (.zip)”, of elke PNG afzonderlijk.
4. Kopieer de HTML-code in de <head> van elke pagina, meestal in het sjabloon van je site.
5. Kopieer het manifest, vul de velden name en short_name in met je merk en sla het op als site.webmanifest in de hoofdmap van je site.
6. Upload de bestanden naar de hoofdmap van je domein, zodat /favicon-32x32.png en de andere paden in de code werken.

Omdat de verwerking in je browser plaatsvindt, werkt de generator ook met nog niet gepubliceerde logo's en klantbestanden die je niet naar een server van een derde partij mag sturen.

Welke faviconformaten heb je nodig in 2026?

Zes PNG-bestanden dekken browsers, iOS, Android en Windows. De tabel toont wat de generator maakt, waar elk bestand wordt gebruikt en welke tag of welk bestand ernaar verwijst.

Het paar 192 en 512 is niet willekeurig: voor Chromium-browsers moet een webapp-manifest minstens een icoon van 192x192 en een icoon van 512x512 bevatten, en Chrome schaalt ze voor de andere plekken waar het ze nodig heeft (web.dev, add a web app manifest). Het formaat 180x180 komt overeen met het iPhone-icoon met hoge resolutie in de eigen voorbeeldcode van Apple voor web clips (Apple, configuring web applications). De Windows-tegel is een verouderd bestand: het doet geen kwaad, en je kunt de tag weglaten als je geen oude Windows-installaties bedient.

Welke HTML-code geeft de generator je?

Zes regels voor de <head>: twee rel="icon"-links voor de PNG-favicons, het Apple touch-icoon, de manifestlink, de Windows-tegel en een theme-color-metatag. Wanneer een pagina meerdere iconen vermeldt, leest de browser hun attributen type en sizes om het meest geschikte te kiezen, en gaat hij naar het volgende als een bestand faalt (MDN, link types).

Twee instellingen in de gegenereerde code zijn het aanpassen waard. De theme-color en de manifestkleuren staan standaard op wit (#ffffff): vervang ze door je merkkleur als je wilt dat de browserbalk en het opstartscherm van een geïnstalleerde app bij je site passen. En het manifest laat name en short_name met opzet leeg: web.dev legt uit dat minstens een van de twee verplicht is, en dat short_name wordt gebruikt op het beginscherm, waar de ruimte beperkt is.

Helpt een favicon bij SEO?

Niet als rankingfactor, maar hij bepaalt wel hoe je resultaat eruitziet. Google kan je favicon naast je sitenaam bovenaan elk resultaat tonen, dus een duidelijk icoon helpt zoekers je merk te herkennen en kan je doorklikratio verhogen ten opzichte van resultaten met een algemene wereldbol.

Google noemt de voorwaarden om in aanmerking te komen, en een ontbrekende voorwaarde is meestal de reden dat een favicon niet verschijnt:

• Een link-tag op de homepage. Google leest rel="icon", shortcut icon, apple-touch-icon en apple-touch-icon-precomposed.
• Crawltoegang. Googlebot moet de homepage kunnen bereiken en Googlebot-Image het iconbestand. Een regel in robots.txt die je afbeeldingenmap blokkeert, kan je favicon verbergen.
• Een vierkant bestand van minstens 8x8 pixels, bij voorkeur groter dan 48x48, in een ondersteund formaat: BMP, GIF, ICO, PNG, JPEG, PPM of TIFF. De gegenereerde PNG-bestanden voldoen daaraan.
• Eén favicon per hostnaam. Een subdomein kan een eigen icoon hebben; een submap zoals /blog niet.
• Een stabiele URL die je niet vaak wijzigt.

Na een wijziging moet Google de homepage opnieuw crawlen, wat volgens dezelfde documentatie enkele dagen tot enkele weken kan duren. Indexering van de homepage aanvragen in Search Console versnelt dit.

Hoe ontwerp je een favicon die leesbaar blijft op 16 pixels?

Ontwerp eerst voor het kleinste formaat. Op 16x16 heeft het hele icoon 256 pixels, dus een volledig logo met slogan wordt een vage vlek. Deze regels houden het icoon leesbaar:

• Gebruik het beeldmerk, niet het volledige logo. Een symbool of één vette letter overleeft verkleining; een woord niet.
• Vul het vierkant. Laat een dunne marge, maar vermijd grote lege randen die het beeldmerk in het tabblad klein maken.
• Kies voor sterk contrast en twee of drie egale kleuren. Dunne lijnen en verlopen verdwijnen op kleine formaten.
• Controleer lichte en donkere thema's. Een transparante PNG met een donker beeldmerk verdwijnt op een donkere tabbalk; een effen achtergrond of een lichte omlijning lost dat op.
• Denk aan maskers voor Android. Android kan app-iconen bijsnijden tot een cirkel. MDN raadt een maskable icoon aan met het belangrijke deel binnen een veilige zone en een dekkende achtergrond (MDN, define app icons). Als je beeldmerk de randen raakt, exporteer dan een versie met opvulling voor de bestanden van 192 en 512.

Welke faviconfouten komen het vaakst voor?

De meeste kapotte favicons komen door een pad of een cache, niet door de afbeelding zelf.

• Bestanden geüpload naar de verkeerde map. De gegenereerde code verwijst naar de hoofdmap (/favicon-32x32.png). Als je de bestanden in /assets plaatst, pas dan elk pad aan.
• Geen bestand op /favicon.ico. Wanneer een pagina geen icoon opgeeft, staat de HTML-standaard browsers toe standaard /favicon.ico op te vragen (WHATWG HTML standard, link types). Pagina's zonder de tags, zoals pdf's of foutpagina's, veroorzaken dan een 404 in je logs. De generator maakt alleen PNG-bestanden, dus als je die terugval wilt, exporteer je PNG van 32x32 als ICO-bestand met een willekeurige afbeeldingseditor.
• Een oud icoon dat niet verdwijnt. Browsers cachen favicons agressief. Hernoem het bestand of voeg na een redesign een versieparameter toe (?v=2).
• Tags alleen op de homepage. Browsers lezen het icoon pagina voor pagina, dus zet de code in het gedeelde sjabloon.
• Een uitgerekt logo. Snijd de bron bij tot een vierkant voordat je genereert, zoals hierboven beschreven.

Zodra de bestanden online staan, voer je de faviconextractor uit op je domein om te zien welke iconen een crawler echt vindt, en daarna de on-page SEO-audit om de rest van je head-tags te controleren.

Hoe past de favicon bij je merk in AI-antwoorden?

AI-assistenten zoals ChatGPT en Perplexity tonen vaak het icoon van elke site die ze citeren naast de bronlink. Een consistente favicon maakt je merk daar ook herkenbaar, maar het is slechts de lijst: geciteerd worden hangt af van je content en je autoriteit. Om te zien of je site in die antwoorden überhaupt voorkomt, meet AI-vermeldingstracking elke week je merkvermeldingen, prompt voor prompt en model voor model, en het GEO / SEO-dashboard zet ze naast je Google-klikken en -posities.

Een complete favicon-set kost één vierkante afbeelding en twee minuten. Genereer hierboven je iconen, plak de code in je sjabloon en bekijk daarna de abonnementen van Sorank om het verkeer te laten groeien dat ze gaat zien, op autopilot.