Een favicon maken
Om een favicon te maken voeg je hierboven je logo toe (of typ je een letter of emoji), pas je de look aan en download je de ZIP. De voorbeelden tonen het icoon op elk echt formaat en in een browsertabblad, in lichte en donkere modus.
- Kies de bron. Een PNG- of SVG-logo werkt het best; elke andere afbeelding wordt in een vierkant geplaatst. Geen logo? Gebruik een letter of emoji op een gekleurde achtergrond.
- Stel de look in. Achtergrondkleur of transparant, de vorm (afgerond, vierkant of cirkel) en hoeveel ruimte er rondom de afbeelding komt.
- Download. Download alle iconen geeft je het complete pakket; Alleen favicon.ico geeft je alleen dat ene bestand.
Wat zit er in het favicon-pakket
| Bestand | Formaat | Gebruikt door |
|---|---|---|
favicon.ico | 16, 32 en 48 px | Elke browser, Windows, zoekresultaten |
favicon-16x16.png, favicon-32x32.png | 16 en 32 px | Browsertabbladen en bladwijzers |
apple-touch-icon.png | 180 px | Beginscherm van iPhone en iPad |
android-chrome-192x192.png, -512x512.png | 192 en 512 px | Android-beginscherm, geïnstalleerde web-apps |
site.webmanifest | - | Geeft de iconen en kleuren een naam voor Android en web-apps |
favicon-html.txt | - | De tags om in je pagina's te plakken |
Het Apple-icoon krijgt altijd een effen achtergrond en vierkante hoeken: iPhones ronden de hoeken zelf af en tonen transparante delen als zwart.
De favicon toevoegen aan je website
- Pak het pakket uit en upload de bestanden naar de hoofdmap van je website, naast je
homepage, zodat
yoursite.com/favicon.icohet icoon opent. - Plak de HTML-tags (hierboven te zien en in
favicon-html.txt) in de<head>van je pagina's. - Laad de pagina opnieuw met een geleegde cache. Browsers houden oude favicons vast, dus een privévenster is de snelste controle.
Op WordPress kun je in plaats daarvan het icoon van 512 px instellen als Site-icoon in de Customizer; de andere formaten maakt WordPress dan zelf.
Tips voor een duidelijke favicon
- Houd het simpel. Op 16 pixels wordt een gedetailleerd logo een vlek. Gebruik het symbool uit je logo of de eerste letter, in plaats van het volledige logo met tekst.
- Zorg voor contrast. Tabbladen zijn licht of donker, afhankelijk van het browserthema: bekijk beide voorbeelden.
- Let op de ruimte rondom. Minder ruimte maakt het icoon groter in het tabblad; iets meer ziet er mooier uit op het beginscherm van een telefoon.
Heb je liever één .ico-bestand in een ander formaat? De afbeeldingsconverter slaat elke afbeelding op als ICO.
Veelgestelde vragen
Hoe maak ik een favicon?
Voeg je logo of een andere vierkante afbeelding toe in het vak op deze pagina, of typ een letter of emoji. Pas de achtergrond, de ruimte rondom en de vorm aan en download daarna de ZIP met alle icoonformaten en de HTML die je in je site plakt.
Welke formaten heeft een favicon nodig?
Een favicon.ico met versies van 16, 32 en 48 pixels dekt browsers en Windows; een apple-touch-icon van 180 pixels dekt iPhones en iPads; iconen van 192 en 512 pixels dekken Android en geïnstalleerde web-apps. Het pakket bevat ze allemaal.
Hoe voeg ik de favicon toe aan mijn website?
Upload de bestanden uit de ZIP naar de hoofdmap van je site, zodat favicon.ico opent via jouwsite.nl/favicon.ico. Plak daarna de HTML-tags in het head-gedeelte van je pagina's.
Waarom zie ik mijn nieuwe favicon niet?
Browsers bewaren favicons lang in de cache. Open het favicon-adres direct, laad het opnieuw of probeer een privévenster. Het kan weken duren voordat zoekresultaten bijgewerkt zijn.
Kan ik een favicon maken van tekst of een emoji?
Ja. Kies "Letter of emoji", typ een of twee tekens en kies de kleuren. Zo krijg je snel een nette favicon zonder logo.
Wordt mijn afbeelding geüpload?
Nee. Alle iconen worden in je browser gemaakt en je afbeelding verlaat je apparaat nooit.