Faviconhandleidingen
Duidelijke antwoorden op vragen bij het maken van een favicon: welke afmetingen, welke formaten en welke code je moet plakken.
Faviconafmetingen: formaten en toepassingen
Wie op ‘faviconafmetingen’ zoekt, vindt nog steeds lijstjes met vijftien bestanden uit 2014. In de praktijk volstaan tegenwoordig zes afmetingen voor browsertabbladen, zoekresultaten, iOS, Android en PWA's. Hier lees je welke dat zijn en waarom.
Lees de handleidingGratis een PNG naar ICO omzetten
.ico blijft het verwachte formaat in de hoofdmap van een site. De meeste online converters vragen je om je afbeelding naar hun server te uploaden. Hier lees je hoe je vanuit een PNG een correct favicon.ico-bestand met meerdere afmetingen maakt, zonder iets te uploaden.
Lees de handleidingapple-touch-icon: afmetingen, formaat en code
Het Apple Touch-pictogram levert expliciet de afbeelding die wordt gebruikt wanneer een bezoeker je site aan het startscherm van een iPhone toevoegt. Het staat los van de favicon in browsertabbladen en de pictogrammen in het webappmanifest.
Lees de handleidingFavicon voor de donkere modus met SVG
Een zwart logo op een transparante achtergrond ziet er perfect uit op een licht tabblad, maar verdwijnt op een donker tabblad. Het ICO-formaat kan zich niet aanpassen, een SVG-favicon wel: die bevat een CSS-regel die kleuren wisselt op basis van het browserthema.
Lees de handleidingEen favicon toevoegen in HTML
Een betrouwbare HTML-favicon berust niet op één wondertag. Je hebt een kleine set bereikbare bestanden en links in de head nodig. Deze aanpak dekt moderne tabbladen, oudere programma's en mobiele snelkoppelingen zonder talloze historische varianten.
Lees de handleidingFavicon wordt niet getoond of bijgewerkt
Als een favicon ontbreekt, ligt dat niet altijd aan het bestand. De browser, een CDN, een service worker en een zoekmachine kunnen elk een andere versie bewaren. Met een systematische diagnose voorkom je dat je meerdere variabelen tegelijk verandert.
Lees de handleidingFavicons in Next.js App Router
De App Router kan pictogramelementen genereren vanuit bestanden met vaste naamconventies of vanuit het metadata-object. Beide werkwijzen zijn geldig, maar zonder duidelijke regel kunnen ze samen tegenstrijdige declaraties opleveren.
Lees de handleidingHandleiding voor SVG-favicons
SVG houdt randen scherp bij elke pixeldichtheid en kan kleuren aan het thema aanpassen. Die flexibiliteit heeft één voorwaarde: het bestand moet zelfstandig, eenvoudig en op een heel klein oppervlak leesbaar blijven.
Lees de handleiding