Een favicon maken en toevoegen aan je website

Kies de route voor je website: in WordPress upload je een vierkante afbeelding via de instelling voor het site-icoon; andere editors hebben meestal een eigen veld voor een site-icoon. Bewerk je zelf HTML, maak de icoonbestanden en volg de HTML-instructies. Sla ZIP en manifest over als je editor de iconen maakt.

Wat is een favicon en waar zie je het?

Een favicon is het kleine icoon waarmee bezoekers je website herkennen in een browsertabblad of bladwijzer. Een grotere versie kan worden gebruikt wanneer iemand de website op het beginscherm van een telefoon opslaat. Daardoor zijn soms meerdere afmetingen van hetzelfde ontwerp nodig.

Stel je een lezer voor met twaalf open tabbladen. Je volledige bedrijfsnaam past misschien niet meer naast de paginatitel, maar een duidelijk symbool blijft herkenbaar. Daar ontwerp je voor: herkenning op een heel klein oppervlak.

Een favicon is iets anders dan het logo bovenaan je website of de grote voorbeeldafbeelding bij een gedeelde link. Als je er één verandert, worden de andere niet automatisch bijgewerkt. Een breed logo kan mooi zijn op de pagina en toch onleesbaar worden in een klein vierkant.

Kies eerst hoe je het favicon gaat installeren. Dan kun je precies de benodigde bestanden voorbereiden, zonder alles uit het pakket als verplicht te beschouwen.

Heeft je websitebouwer een eigen instelling voor het site-icoon, gebruik die dan eerst. De HTML-instructies zijn bedoeld voor websites waarbij je de gedeelde head van de pagina’s kunt aanpassen. De tags in een zichtbaar inhoudsblok plakken is niet dezelfde installatie.

Kies een ontwerp dat op 16 pixels werkt

Gebruik het herkenbaarste merkelement: een sterke beginletter, eenvoudig symbool of mascottesilhouet. Een volledige naam met slogan past zelden. Verwijder details die alleen groot zichtbaar zijn.

Denk aan een bakkerijlogo met brood, aren en “Bakkerij aan de Rivier”. Het favicon kan de broodvorm en één kenmerkende snede behouden. Alles samen wordt een hoop kleine vlekjes.

Bekijk de echte grootte. Een groot 512-pixelbeeld toont niet of een smalle opening op 16 pixels overblijft. Herken je de vorm zonder zoom binnen een of twee seconden?

• Eén hoofdidee. Laat geen verschillende onderwerpen om ruimte concurreren.
• Duidelijke randen. Dunne lijnen en kleine uitsparingen kunnen verdwijnen.
• Voldoende contrast. Een licht transparant symbool kan wegvallen op een lichte interface.
• Weinig tekst. Eén dikke letter werkt eerder dan de volledige bedrijfsnaam.
• Controleer het silhouet. Vereenvoudig als herkenning van kleine details afhangt.

Een aparte kleine versie is prima. Het hoeft geen miniatuur van het hele logo te zijn. Teken nauwkeurige 16-pixelvormen apart: de generator verkleint, maar kiest niet welke merkdetails vervallen.

Bereid de bron voor zonder details te verliezen

Exporteer waar mogelijk rechtstreeks vanuit het originele ontwerp. Een vierkante PNG van minstens 512 × 512 pixels is een handig uitgangspunt, omdat het grootste gegenereerde icoon 512 pixels is. Dat betekent niet dat een browsertabblad het icoon zo groot toont.

Exporteer een vectorlogo als vierkante PNG. Pixilo accepteert JPG, PNG en WebP, geen SVG. Bewaar het vectorbestand voor latere aanpassingen.

Een wazig icoon van 32 naar 512 pixels vergroten brengt geen details terug. Gebruik een beter origineel of teken het symbool opnieuw met minder details. De generator waarschuwt wanneer een van de zijden kleiner is dan 512 pixels, omdat de grotere uitvoerbestanden dan vergroot moeten worden.

Kies eerst een goede vierkante compositie en denk daarna pas aan de bestandsgrootte. Inpassen behoudt de verhoudingen van een rechthoek, maar kan veel lege ruimte opleveren. Vierkant uitsnijden verwijdert de buitenste delen. Geen van beide maakt een breed tekstlogo automatisch geschikt als favicon.

Staat het onderwerp aan de zijkant, gebruik vooraf de afbeeldingsbijsnijder. De favicon-generator snijdt vanuit het midden en schuift niet naar een gezicht of symbool aan de rand.

Probeer PNG voor transparantie en scherpe grafische randen. Controleer JPG op wazigheid en vlekjes. Een nieuw formaat herstelt verloren details niet. Onze JPG-versus-PNG-gids helpt kiezen.

Faviconformaten en afmetingen: welke bestanden heb je nodig?

Niet elk apparaat vereist een aparte upload. HTML kan enkele gelinkte iconen gebruiken; een CMS maakt soms varianten uit één bron.

Een ICO-bestand kan meerdere afbeeldingen bevatten. Pixilo maakt een echte ICO met versies van 16, 32 en 48 pixels. Alleen de naam van een PNG veranderen in .ico levert die structuur niet op. Een PNG bevat één afbeelding en is eenvoudig afzonderlijk te bekijken.

Het Apple-icoon van 180 pixels heeft een ander doel. Apples webappdocumentatie beschrijft de apple-touch-icon-link voor het beginscherm. Een klein browsericoon is hiervoor geen goede bron.

ZIP bevat negen bestanden. PNG's van 32 en 48 dienen voor velden die die maten vragen; je hoeft ze niet allemaal naast ICO en 96-pixel-PNG te linken. De instructies zijn voor jou, niet nodig voor bezoekers.

Kies transparantie en ruimte bewust

Bij een transparant icoon bepaalt de interface de zichtbare achtergrond. Test een donker symbool op een donkere achtergrond en een licht symbool op een lichte. Is het slecht herkenbaar, gebruik dan een contrasterende omlijning of een effen achtergrond.

In Pixilo geldt de transparantie-instelling voor de ICO en de PNG-bestanden van 32, 48 en 96 pixels. Het Apple-icoon en de versies van 192 en 512 pixels gebruiken altijd de gekozen effen achtergrond. Die kleur blijft dus van belang als de browsericonen transparant zijn.

Transparantie verwijdert geen bestaande achtergrond. Witte pixels blijven wit. Gebruik een werkelijk transparante bron voor transparante ruimte.

De ingestelde ruimte geldt aan elke zijde. Met 10% blijft 80% van de breedte over voor een vierkante afbeelding; met 20% nog 60%. Op 16 pixels geeft die tweede instelling het symbool ongeveer 10 pixels breedte. Wat ruimte maakt het ontwerp rustiger, maar te veel maakt het moeilijk te zien.

Controleer bestaande marges. Vult het logo de middelste helft van de PNG, dan blijft de buitenruimte ook bij nul extra marge. Snijd onnodige ruimte eerst weg.

Vergelijk standaard met minder en meer ruimte. Bekijk eerst 16 pixels. Het percentage geldt voor het hele beeldvlak, niet alleen de gekleurde vorm.

Een favicon toevoegen in WordPress

Gebruik de ingebouwde instelling voor het site-icoon. De WordPress-handleiding adviseert een vierkante PNG van minstens 512 × 512 pixels. Vanaf WordPress 6.5 open je Instellingen → Algemeen, kies je de afbeelding en sla je op. In oudere versies kan de instelling onder Weergave → Customizer → Site-identiteit staan.

Een geschikt blokthema kan Weergave → Editor → Identity bieden. Labels hangen af van de interfacetaal. Zie de Site Editor Identity-handleiding.

Voor deze instelling kun je icon-512.png van Pixilo gebruiken. Het heeft een effen achtergrond, dus controleer de kleur voordat je uploadt. Een geschikt origineel vierkant PNG is ook mogelijk als je de transparantie wilt behouden.

1. Selecteer PNG in het site-icoonveld.
2. Sla op en open de openbare homepage en een andere pagina.
3. Controleer het tabblad. Levert een component een oud icoon, volg de probleemoplossing.

WordPress maakt de verwijzingen voor je. Het ZIP-bestand is geen thema of plugin, en de HTML-tags horen niet in de inhoud van een bericht of pagina.

Het site-logo en site-icoon zijn verschillende instellingen. Een nieuw logo bovenaan de pagina verandert niet noodzakelijk het icoon in de browsertab. Kies en bewaar de instelling die het icoon regelt.

Maak een favicon van je logo met Pixilo

1. Kies één afbeelding. Open de favicon-generator en kies een JPG, PNG of WebP van maximaal 25 MB. De afbeelding mag niet groter zijn dan 8000 pixels per zijde en 32 miljoen pixels in totaal.
2. Kies hoe de afbeelding past. Inpassen behoudt de hele afbeelding en de verhoudingen. Vierkant uitsnijden gebruikt het middelste deel. Controleer of alle belangrijke onderdelen zichtbaar blijven.
3. Stel ruimte en achtergrond in. Vergelijk de browsericonen op ware grootte en de Apple-voorvertoning. Kies of de browsericonen een transparante achtergrond moeten hebben.
4. Download wat je nodig hebt. Kies ZIP voor het hele pakket, of download één bestand voor een specifiek uploadveld.
5. Installeer en test. Gebruik website-instellingen of de HTML-uitleg. Controleer de gepubliceerde site, niet alleen de preview.

Pas de opties aan totdat de voorvertoningen goed zijn en download daarna. Een aparte opslagknop is niet nodig: de download gebruikt je laatste keuzes. Een eerder opgeslagen bestand verandert niet mee. Download opnieuw als je het ontwerp daarna aanpast.

Je bronafbeelding en de gemaakte bestanden blijven op je apparaat. Er wordt geen afbeelding naar de server van Pixilo verstuurd. De open pagina bewaart de afbeelding en instellingen, dus download het resultaat voordat je de pagina sluit of vernieuwt.

Met “Andere afbeelding kiezen” verschijnt de bestandskiezer opnieuw. De instellingen blijven behouden. Controleer daarom of de passing, ruimte en achtergrond ook bij de nieuwe afbeelding passen.

Voorbeeld: van breed logo naar bruikbaar icoon

Stel dat een bakkerij een logo van 1200 × 600 heeft met een brood en een lange bedrijfsnaam. Dit is een voorbeeld van de werkwijze, geen gemeten vergelijking van de afbeeldingen in dit artikel.

1. Haal het symbool eruit. Exporteer brood vanuit het origineel als 512 × 512 PNG, niet als kleine schermafbeelding.
2. Verwijder onnodige marges. Behoud broodranden en geef het symbool voldoende ruimte in het vierkant.
3. Vergelijk kleine voorbeelden. Begin met inpassen en standaardruimte. Verdwijnt de snede op 16 pixels, vereenvoudig de bron in plaats van een wazige kopie te vergroten.
4. Test de achtergrond. Verdwijnt de donkere rand, probeer een contrasterende effen browserachtergrond. Controleer ook Apple.
5. Download voor je opzet. HTML met browser en Apple gebruikt ICO, 96-pixel-PNG en Apple. WordPress gebruikt 512-pixel-PNG.

Herkenbaarheid moet vóór installatie kloppen. Werkt alleen de grote preview, verbeter het ontwerp. Een juiste extensie lost overvolle composities niet op.

Een favicon toevoegen aan HTML

Pak het ZIP-bestand uit en zet de gekozen iconen in de map die je website publiceert. Met de onderstaande paden moet de ICO bereikbaar zijn op een adres zoals https://example.com/favicon.ico. Bewaar de bestanden bij de bronbestanden of openbare bestanden die tijdens het bouwen worden gekopieerd. Bestanden die je alleen in de gegenereerde uitvoermap zet, kunnen bij de volgende build verdwijnen.

Zet de eerste twee tags in de <head> van de pagina voor de browsericonen. Voeg de derde toe als je ook een Apple-beginschermicoon wilt. Gebruik de gedeelde head-template als je die hebt, zodat de homepage en andere pagina’s dezelfde verwijzingen gebruiken.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

href geeft de bestandslocatie aan en sizes beschrijft de afmetingen. De browser kan kiezen op basis van formaat, grootte en andere instellingen. Ga er dus niet van uit dat de eerste tag altijd wordt gebruikt. Lees de MDN-documentatie over rel="icon".

In de map /icons/ pas je alle drie aan: /icons/favicon.ico, /icons/favicon-96x96.png en /icons/apple-touch-icon.png. Locatie en verwijzing moeten overeenkomen.

Een pad dat begint met / verwijst naar de hoofdmap van het domein. Staat je website in een submap zoals /portfolio/, gebruik dan de juiste openbare paden voor die installatie. Open iedere URL rechtstreeks nadat je de website hebt gepubliceerd.

Zoek bestaande favicon- en manifesttags. Vervang verouderde verwijzingen. Een oud thema-icoon naast het nieuwe maakt de browserkeuze onduidelijk.

Optioneel: webappmanifest toevoegen of bijwerken

Sla dit over voor alleen browsericonen. Het manifest is apart en niet nodig voor een tabicoon.

Een webappmanifest is een JSON-bestand dat een app beschrijft, inclusief de iconen. Het site.webmanifest van Pixilo bevat alleen icoonverwijzingen. Heb je al een manifest, voeg de nieuwe iconen dan daarin samen zonder de appnaam, start-URL of weergavemodus te vervangen. De manifestgids van web.dev legt die velden uit.

{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

Voor een nieuw icoonmanifest voeg je deze head-link toe. Staat er al een ander manifest, werk dat bij in plaats van een concurrerende link.

<link rel="manifest" href="/site.webmanifest">

Onder /icons/ wordt de link href="/icons/site.webmanifest". Wijzig ook JSON-paden naar /icons/icon-192.png en /icons/icon-512.png: de beginslash verwijst naar de domeinroot, niet de manifestmap.

De gegenereerde iconen gebruiken purpose: "any". Het zijn geen maskable-iconen: die hebben een ontwerp nodig waarvan de belangrijke delen zichtbaar blijven bij uitsnijden tot een cirkel of andere vorm. Alleen een effen achtergrond is niet voldoende. Wijzig dit doel pas nadat je het ontwerp daarvoor hebt voorbereid en getest. Lees de MDN-uitleg over het doel van iconen.

Dit bestand blijft alleen iconen bevatten, geen volledige appconfiguratie. Het maakt de site op zichzelf niet installeerbaar.

Het favicon in Google Zoeken

Een herkenbaar favicon kan bezoekers helpen je website in een zoekresultaat te herkennen. Zie het als een onderdeel van je merk en gebruiksgemak, niet als een garantie voor betere posities of meer klikken.

De faviconrichtlijnen van Google vereisen een vierkante afbeelding van minstens 8 × 8 pixels en adviseren groter dan 48 × 48. De PNG van 96 pixels uit het pakket is een praktische keuze. Link ernaar vanaf de homepage, houd de URL stabiel en geef Googlebot toegang tot de homepage en Googlebot-Image tot het icoon.

Google gebruikt één favicon per hostnaam, zoals example.com; het onderdeel op example.com/blog/ krijgt geen afzonderlijk icoon in de zoekresultaten. Voldoen aan de richtlijnen garandeert geen weergave. Opnieuw crawlen en verwerken kan dagen tot weken duren. Een indexeringsverzoek in Search Console zorgt niet voor een onmiddellijke wijziging.

Werkt het nieuwe icoon in je browser, maar toont Google nog het oude? Controleer eerst de openbare bestanden en de tags op de homepage. Als je het ontwerp tijdens het wachten steeds wijzigt, wordt moeilijker duidelijk welke versie is verwerkt.

Waarom ontbreekt het icoon of blijft het oude?

Maak onderscheid tussen een installatieprobleem en een oude kopie in de cache. Werkt de nieuwe icoon-URL niet, dan helpt vernieuwen van de pagina niet. Toont de URL het juiste beeld maar het tabblad niet, controleer dan de tags en cache.

Open de exacte icoon-URL in een nieuw tabblad. Die moet de afbeelding tonen, geen homepage, inlogscherm of foutpagina. Voor meer detail open je de ontwikkelaarstools, kies je het netwerkpaneel en vernieuw je de pagina. Status 200 is niet voldoende als de reactie HTML bevat in plaats van een afbeelding.

Controleer de daadwerkelijk gepubliceerde head op de homepage en een onderliggende pagina. Een templatewijziging kan ontbreken in de uitvoer, of een ander onderdeel kan nog oude tags toevoegen. Zoek naar de bestandsnamen en paden die je hebt geïnstalleerd.

De browser kan favicons afzonderlijk van de pagina cachen. Sluit het tabblad en open het opnieuw, en probeer een nieuw profiel of een andere browser. Normaal vernieuwen vervangt het icoon niet altijd direct. Deze controles helpen een lokaal cacheprobleem te vinden, maar garanderen geen gelijktijdige update in alle browsers en zoekresultaten.

Gebruikt je site een CDN of service worker, controleer dan of die nog oude versies van de pagina of het icoon levert. Werk de betreffende cache bij via je hosting of app. Verander één ding tegelijk en controleer het resultaat voordat je verdergaat.

Controleer vóór afronding

• Herkenbaar ontwerp op 16 en 32 pixels zonder zoom.
• Randen en kleuren duidelijk op lichte en donkere achtergronden.
• Downloads met definitieve passing, ruimte en achtergrond.
• Elke URL opent het juiste openbare bestand.
• Gezamenlijke head zonder verouderde dubbele verwijzingen.
• Apple en manifest verwijzen naar gepubliceerde bestanden.
• Andere instellingen van het bestaande manifest behouden.
• Homepage en icoon toegankelijk voor Google als zoekweergave gewenst is.

Bewaar origineel en eindpakket samen. Noteer of HTML-template, WordPress of bouwer het icoon instelt. Dat helpt bij een volgende merkverandering.

Veelgestelde vragen

Wat is het beste formaat?

Gebruik een duidelijke vierkante afbeelding die groot genoeg is voor de bestanden die je nodig hebt. Een bron van 512 × 512 dekt het grootste bestand in het pakket, maar is niet vereist voor alleen een klein tabicoon. De maattabel toont de afmetingen en toepassingen.

Heb ik ICO en PNG nodig?

Niet bij iedere website. Het HTML-voorbeeld van Pixilo gebruikt een ICO met meerdere kleine versies en een grotere PNG. Een CMS kan eigen varianten maken uit één bron. Volg de eisen van de instelling die je gebruikt, in plaats van alle beschikbare bestanden te uploaden.

Kan een favicon transparant zijn?

Ja, de browsericonen kunnen transparantie behouden. Controleer of het symbool zichtbaar blijft op verschillende achtergronden. Beginschermiconen gebruiken de gekozen effen kleur, en de transparantie-instelling verwijdert geen achtergrond die al in je bronafbeelding zit.

Waarom is mijn logo wazig?

Het origineel kan wazig zijn of meer details bevatten dan een klein icoon kan tonen. Vergroten lost beide problemen niet op. Gebruik een helder origineel, vereenvoudig de fijne details en bekijk de werkelijke afmetingen voordat je de ruimte aanpast.

Upload ik ZIP direct in WordPress?

Nee. Pak het uit en gebruik een passende vierkante PNG, zoals icon-512.png, bij de instelling voor het site-icoon. Het ZIP-bestand bevat bestanden en instructies, geen WordPress-thema of plugin.

Verbetert een favicon SEO?

Het helpt je site een herkenbare en consistente uitstraling te geven, maar verwacht geen hogere positie door alleen een favicon. Volg voor zoekweergave de Google-richtlijnen en geef de verwerking tijd. Geschiktheid garandeert niet dat het icoon verschijnt.

Samenvatten metChatGPT (opent in een nieuw tabblad)Grok (opent in een nieuw tabblad)Google (opent in een nieuw tabblad)Perplexity (opent in een nieuw tabblad)Claude (opent in een nieuw tabblad)