Favicon-generator
Maak alle favicons die je website nodig heeft uit één afbeelding.
Een probleem met deze tool melden
Hoe gebruik je Favicon-generator
Voeg je logo of afbeelding toe
Sleep een PNG, JPG, WebP, GIF of SVG op de pagina. Een vierkante afbeelding met een eenvoudige vorm werkt het best.
Pas het uiterlijk aan
Snijd vierkant bij of maak de hele afbeelding passend, kies een transparante of gekleurde achtergrond, voeg witruimte toe en rond de hoeken af. Het voorbeeld toont elk formaat en een browsertabblad.
Download en voeg de code toe
Download de ZIP, upload de bestanden naar de hoofdmap van je site en plak de HTML-regels in de head van je pagina’s.
Waarom kiezen voor Utils365
De complete set
favicon.ico met 16, 32 en 48 px erin, PNG-favicons, het Apple touch icon, Android-iconen en site.webmanifest, allemaal benoemd zoals browsers verwachten.
Bekijk het voor je downloadt
Controleer hoe het icoon eruitziet op ware grootte en in lichte en donkere browsertabbladen, zodat kleine details niet verloren gaan.
Privacy voorop
Alles gebeurt in je browser, dus je logo wordt nooit naar een server geüpload.
Veelgestelde vragen
Welke favicon-formaten heb ik nodig?
Een favicon.ico (16, 32 en 48 px) dekt browsertabbladen en bladwijzers, een Apple touch icon van 180 px dekt de beginschermen van iPhone en iPad, en PNG’s van 192 en 512 px dekken Android en geïnstalleerde web-apps. Deze tool maakt ze allemaal uit één afbeelding.
ICO, PNG of SVG: welk favicon-formaat moet ik gebruiken?
Gebruik ze alle drie. favicon.ico werkt overal, ook in oude browsers en tools die er automatisch naar zoeken. PNG-favicons geven scherpe resultaten op vaste formaten. Een SVG-favicon blijft op elk formaat scherp; je krijgt er een als je met een SVG begint.
Wat is een apple-touch-icon?
Het icoon dat iPhones en iPads gebruiken als iemand je site aan het beginscherm toevoegt. Het is 180 × 180 px en mag niet transparant zijn, dus het wordt opgeslagen met een effen achtergrond (wit als je transparant koos). iOS rondt de hoeken zelf af.
Waar zet ik de favicon-bestanden neer?
Pak ze uit in de hoofdmap van je website, naast je homepage, zodat favicon.ico op jouwsite.nl/favicon.ico staat. Plak daarna de HTML-regels op deze pagina in de head-sectie van elke pagina, of in je sitetemplate.
Waarom zie ik mijn nieuwe favicon niet?
Browsers bewaren favicons lang. Open het adres van de favicon rechtstreeks, doe een harde vernieuwing of probeer een privévenster om de nieuwe te zien.