So erstellen Sie ein Favicon
Ein modernes Favicon ist weit mehr als ein 16×16-Bild. Hier finden Sie den kompletten Workflow für ein Setup, das in jedem Browser, Betriebssystem und Gerät scharf aussieht.
Favicons auf jeder Website prüfen
Installieren Sie die FetchFavicon Chrome-Erweiterung, um Favicons sofort zu extrahieren, vorzuschauen und zu validieren.
Was ist ein Favicon?
Ein Favicon ist das kleine Icon, das der Browser im Tab, in der Lesezeichenleiste und in der Chronik anzeigt. Auf Mobilgeräten dient es als Homescreen-Icon, unter Windows als Verknüpfungssymbol.
Moderne Websites liefern mehrere Auflösungen und Formate aus, damit jede Oberfläche eine scharfe Darstellung erhält.
Quellbild vorbereiten
Starten Sie mit einem quadratischen Bild ab 512×512 px – idealerweise ein SVG mit quadratischer viewBox. Alles Kleinere wird beim Herunterskalieren unscharf.
Vermeiden Sie dünne Linien und kleinen Text – sie verschwinden bei 16×16.
Mehrgrößen-.ico erzeugen
Bündeln Sie 16, 32, 48, 64, 128 und 256 in einer einzigen favicon.ico. Browser wählen automatisch die passende Größe.
Unser Favicon-Generator erledigt das clientseitig in unter einer Sekunde.
HTML-Tags einfügen
Legen Sie favicon.ico im Site-Root ab. Ergänzen Sie dann SVG, apple-touch-icon und Manifest-Icons im <head> für ein vollständiges Setup.
In jedem Browser prüfen
Hard-Reload (Strg+F5) in Chrome, Safari, Firefox und Edge durchführen. Lesezeichenleiste, Tab und eine Homescreen-Installation kontrollieren.
FAQ
What is a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes and formats for crisp rendering everywhere.
What size should my favicon source image be?
Start from a square image at least 512×512 pixels. SVG with a square viewBox works best for sharp downscaling.
Do I need both favicon.ico and PNG files?
Yes — ship a multi-size favicon.ico for universal fallback plus PNGs (180×180 and 192/512) for Apple, Android, and PWAs.
Where do I put favicon files on my website?
Place favicon.ico in your site root and add <link rel="icon"> tags in <head> for SVG and PNG variants.