Favicon-generator

Wat een favicon is en waar je het ziet

Een favicon is het kleine vierkante pictogram dat voor je website staat. De naam is een afkorting van “favorite icon”: de eerste browser die er een liet zien, zette het naast je bladwijzers, die daar Favorieten heetten.

Je ziet het in browsertabbladen naast de paginatitel, 16 pixels breed, of 32 op een scherper scherm. Het markeert je website ook in je bladwijzers en geschiedenis. Zet iemand je website op het startscherm van een telefoon, dan wordt het een app-pictogram. En Google toont het in de zoekresultaten naast de naam van je website.

Overal heeft het dezelfde taak: in één oogopslag herkend worden tussen andere pictogrammen.

Waarom één favicon een hele set bestanden wordt

Al die plekken zijn op verschillende momenten ontstaan en vragen elk om een eigen bestand. De favicon-generator hierboven maakt ze allemaal van één afbeelding.

Browsertabbladen, bladwijzers en geschiedenis gebruiken favicon.ico: één bestand met daarin versies van 16, 32 en 48 pixels. Het is het oudste formaat. Als een pagina geen pictogram noemt, zoeken browsers nog altijd naar favicon.ico in de hoofdmap van de website.

Begin je met een SVG, dan krijg je ook favicon.svg. Browsers die SVG-pictogrammen kunnen tonen, gebruiken dat bestand in plaats daarvan. Omdat het uit vormen bestaat in plaats van pixels, blijft het op elk scherm scherp.

iPhones en iPads gebruiken apple-touch-icon.png, 180 bij 180 pixels, als iemand je website aan het startscherm toevoegt. Een iPhone vult transparante delen op met zwart, dus dit pictogram krijgt altijd een vaste achtergrond: je eigen kleur, of wit als je voor transparant hebt gekozen.

Android-telefoons en websites die je vanuit de browser als app installeert, gebruiken icon-192.png en icon-512.png. Die vinden ze via site.webmanifest: een klein tekstbestand dat browsers vertelt waar de grotere pictogrammen staan en hoe je website heet (als je in de tool een naam hebt ingevuld).

De losse PNG’s van 16 tot 48 pixels zijn reserve voor diensten die om een PNG vragen. Voor de zoekresultaten leest Google de pictogramlinks in de HTML van je startpagina.

Zo zet je de faviconbestanden op je website

Pas je de bestanden van je website zelf aan, of doet iemand anders dat voor je, dan zijn het twee stappen.

Pak eerst de download uit en zet de bestanden in de hoofdmap van je website: de bovenste map, waar ook de startpagina staat. Controleer het door /favicon.ico achter het adres van je website te zetten: het pictogram hoort dan te openen.

Plak daarna de HTML-regels uit de README (de tool toont ze ook) in de head van je pagina’s: het stuk bovenaan de HTML waarin de titel van de pagina staat. Er is een regel voor het ICO-bestand, voor het Apple touch-pictogram en voor het manifest, plus een voor de SVG als je die hebt.

Meestal delen alle pagina’s één paginasjabloon, dus plak je ze maar één keer. Verwijder eerst oude pictogramregels, anders blijven browsers misschien het oude pictogram kiezen.

Gebruik je een websitebouwer, dan kun je beide stappen overslaan: upload icon-512.png bij de instelling voor het sitepictogram, en de websitebouwer voegt de HTML voor je toe.

Zo werkt je logo ook op 16 pixels

Op 16 bij 16 pixels bestaat je hele pictogram uit 256 piepkleine gekleurde vierkantjes. De meeste logo’s zijn daar niet voor getekend.

Begin met het symbool, niet met de naam: prop je een naam van acht letters in 16 pixels, dan krijgt elke letter twee pixels breedte. Geen symbool? Neem dan de eerste letter, groot en vet. Dikke letters blijven bij verkleinen veel langer leesbaar dan dunne.

Haal daarna details weg. Heel dunne lijnen en kleine openingen lopen over in hun omgeving, en een slogan wordt een vlek.

Het gaat om licht tegen donker, niet om de kleuren zelf. Afhankelijk van het thema zijn tabbladen licht of donker, en een marineblauw pictogram verdwijnt op een donkere tabbalk. Is je logo donker, geef het dan in de tool een lichte achtergrond, of andersom.

De marge, de ruimte tussen je logo en de rand van het vierkant, is een afweging. Te veel marge, en je logo krimpt in het tabblad. Te weinig, en een iPhone, die pictogrammen op het startscherm afrondt, snijdt de hoeken van je logo af.

Bekijk tot slot de lichte en donkere tabbladen hierboven op ware grootte, zonder in te zoomen. Onze gratis logochecker gaat nog verder: die verkleint je logo tot 32 pixels en meet hoeveel detail er overblijft.

Wanneer je je logo beter opnieuw tekent dan verkleint

Soms valt er niets te redden. Bij een gedetailleerde illustratie of een 3D-look die op schaduwen draait, zijn de details het ontwerp, en op 16 pixels zijn ze weg. Deze tool kan je logo schalen, maar niet opnieuw tekenen.

Dat maakt het geen slecht logo, alleen een logo voor grotere plekken. Teken bewust een kleine versie: een vereenvoudigd symbool, of je initiaal in het lettertype van je merk. Houd je kleuren en iets van de vorm, dan leggen mensen vanzelf het verband. Wij kiezen elke keer liever een duidelijke initiaal dan een wazige miniatuur.

Een nieuw logo nodig? Onze AI-logogenerator ontwerpt er een op basis van je merknaam, met een korte omschrijving als je wilt. Bij logo’s uit onze logosjablonen krijg je het symbool als los bestand als ze er een hebben, en bij elk logo dat je bij ons koopt, horen de faviconbestanden.