Niets wordt geüpload.
Je krijgt favicon.ico, de PNG-formaten, een Apple touch-icoon, Android- en maskable iconen, een webmanifest en de HTML om te plakken, allemaal in één .zip. Maak een complete iconenset voor je website van een letter of een afbeelding. Het is gratis en privé.
Hoe je een favicon maakt
- Kies onder Beginnen met Een brief of Een afbeelding. Druk voor een afbeelding op Een afbeelding kiezen.
- Typ voor een brief je Letters en kies het Gewicht, Lettertype, Tekstkleur, Stijl en Achtergrond.
- Kies de Vorm: Vierkant, Afgerond of Cirkel. Pas de Opvulling aan, of Houd de achtergrond transparant.
- Voeg onder Jouw site de Naam van de site of app, Korte naam en Iconenmap toe.
- Controleer het Voorbeeld, dat het icoon toont in een browsertabblad, in zoekresultaten en op een telefoon.
- Druk op HTML kopiëren voor de code om in je pagina te plakken en op Alles downloaden (.zip) voor de bestanden.
Waar elk bestand voor is
favicon.ico bevat versies van 16, 32 en 48 pixels in één bestand en werkt in elke browser, ook oude. De PNG-favicons geven moderne browsers een scherp tabbladicoon. apple-touch-icon.png wordt gebruikt als iemand je site aan het beginscherm van een iPhone of iPad toevoegt, en de Android-iconen plus site.webmanifest worden gebruikt als je site op Android of als app wordt geïnstalleerd.
Wat is een maskable icoon?
Android snijdt app-iconen bij tot cirkels, squircles of afgeronde vierkanten, afhankelijk van de telefoon. Een maskable icoon vult het hele vierkant met je achtergrondkleur en houdt het logo binnen de middelste 80%, zodat niets belangrijks wordt afgesneden, welke vorm de telefoon ook gebruikt.
Tips voor een duidelijke favicon
Op 16 pixels verdwijnt detail. Een vette letter, een eenvoudig merkteken of het herkenbaarste deel van je logo werkt beter dan het volledige logo met woorden. Sterk contrast tussen het merkteken en de achtergrond helpt het op te vallen tussen andere tabbladen, in zowel lichte als donkere browserthema's.
De iconen aan je site toevoegen
- Pak de bestanden uit en upload ze naar de map die je bij Iconenmap hebt genoemd, meestal de hoofdmap van je site.
- Plak de gekopieerde HTML in het head-gedeelte van elke pagina.
- Herlaad de pagina en wis de cache van je browser als het oude icoon blijft staan. Browsers houden favicons lang vast.
- Begin met een vierkante afbeelding van minstens 512 pixels breed, zodat elk formaat scherp is.
Wie gebruikt het
Eigenaren van kleine bedrijven met een nieuwe website, freelancers die sites voor klanten bouwen, bloggers en studenten die een project online zetten. Probeer de afbeeldingenconverter om je logo eerst te verkleinen of om te zetten.
Vragen
Wordt mijn afbeelding geüpload?
Nee. De iconen worden in je browser gemaakt.
Welke afbeeldingsformaten kan ik gebruiken?
PNG, JPG, SVG en WebP.
Waarom zie ik nog steeds mijn oude favicon?
Browsers bewaren favicons lang in de cache. Wis de cache of open de site in een privévenster om het te controleren.