Favicon Generator Handleiding

Overzicht

De Favicon Generator is een krachtige tool die alle benodigde favicon-bestanden voor uw website creëert vanuit één enkele afbeelding. Het genereert correct geschaalde iconen voor alle apparaten en browsers, en biedt installatie-instructies om ervoor te zorgen dat uw favicon overal correct wordt weergegeven.

Afbeelding Uploaden

Upload uw afbeelding om favicons te maken voor alle apparaten en browsers.

  1. Maak een vierkante PNG-afbeelding (500x500 px aanbevolen).
  2. Sleep de afbeelding naar de uploadzone of klik om te selecteren.
  3. Controleer of het voorbeeld correct is.
  4. Pas eventueel de achtergrondkleur aan.
  5. Klik op "Genereer Favicon Pakket".
Voorbeeld

Bekijk hoe uw favicon eruitziet op verschillende apparaten voordat u downloadt.

  1. Upload uw afbeelding in het eerste tabblad.
  2. Klik op het tabblad "Voorbeeld".
  3. Bekijk de favicon-weergaven op verschillende apparaten.
  4. Pas indien nodig instellingen aan op het Generator-tabblad.
Installatie

Krijg gedetailleerde instructies voor het toevoegen van de favicon aan uw website.

  1. Genereer uw favicon-pakket.
  2. Download het ZIP-bestand.
  3. Bekijk de stapsgewijze installatie-instructies.
  4. Kopieer de verstrekte HTML-code.
  5. Volg de instructies om bestanden aan uw site toe te voegen.

Vereisten Afbeelding

Volg deze richtlijnen voor het beste resultaat bij het voorbereiden van uw favicon-afbeelding:

  • Formaat: PNG met transparante achtergrond (aanbevolen). JPG, GIF, SVG ook ondersteund.
  • Afmetingen: Vierkante afbeelding, minimaal 70x70 pixels, 500x500 aanbevolen.
  • Ontwerp: Eenvoudig, duidelijk ontwerp dat herkenbaar is op kleine formaten.
  • Bestandsgrootte: Onder 1MB voor optimale verwerking.

Gebruik eenvoudige ontwerpen met sterk contrast. Complexe details gaan verloren op kleinere formaten.

Optie Achtergrondkleur

De achtergrondkleuroptie dient twee hoofddoelen:

  • Vult transparante gebieden in Apple Touch Icons (die geen transparantie ondersteunen).
  • Creëert een achtergrondkleur voor de site.webmanifest (voor PWA/mobiel gebruik).

Kies een achtergrondkleur die past bij uw icoon en website-ontwerp.

Uitleg Uitvoerbestanden

Het gegenereerde ZIP-pakket bevat meerdere bestanden, elk met een specifiek doel:

  • favicon.ico: Multi-size ICO-bestand (16, 32, 48) voor klassieke browserondersteuning.
  • favicon-16x16.png & favicon-32x32.png: Moderne browser tab-iconen.
  • apple-touch-icon.png: 180x180 PNG voor iOS-apparaten.
  • android-chrome-192x192.png & android-chrome-512x512.png: Android/Chrome-iconen.
  • site.webmanifest: JSON-bestand met metadata voor PWA-ondersteuning.
  • INSTRUCTIES.TXT: Stapsgewijze installatiegids.

Installatie Gids

Om de favicon op uw website te installeren:

  1. Pak alle bestanden uit de gedownloade ZIP.
  2. Upload alle bestanden naar de hoofdmap (root directory) van uw website.
  3. Voeg de HTML-code (verstrekt in het Installatie-tabblad) toe aan de sectie van uw website.
  4. Test uw website in verschillende browsers en apparaten.

Leeg uw browsercache als u de nieuwe favicon niet onmiddellijk ziet na installatie.

Probleemoplossing

Als u problemen ondervindt met uw favicon:

  • Favicon niet zichtbaar: Leeg browsercache of probeer een harde verversing (Ctrl+F5 / Cmd+Shift+R).
  • Verkeerde kleuren op Apple-apparaten: Controleer de achtergrondkleurinstelling.
  • Wazige favicon: Zorg ervoor dat uw originele afbeelding van hoge kwaliteit en correct formaat is.
  • Installatiefouten: Controleer of alle code correct in uw HTML is geplaatst en bestanden in de root staan.

Browsercaching is de meest voorkomende reden waarom favicons niet onmiddellijk bijwerken.

Veelgestelde Vragen (FAQ)

Wat is een favicon?

Een favicon is een klein pictogram dat je website vertegenwoordigt in browser-tabbladen, bladwijzers en mobiele apps. Het verhoogt de herkenbaarheid van je merk of website.

Waarom zijn er meerdere formaten nodig?

Browsers, platforms en apparaten gebruiken verschillende favicon-formaten. Deze generator zorgt ervoor dat je website compatibel is met desktop, iOS, Android en PWA's.

Kan ik een SVG als favicon gebruiken?

Hoewel sommige browsers SVG ondersteunen, is het veiliger om PNG en ICO-bestanden te gebruiken voor maximale compatibiliteit. SVG-ondersteuning wordt overwogen voor toekomstige updates.

Waar plaats ik de gegenereerde bestanden?

Upload ze naar de rootmap van je website (waar ook index.html staat) en voeg de gegenereerde HTML-code toe aan de <head> van je pagina.

Genereer Uw Favicon

Upload een vierkante PNG (min. 70x70, aanbevolen 500x500) met transparantie voor het beste resultaat.
Sleep uw afbeelding hierheen of klik om te selecteren
Voorbeeld
#ffffff
#3498db

Voorbeeld Weergave

Dit toont hoe uw favicon eruit zal zien op verschillende platforms. Genereer eerst een pakket.

Upload eerst een afbeelding op het tabblad "Generator" om hier voorbeelden te zien.

Installatie Gids

Genereer eerst uw favicon-pakket op het tabblad "Generator" om hier de downloadknop en installatie-instructies te zien.

Home