Favicon-generator: gratis online een favicon maken

Een favicon is het kleine pictogram van een website. Het verschijnt in browsertabbladen, bladwijzers en als app-pictogram op het startscherm van smartphones. Om overal scherp te zijn, zijn meerdere formaten nodig: de favicon-generator maakt 16, 32 en 48 px in favicon.ico, 180 px voor iOS en 192 en 512 px voor Android.

De favicon-generator is gratis en je hebt geen account nodig. Je afbeelding wordt niet geüpload: alles wordt met de Canvas-API in je browser gemaakt. Er wordt niets naar een server verzonden of opgeslagen. Een afbeelding mag maximaal 15 MB groot zijn.

Je krijgt favicon.ico met 16, 32 en 48 px in één bestand, apple-touch-icon.png (180 × 180), android-chrome-192x192.png, android-chrome-512x512.png en een site.webmanifest. Je downloadt elk bestand afzonderlijk of alles samen als favicon-package.zip. Je krijgt ook een HTML-fragment van 6 regels voor de <head> van je pagina: het voegt alle bestanden toe en eindigt met de themakleur, bij #18e888 bijvoorbeeld met <meta name="theme-color" content="#18e888">.

Er is niet één juist formaat: het browsertabblad toont 16 × 16 px, de Windows-taakbalk 32 × 32 px en Verkenner en snelkoppelingen 48 × 48 px. iOS gebruikt 180 × 180 px voor het startscherm, Android 192 × 192 en 512 × 512 px. De generator maakt al deze formaten uit één afbeelding. Omdat fijne details en veel tekst bij 16 × 16 px verloren gaan, toont het voorbeeld je 16, 32 en 48 px op ware grootte en de grotere pictogrammen verkleind voordat je de bestanden toevoegt.

Upload de afbeelding op het tabblad ‘Afbeelding uploaden’. Je kunt de uitsnede verslepen, zoomen tussen 50 en 250 % en een transparante rand automatisch laten bijsnijden. De generator bundelt 16, 32 en 48 px in een echte favicon.ico met meerdere formaten en maakt ook de PNG-pictogrammen voor iOS en Android. Begin bij voorkeur met een vierkante afbeelding van minstens 512 × 512 px, want dat is het grootste formaat dat wordt gemaakt.

Ja. Op het tabblad ‘Tekst of emoji’ voer je maximaal 4 tekens in; 1–2 letters of één emoji werken het best. Je kiest de achtergrondkleur, tekstkleur, de vorm Afgerond, Vierkant of Cirkel en een tekstgrootte tussen 25 en 80 %. Zo ontstaan dezelfde bestanden als bij een geüploade afbeelding.

Upload favicon.ico, apple-touch-icon.png, de twee Android-Chrome-pictogrammen en de site.webmanifest naar de hoofdmap van je website, want het HTML-fragment verwijst naar paden zoals /favicon.ico en /site.webmanifest. Kopieer daarna het fragment naar de <head> van je pagina's. Bewerk je de <head> niet zelf, bijvoorbeeld in WordPress, upload daar dan een websitepictogram, zoals android-chrome-512x512.png. De tool maakt geen directe verbinding met je website of CMS.

Deze kleur vult altijd de achtergrond van het Apple-touch-pictogram, omdat iOS transparantie daar niet betrouwbaar verwerkt. Als ‘Transparante achtergrond’ is uitgeschakeld, vult de kleur ook favicon.ico en de Android-pictogrammen. Daarnaast wordt de kleur opgenomen als theme_color en background_color in de site.webmanifest en als theme-color-metatag in het HTML-fragment.