logo
GeekFormat

Favicon-generator

Favicon-generator op één pagina

Voorbeeld

text · G
--
16×16
--
32×32
--
180
--
192
--
512
Pakket bevat:favicon.ico · 16/32/180/192/512 png · site.webmanifest

HTML-installatiecode

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

Plaats bestanden in de hoofdmap van de site en voeg de code toe aan <head>.

GeekFormat online Favicon-generator helpt je snel een complete website-iconenset te maken die voldoet aan moderne browserstandaarden, zonder Photoshop of ontwerpsoftware te openen.

Toepassingsgevallen

  • Snel een favicon maken voor persoonlijke blogs, bedrijfswebsites of onafhankelijke sites
  • Tijdelijke iconen genereren voor frontend-demo's en prototypes
  • Teksticonen genereren voor interne systemen en beheerderssystemen
  • Emoji gebruiken als favicon voor persoonlijke projecten en opensource-documentatie
  • Compleet iconpakket genereren voor lancering van klantwebsites
  • Eigen favicons maken voor actiepagina's en marketing landingspagina's
  • PWA-iconen en webmanifest-configuratie genereren
  • Favicon toevoegen aan projecten op GitHub Pages, Vercel of Netlify
  • Tijdelijke favicon testen tijdens ontwikkeling en debuggen
  • Persoonlijke favicon voor portfolio's en cv-websites
  • Verschillende favicon-formaten en HTML-verwijzingen leren begrijpen
  • Oude website favicon upgraden naar moderne standaarden

Functies

  • Drie iconbronnen: tekst (1-2 karakters, 8 lettertypen), geüploade afbeelding (PNG/JPG/WebP automatisch gecentreerd bijgesneden), Emoji
  • Drie vormstijlen: rechthoekige vierkant, 22% afgeronde rechthoek, cirkelvormige uitsnede
  • Transparante achtergrond optie: schakel met één klik tussen transparante/gekleurde achtergrond
  • Volledige tekst aanpassing: tekstkleur + achtergrondkleur kiezer, 8 systeemlettertypen
  • 8 systeemlettertypen: schreefloos, schreef, monospaced en display-lettertypen
  • 5 formaten realtime voorbeeld: 16×16, 32×32, 180×180, 192×192, 512×512
  • Complete standaard iconpakket: ZIP met favicon.ico + 5 PNGs + site.webmanifest (7 bestanden)
  • favicon.ico compatibel met oude browsers, inclusief IE
  • apple-touch-icon: 180×180 pictogram voor iOS Safari startscherm
  • PWA-ondersteuning: 192/512 iconen en site.webmanifest configuratie
  • HTML-code met één klik kopiëren voor in de <head>-tag
  • 160ms debounce realtime voorbeeld bij aanpassingen
  • Afbeelding automatisch gecentreerd bijgesneden tot vierkant
  • Pure Canvas lokale verwerking, geen afbeeldingen geüpload naar servers

Hoe te gebruiken

  1. Kies de generatiemodus: Tekst, Afbeelding of Emoji
  2. Pas stijl aan: lettertype, lettergrootte, kleuren, vorm en transparante achtergrond
  3. Bekijk de realtime voorbeeld van 5 formaten, bevestig dat het 16x16 pictogram duidelijk is
  4. Klik Download ZIP-pakket, kopieer de HTML-code en plaats bestanden in websiteroot

Veelgestelde vragen

Welke bestanden zitten er in het ZIP-pakket?

Bevat 7 bestanden: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png en site.webmanifest.

Hoeveel karakters kan ik invoeren in de tekstmodus?

Aanbevolen wordt 1-2 karakters. Favicon is erg klein (16×16 pixels), te veel karakters zijn onleesbaar.

Welke afbeeldingsformaten worden ondersteund?

PNG, JPG/JPEG en WebP. Afbeelding wordt automatisch gecentreerd bijgesneden tot vierkant.

Hoe gebruik ik de HTML-code?

Plaats alle bestanden in de websiterootmap, kopieer de link-tags naar de head-tag van je pagina.

Wat is het verschil tussen cirkel/afgerond/vierkant?

Vierkant is traditioneel; afgeronde rechthoek is modern; cirkel is voor sociale media-stijl.

Waar is transparante achtergrond goed voor?

Achtergrondlaag wordt niet getekend. Geschikt voor donkere modus en gevarieerde tabbladachtergronden.

Kan ik elke Emoji gebruiken?

Ja, maximaal 2 Emoji of kies uit 12 snelle Emoji-keuzes.

Waarom meerdere formaten iconen?

Verschillende apparaten gebruiken verschillende formaten. Meerdere formaten zorgen voor heldere pictogrammen overal.

Kan ik PWA-iconen genereren?

Ja, de ZIP bevat android-chrome-192/512 iconen en site.webmanifest voor PWA-configuratie.

Worden afbeeldingen naar de server geupload?

Nee, alle verwerking gebeurt lokaal in je browser via Canvas API.

Waarom ziet het 16x16 pictogram er wazig uit?

16x16 is erg klein. Gebruik eenvoudige ontwerpen voor het beste resultaat.

Hoe update ik de favicon in de browser?

Gebruik Ctrl+F5/Cmd+Shift+R voor geforceerd vernieuwen of wis de cache.

Heb ik zowel favicon.ico als PNG nodig?

Beide geeft de beste compatibiliteit voor oude en moderne browsers.

Wordt SVG favicon ondersteund?

Momenteel PNG+ICO standaardpakket. SVG kan handmatig worden toegevoegd.

Werkt het op mobiel?

Ja, responsieve lay-out, maar desktop wordt aanbevolen.

Over Favicon website-iconen

Favicon (afkorting van Favorites Icon) is het kleine pictogram in browsertabbladen, bladwijzerbalk en adresbalk. Het is essentieel voor websitemerherkenning.

Moderne websites hebben meerdere pictogramformaten nodig: favicon.ico voor oude browsers, 16/32 PNG voor tabbladen, 180x180 apple-touch-icon voor iOS, 192/512 PNG voor Android/PWA en site.webmanifest.

Tekst-favicon is de snelste manier: een eenvoudige letter of karakter in merkkleur geeft al een professioneel resultaat.

Emoji-favicon is een populaire eenvoudige oplossing voor persoonlijke projecten en prototypes.

Afbeeldingsmodus voor bestaande logo's: automatisch gecentreerd bijgesneden en geëxporteerd in alle benodigde formaten.

Alle verwerking gebeurt lokaal in je browser via Canvas API en JSZip: geen upload naar servers, sneller en privacyvriendelijk.

Drie vormen (vierkant, afgerond, cirkel) passen bij verschillende platformstijlen: Windows (vierkant), iOS (afgerond), Android (cirkel).

Tips: houd het ontwerp eenvoudig voor 16x16 weergave; Emoji-weergave verschilt per besturingssysteem; transparante achtergrond kan anders uitzien in oude browsers.

术语表

Favicon
Websitepictogram in browsertabbladen en bladwijzers, meestal favicon.ico.
favicon.ico
Traditioneel pictogramformaat voor compatibiliteit met oude browsers zoals IE.
apple-touch-icon
180x180 pictogram voor iOS Safari toevoegen aan startscherm.
site.webmanifest
PWA-configuratiebestand met applicatie-informatie en pictogramdefinities.
PWA (Progressieve Web App)
Website die als native app op mobiel startscherm geinstalleerd kan worden.
Canvas API
Browser-native 2D-teken-API voor lokale beeldverwerking.
JSZip
Pure JavaScript bibliotheek voor lokaal maken van ZIP-bestanden.
160ms debounce
Wachttijd na parameterwijziging voor opnieuw genereren, voorkomt overmatige tekenopdrachten.
Gecentreerd bijsnijden
Automatisch het middelste vierkante gebied van een afbeelding nemen.
High-DPI schermen
Hoge-resolutie schermen (Retina) waar grote PNG-formaten nodig zijn voor heldere pictogrammen.
Transparante achtergrond
Geen achtergrondlaag, pictogram versmelt met tabbladachtergrond.
Browsercache
Browsers slaan favicons op; geforceerd vernieuwen of versienummer is nodig na update.

Pictogramformaat gebruik vergelijkingstabel

Doel van elk bestand in het ZIP-pakket:

BestandFormaatGebruik
favicon.icoMulti-size embeddedLegacy compatibility, address bar, IE browsers
favicon-16x16.png16×16Klein pictogram browsertabblad
favicon-32x32.png32×32Taskbar, bookmarks bar, shortcuts
apple-touch-icon.png180×180iPhone/iPad Add to Home Screen
android-chrome-192x192.png192×192Android home screen icon, PWA small icon
android-chrome-512x512.png512×512PWA splash screen, install dialog
site.webmanifestJSON textPWA config file, defines icons and theme color

Vormvergelijkingstabel

Stijlverschillen en toepasselijke scenario's:

VormStijlHet meest geschikt voor
VierkantSharp corners, traditional classicTraditional websites, Windows desktop, admin systems
Rounded22% rounded corners, modern and smoothModern websites, SaaS products, mobile-first style
CirkelPerfect circle, social media aestheticSocial products, personal brands, app icons

Systeemlettertypen referentie

Beschikbare lettertypen en hun kenmerken:

LettertypenaamCategorieVoorbeeld
ArialSans-serifUniversal, modern, neutral—safest choice
VerdanaSans-serifWide letterforms, legible—designed for screens
Trebuchet MSSans-serifHumanist, friendly and rounded
TahomaSans-serifCompact, crisp—commonly used on Windows
GeorgiaSerifClassic and elegant, suited for traditional/reading-focused sites
Times New RomanSerifClassic formal, academic/news traditional style
Courier NewMonospaceProgrammer/technical feel, code aesthetic
ImpactDisplay BoldThick and attention-grabbing, strong display presence

Privacy & Security

Alle pictogramtekening, schaling, ICO-generatie en ZIP-verpakking gebeurt volledig lokaal in je browser via Canvas API en JSZip. Afbeeldingen worden nooit naar servers geupload. Na laden van de pagina is geen netwerkverbinding nodig. Geen registratie vereist, geen tracking cookies. Alle verwerking gebeurt alleen in het browsergeheugen, na sluiten van de pagina worden geen gegevens opgeslagen.

Authoritative References

Troubleshooting

Waarom wordt mijn geuploade afbeelding niet gecentreerd?

Het gereedschap snijdt automatisch het middelste vierkant bij. Gebruik een vierkante afbeelding met het belangrijkste deel in het midden.

Waarom is de achtergrond niet transparant?

Controleer de Transparante achtergrond schakelaar. JPG ondersteunt geen transparantie, gebruik PNG.

Waarom zien Emoji's er anders uit per apparaat?

Emoji-weergave hangt af van het systeemlettertype: Apple, Google en Microsoft hebben eigen Emoji-ontwerpen.

Waarom kan ik geen ZIP downloaden op mobiel?

Sommige mobiele browsers hebben beperkingen. Gebruik een desktopbrowser voor de beste ervaring.