Favicon Generator

De rol van favicons en site-iconen voor websites

Een favicon is een essentieel onderdeel van de professionele uitstraling en herkenbaarheid van een website. Het icoon verschijnt op browsertabbladen, in bladwijzers, op het beginscherm van mobiele apparaten en binnen Progressive Web Apps (PWA's). Door een consistent en technisch correct icoon aan te bieden, navigeren bezoekers gemakkelijker tussen geopende tabbladen en krijgt de website een betrouwbaar karakter.

Verschillende apparaten en platforms vereisen uiteenlopende icoonformaten en specificaties. Waar traditionele desktopbrowsers voldoende hebben aan een klein bestand, hebben moderne smartphones en tablets hoge-resolutiebeelden nodig om het icoon scherp weer te geven op hun schermen. Deze tool vereenvoudigt dit proces door één enkele bronafbeelding om te zetten in een compleet pakket met alle benodigde formaten.

Ondersteunde formaten en specificaties in het icoonpakket

Het genereren van een favicon vereist tegenwoordig meer dan alleen een enkel .ico-bestand. Verschillende besturingssystemen en browsers vragen om specifieke formaten:

• favicon.ico: Dit klassieke bestand bevat versies van 16, 32 en 48 pixels ineen. Het dient voornamelijk voor compatibiliteit met oudere browsers en systemen.
• PNG-iconen: Het pakket genereert PNG-bestanden met de afmetingen 16, 32, 180, 192 en 512 pixels. Deze worden gebruikt voor moderne browsertabbladen, mobiele apparaten en web-apps.
• site.webmanifest: Dit is een klein tekstbestand dat de grote iconen vermeldt, zodat mobiele apparaten en Android-systemen weten welke bestanden ze moeten laden.
• Vector (SVG): Als de bronafbeelding een SVG-bestand is, wordt de vector zelf opgenomen in het pakket, wat zorgt voor een perfecte scherpte op elk gewenst formaat.

Het volledige pakket wordt direct verpakt in een downloadbaar ZIP-bestand, inclusief de bijbehorende HTML-code om de bestanden correct te koppelen.

Richtlijnen voor de bronafbeelding

De kwaliteit van de gegenereerde iconen hangt sterk samen met de eigenschappen van de geüploade afbeelding. Voor het beste resultaat gelden de volgende richtlijnen:

• Bestandstype: De tool ondersteunt uitsluitend PNG-, JPG- en SVG-afbeeldingen.
• Bestandsgrootte: De maximale bestandsgrootte die de tool kan verwerken is 50 MB.
• Resolutie: Bij het gebruik van PNG of JPG wordt een minimale resolutie van 512 × 512 pixels aanbevolen. Kleinere afbeeldingen moeten worden opgeschaald, wat kan leiden tot een wazig resultaat bij de grotere icoonformaten. Een SVG-bestand is de ideale bron, omdat vectoren oneindig schaalbaar zijn zonder kwaliteitsverlies.

Wanneer een geladen afbeelding afwijkt van de aanbevelingen, toont de interface de exacte afmetingen via de indicator {w} × {h} px. Bij een te kleine afbeelding verschijnt de waarschuwing: "Kleine bron ({w} × {h} px): de grote iconen kunnen er wazig uitzien. 512 × 512 of groter — of een SVG — geeft het beste resultaat.".

Omgaan met niet-vierkante afbeeldingen en achtergronden

Iconen moeten altijd vierkant zijn. Wanneer de aangeleverde bronafbeelding niet-vierkant is, biedt de generator twee methoden om dit op te lossen:

1. Passend maken (opvullen): De hele afbeelding blijft zichtbaar en wordt gecentreerd, waarbij er een opvulling (padding) omheen wordt geplaatst.
2. Vullen (bijsnijden): De afbeelding vult het volledige vierkant, waarbij de uitstekende randen aan de zijkanten of boven- en onderkant worden weggesneden.

Daarnaast is de keuze voor de achtergrond van belang voor de weergave op verschillende apparaten:

• Transparant: Dit is de standaardinstelling en is uitermate geschikt voor browsertabbladen.
• Kleur: De gebruiker kan een specifieke achtergrondkleur selecteren. Dit is met name veiliger voor iPhone-beginschermiconen (Apple touch icons), omdat iOS transparante delen in iconen automatisch zwart inkleurt.

Installatie en implementatie op de website

Na het genereren van het icoonpakket is de implementatie op de website eenvoudig uit te voeren:

1. Download het ZIP-bestand via de knop "Download ZIP".
2. Pak het ZIP-bestand uit en upload alle losse bestanden naar de hoofdmap (root) van de website. Dit zorgt ervoor dat het bestand favicon.ico direct bereikbaar is via het pad /favicon.ico.
3. Kopieer de gegenereerde HTML-code met de knop "Code kopiëren".
4. Plak deze regels in de head (<head>)-sectie van elke HTML-pagina van de website.

Browsers en apparaten zullen vervolgens automatisch het meest geschikte icoonformaat uit de hoofdmap selecteren en inladen.

Lokale verwerking en privacy

Bij het gebruik van deze Favicon Generator blijft de privacy van de bestanden gewaarborgd. De conversie van de afbeelding naar de verschillende icoonformaten vindt direct plaats in de browser van de gebruiker. Er worden geen bestanden geüpload naar de servers van BroBroGo.

Foutmeldingen en probleemoplossing

Mocht er tijdens het proces iets misgaan, dan toont de generator een van de volgende specifieke foutmeldingen om aan te geven wat er gecorrigeerd moet worden:

• Bestandsformaat: "Alleen PNG-, JPG- en SVG-afbeeldingen worden ondersteund."
• Bestandsgrootte: "Dit bestand is groter dan 50 MB. Gebruik een kleinere bronafbeelding."
• Leeg of beschadigd bestand: "Dit bestand kon niet als afbeelding worden geopend. Het is mogelijk beschadigd, leeg of geen geldige afbeelding."
• Ongeldige vector: "Deze SVG kon niet worden gelezen. Controleer of het bestand een geldig SVG-document is."
• Geen selectie: "Kies eerst een PNG, JPG of SVG afbeelding."
• Algemene fout: "Genereren mislukt. Probeer een andere afbeelding."

Veelgestelde vragen

Welke bestanden zitten er in het icoonpakket?

Het pakket bevat een favicon.ico met versies van 16, 32 en 48 pixels erin, PNG-iconen van 16, 32, 180, 192 en 512 pixels, en een site.webmanifest die de grote iconen vermeldt. Als je begint met een SVG, wordt de vector zelf ook meegeleverd. Alles zit samen in één ZIP-bestand.

Welk formaat moet mijn bronafbeelding hebben?

Een SVG is ideaal — elk icoon wordt getekend vanaf de vector, waardoor zelfs 16 pixels scherp blijft. Begin bij PNG of JPG met minimaal 512 × 512 pixels; kleinere afbeeldingen worden opgeschaald en kunnen er wazig uitzien.

Moet de achtergrond transparant zijn of een kleur hebben?

Tabblad-iconen zien er transparant prima uit. Op het beginscherm van een iPhone of iPad worden transparante delen echter zwart weergegeven — als gebruikers je site aan hun beginscherm kunnen toevoegen, is een achtergrondkleur aan te raden.

Wat gebeurt er met een afbeelding die niet vierkant is?

Iconen zijn vierkant, maar je afbeelding wordt nooit vervormd. Standaard wordt deze gecentreerd met een opvulling eromheen; kies voor "Vullen (bijsnijden)" om de uitstekende randen weg te snijden.

Waar moeten de bestanden op mijn website worden geplaatst?

Upload ze naar de hoofdmap (root) van je website, zodat favicon.ico bereikbaar is via /favicon.ico. Plak vervolgens de gegenereerde regels in de head (<head>) van je pagina's. Browsers kiezen zelf automatisch het juiste formaat.