Favicon-generator

Maak een favicon van elke afbeelding

Een favicon is het kleine pictogram dat te zien is in browsertabbladen, bladwijzers en op het startscherm van telefoons. Deze generator neemt één vierkante afbeelding en maakt scherpe PNG-pictogrammen in alle formaten die moderne sites nodig hebben — van het 16×16-tabpictogram tot het 512×512-pictogram voor progressive web apps — volledig in je browser.

Zet een logo neer en je ziet een live voorvertoning van elk formaat, klaar om apart te downloaden. We genereren ook de exacte <link>-tags om in de <head> van je pagina te plakken, dus je favicon koppelen kost slechts seconden.

Tips voor scherpe pictogrammen

Begin met een vierkante afbeelding van minstens 512×512 pixels. Gedurfde, eenvoudige vormen met sterk contrast blijven herkenbaar als ze worden verkleind tot 16 pixels, terwijl fijne details en kleine tekst in een vlek veranderen. Test de 16×16-voorvertoning — als je nog kunt zien wat het is, heb je een geweldige favicon.

Welk formaat waar wordt gebruikt

• 16×16 en 32×32 — browsertabbladen, bladwijzers en adresbalken.
• 48×48 en 64×64 — bureaubladsnelkoppelingen en sommige pictogrammen in zoekresultaten en sitelijsten.
• 128×128 — grotere store- en extensievermeldingen.
• 180×180 — het Apple touch icon dat wordt gebruikt wanneer een pagina aan het beginscherm van een iPhone of iPad wordt toegevoegd.
• 192×192 en 512×512 — Android-beginscherm- en progressive-web-app-pictogrammen die in een web-app-manifest staan.

Goed om te weten

Elke afbeelding wordt rechtstreeks naar een vierkant geschaald, dus gebruik een vierkante bron; een rechthoekig logo zou worden uitgerekt. Transparantie blijft behouden in de PNG-bestanden, maar iOS toont transparante touch-pictogrammen niet goed, dus een effen achtergrond is een veiligere keuze voor de 180×180-versie. De bestanden heten bijvoorbeeld favicon-32x32.png, wat overeenkomt met de gegenereerde snippet, dus behoud die namen wanneer je ze naar de hoofdmap van je site kopieert. Deze pagina maakt alleen PNG-bestanden; als je ook een klassiek favicon.ico wilt, maak er dan een van je bronafbeelding met de PNG-naar-ICO-converter.

De pictogrammen aan je site toevoegen

Download de formaten die je nodig hebt, zet ze in de publieke hoofdmap van je site en plak de gegenereerde <link>-tags in de <head>. Als je een web-app-manifest bouwt, laat dan de pictogramlijst verwijzen naar de bestanden van 192×192 en 512×512. Na het uitrollen kunnen zoekmachines en browsers een tijdje doen over het vernieuwen van een gecachete favicon, dus test in een privévenster en schrik niet als het oude pictogram een dag of twee blijft hangen.