Utilia
Categorieën ▾
Taal: nl ▾

Favicon-generator

Maak favicon.ico, PNG-iconen, de apple-touch-icon en site.webmanifest van één afbeelding of emoji, met kant-en-klare HTML-tags. ZIP-download, zonder uploaden.

Bron

Passen
site.webmanifest

Zo maak je een favicon

  1. Kies onder Bron voor Afbeelding of Tekst of emoji. - Afbeelding: sleep een PNG, JPG, WebP of SVG erin. Een vierkant logo van minstens 512 × 512 px werkt het best. Kies Hele afbeelding om hem binnen het icoon te laten passen, of Vullen en bijsnijden om het vierkant te vullen. - Tekst of emoji: typ een letter, initialen of een emoji en kies daarna Lettertype, Vet en Tekstkleur.
  2. Stel de Achtergrondkleur in, of vink Transparante achtergrond aan. Kies een Vorm (Vierkant, Afgerond of Cirkel) en een Marge (%) om ruimte rond de inhoud te laten.
  3. Open eventueel site.webmanifest om de Appnaam (webmanifest), Korte naam, Themakleur en de Map-URL van de iconen in te vullen (laat / staan als de bestanden in de hoofdmap van je site komen).
  4. Klik op Favicons genereren. De iconen verschijnen op ware grootte, naast een nagebootst browsertabblad. Daarna werkt elke wijziging ze direct bij.
  5. Klik op ZIP downloaden, zet de bestanden op je site, klik op Tags kopiëren en plak de tags in de <head> van je pagina’s.

Wat zit er in de ZIP

Bestand Grootte Gebruikt door
favicon.ico 16, 32 en 48 px Browsertabbladen, bladwijzers, oude browsers, Windows
favicon-16x16.png 16 × 16 Browsertabbladen
favicon-32x32.png 32 × 32 Tabbladen op schermen met hoge pixeldichtheid, snelkoppelingen op de taakbalk
apple-touch-icon.png 180 × 180 Beginscherm van iPhone en iPad
android-chrome-192x192.png 192 × 192 Beginscherm van Android (webmanifest)
android-chrome-512x512.png 512 × 512 Opstartschermen bij installatie (webmanifest)
site.webmanifest — Naam, kleuren en iconen van een installeerbare site
favicon-tags.html — De HTML-tags, ter referentie

Het ICO-bestand bevat drie PNG-afbeeldingen, een formaat dat Windows (sinds Vista) en alle huidige browsers kunnen lezen. De apple-touch-icon wordt altijd op een effen achtergrond opgeslagen, omdat iOS transparante pixels zwart weergeeft; bij een transparante achtergrond wordt wit gebruikt.

De HTML-tags

De gegenereerde tags zien er zo uit (met jouw map-URL):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Browsers vragen /favicon.ico ook automatisch op in de hoofdmap van je domein. Het loont dus om hem daar te laten staan, ook voor pagina’s zonder de tags.

Ontwerptips

  • Houd het simpel. Op 16 × 16 px verdwijnen details. Eén letter, een krachtig symbool of de eenvoudigste versie van je logo is het best leesbaar.
  • Bekijk het voorbeeld op ware grootte. Het icoon van 16 px in het nagebootste tabblad is wat bezoekers echt zien.
  • Denk aan de donkere modus. Een donker logo op een transparante achtergrond kan in donkere browserthema’s verdwijnen; een gekleurde achtergrond of een kleine marge helpt.
  • Emoji zien er op elk systeem anders uit, omdat elk platform emoji in zijn eigen stijl tekent. De PNG-bestanden houden de look van jouw apparaat.

Veelgestelde vragen

Welke formaten heeft een favicon nodig?

In de praktijk: een favicon.ico met 16, 32 en 48 px, een apple-touch-icon van 180 px en PNG’s van 192 en 512 px voor het webmanifest. Deze tool maakt ze allemaal uit één bron.

Kan ik een SVG-logo gebruiken?

Ja. SVG-bestanden worden op hoge resolutie getekend voordat de iconen worden gemaakt. De SVG wordt als gewone afbeelding weergegeven, dus scripts erin worden nooit uitgevoerd.

Hoe maak ik een emoji-favicon?

Kies Tekst of emoji, typ of plak de emoji, kies een achtergrond of houd hem transparant, en genereer. Het resultaat is een echte PNG en ICO, dus het werkt in elke browser.

Waarom verschijnt mijn nieuwe favicon niet?

Browsers bewaren favicons hardnekkig in de cache. Herlaad met een geleegde cache, open de site in een privévenster, of voeg een versie toe aan de URL, zoals /favicon.ico?v=2.

Wordt mijn afbeelding geüpload?

Nee. De iconen, de ZIP en het manifest worden in je browser gemaakt; er verlaat niets je apparaat.

Vergelijkbare tools