So erstellen Sie ein Favicon
Das Erstellen eines Favicons dauert mit dem richtigen Tool nur zwei Minuten. Beginnen Sie mit einem quadratischen Quellbild – mindestens 512 x 512 Pixel –, führen Sie es durch favicon generator und erhalten Sie ein vollständiges Paket: .ico in mehreren Größen, SVG, apple-touch-icon und Manifest-PNGs. Dieser Leitfaden begleitet jeden Schritt von der Quellvorbereitung bis zur Browserüberprüfung. Eine detaillierte Referenz finden Sie auch im full tutorial.
Ein Favicon ist das kleine Symbol, das ein Browser in der Tab-Leiste, der Adressleiste und der Lesezeichenliste anzeigt. Auf Mobilgeräten wird es zum Startbildschirmsymbol, wenn ein Benutzer Ihre Website speichert. Auf Windows erscheint es auf Taskleisten-Pins und Desktop-Verknüpfungen. Das richtige Favicon ist ein kleiner Aufwand mit großer Markenwirkung – jeder Seitenaufruf beginnt damit, dass Ihr Symbol auf der Registerkarte des Benutzers angezeigt wird.
Das moderne Favicon-Setup ist keine einzelne Datei, sondern ein koordinierter Satz. Eine .ico-Datei mit mehreren Größen übernimmt den universellen Browser-Fallback. Ein SVG liefert ein gestochen scharfes, skalierbares Rendering in modernen Browsern, einschließlich Dark-Mode-Unterstützung. Ein 180×180 PNG (apple-touch-icon) wird von iOS für die Installation auf dem Startbildschirm verwendet. Ein 192×192 und ein 512×512 PNG versorgen die Installationsaufforderung Android PWA. Ein gut vorbereitetes Quellbild generiert all dies auf einmal.
Die Vorbereitung des Quellbildes ist der am häufigsten übersehene Schritt. Ihr Logo muss quadratisch sein – ein asymmetrischer Zuschnitt führt immer zu einem gestreckten Ergebnis. Entwerfen Sie eine vereinfachte Version Ihres Markenzeichens, die auch bei kleinen Größen gut lesbar ist: Reduzieren Sie feine Linien, entfernen Sie winzigen Text und erhöhen Sie den Kontrast. Was bei 512×512 elegant aussieht, kann bei 16×16 zu einem unleserlichen Klecks werden, wenn Sie diesen Vereinfachungsdurchgang überspringen.
SVG ist das ideale Quellformat, da es auflösungsunabhängig ist. Eine Vektorgrafik wird ohne Qualitätsverlust auf eine beliebige Pixeldichte gerastert. Wenn Sie nur ein Raster PNG oder JPG haben, stellen Sie vor der Generierung sicher, dass es mindestens 512 x 512 groß ist. Das Herunterskalieren von etwas Kleinerem führt zu Unschärfe, die sich bei jedem Größenänderungsschritt verstärkt und zu einem unscharfen Tab-Symbol führt.
Das .ico-Format ist ein Container, kein einzelnes Bild. Es enthält mehrere Rasterbilder – typischerweise 16×16, 32×32, 48×48 und 64×64 – in einer einzigen Datei. Der Browser analysiert das Verzeichnis ICO und rendert nur den Frame, der der benötigten Anzeigedichte am besten entspricht. Dieser Einzeldatei-Ansatz bedeutet, dass Sie nicht für jede Auflösung separate Link-Tags benötigen – ein Tag deckt alle Tab-Größen ab.
Laden Sie Ihr Quellbild auf favicon generator hoch. Das Tool verarbeitet alles lokal in Ihrem Browser – Ihr Bild verlässt nie Ihr Gerät. Innerhalb von Sekunden wird ein Download-Paket erstellt, das favicon.ico, favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png und site.webmanifest sowie einfügbare HTML-Link-Tags enthält.
Das Platzieren der Dateien ist unkompliziert. Legen Sie alle generierten Dateien im öffentlichen Stammverzeichnis Ihrer Site ab – demselben Ordner, der auch Ihren index.html bereitstellt. Für Vite- und Create React App-Projekte ist dies der Ordner /public. Platzieren Sie für Next.js App Router-Projekte favicon.ico in /app und die PNG-Dateien in /public. Legen Sie bei statischen Websites alles neben Ihren HTML-Dateien ab.
Die HTML-Link-Tags teilen Browsern mit, welche Datei für den jeweiligen Kontext verwendet werden soll. Das Minimum ist eine Zeile: `<link rel='icon' href='/favicon.ico'>`. Der vollständige empfohlene Satz fügt drei weitere Zeilen hinzu: eine für die Variante SVG, eine für die Variante apple-touch-icon und eine für das Webmanifest. Fügen Sie das generierte Snippet in Ihr „<head>“-Element ein. Die Reihenfolge der Tags spielt keine Rolle, solange sie vor „</head>“ stehen.
Browser-Caching ist die häufigste Ursache für Verwirrung, wenn ein Favicon scheinbar nicht aktualisiert wird. Browser speichern /favicon.ico pro Ursprung und respektieren möglicherweise nicht die Standard-Cache-Kontrollheader wie bei anderen Assets. Wenn Ihr altes Symbol weiterhin vorhanden ist, öffnen Sie ein neues Inkognito-Fenster oder hängen Sie eine Cache-Buster-Abfragezeichenfolge wie `?v=2` an die href in Ihrem Link-Tag an, um Browser zu zwingen, die aktualisierte Datei abzurufen.
Häufige Fehler sind das Hochladen eines nicht quadratischen Bilds (erzeugt gestreckte Symbole), die Verwendung einer Quelle mit weniger als 256 x 256 Pixeln (unscharfe Darstellung bei größeren Anzeigegrößen) und das Weglassen von apple-touch-icon (Bei Installationen auf dem Startbildschirm von iOS wird stattdessen ein Seiten-Screenshot angezeigt). Alle drei werden gelöst, indem man von einer quadratischen 512×512 PNG- oder SVG-Quelle ausgeht und den Generator jede Ausgangsgröße verarbeiten lässt.
Es lohnt sich, von Anfang an die Unterstützung des Dunkelmodus einzubauen. Viele Browser stellen die Tab-Leiste in dunklem Chrom dar, wenn sich das System des Benutzers im dunklen Modus befindet. Wenn Ihr Symbol eine dunkle Markierung auf einem transparenten Hintergrund ist, kann es in einer dunklen Registerkarte verschwinden. Versenden Sie ein SVG-Favicon mit einem eingebetteten `@media (prefers-color-scheme: dark)`-Stilblock, der die Füllfarbe ändert – es sind keine zusätzlichen HTML-Tags erforderlich, sondern nur eine aktualisierte SVG-Datei.
Überprüfen Sie Ihr Favicon nach der Bereitstellung mit live favicon tester. Der Tester simuliert Browser-Tab-, Lesezeichen- und Installationsaufforderungskontexte und zeigt, wie Ihr Symbol bei 16, 32, 48, 128 und 512 Pixeln nebeneinander gerendert wird. Überprüfen Sie auch manuell einen angehefteten Tab in Chrome und Safari und verwenden Sie „Zum Startbildschirm hinzufügen“ auf iOS, um apple-touch-icon zu bestätigen.
Plattformspezifische exemplarische Vorgehensweisen finden Sie unter favicon for WordPress, favicon for Shopify, favicon for React und favicon for Next.js. Der generierte Dateisatz ist auf allen Plattformen identisch. Der Unterschied besteht darin, wo Sie die Dateien hochladen und wie die Plattform die HTML-Link-Tags einfügt oder überschreibt.
Besuchen Sie Ihr Favicon erneut, wenn Sie ein Rebranding durchführen. Zwischengespeicherte Favoriten bleiben noch lange nach der Live-Schaltung einer Website-Neugestaltung in Lesezeichen und mobilen Startbildschirmen erhalten. Das Aktualisieren der Versionszeichenfolge in Ihrem Link-Tag href zwingt Browser dazu, beim nächsten Besuch die neue Datei abzurufen, wodurch das alte Symbol nach und nach an allen zwischengespeicherten Speicherorten ersetzt wird. Eine Format-für-Format-Aufschlüsselung der Dateigröße und Kompatibilitätskompromisse finden Sie im best favicon format-Leitfaden.
So funktioniert es
- 1
Bereiten Sie ein quadratisches Quellbild vor
Exportieren Sie Ihr Logo oder Symbol als 512×512 PNG mit transparentem Hintergrund oder als SVG mit einem quadratischen viewBox (z. B. „viewBox='0 0 512 512“). Vereinfachen Sie feine Details, die bei 16×16 unsichtbar sind.
- 2
Generieren Sie Ihr Favicon-Paket
Laden Sie die Quelle auf [favicon generator](tool:favicon-generator) hoch. Das Tool erzeugt favicon.ico (Mehrfachgröße 16/32/48/64), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png und site.webmanifest – alles in einem Durchgang.
- 3
Kopieren Sie alle Dateien in das Stammverzeichnis Ihrer Website
Platzieren Sie jede Datei aus der Download-ZIP-Datei im öffentlichen Stammverzeichnis Ihres Projekts – dem Verzeichnis, das index.html bereitstellt. Für Next.js App Router geht favicon.ico in /app; die PNGs kommen in /public.
- 4
Fügen Sie die Link-Tags HTML in <head> ein
Kopieren Sie das generierte HTML-Snippet und fügen Sie es in Ihr „<head>“-Element ein. Der vollständige Satz umfasst das .ico-Fallback, die SVG-Variante, apple-touch-icon und den Manifest-Link – insgesamt sechs Zeilen.
- 5
Überprüfen Sie alle Browser und Geräte
Öffnen Sie Ihre Website in Chrome, Safari, Firefox und Edge. Überprüfen Sie die Registerkarte, die Lesezeichenleiste und die Adressleiste. Tippen Sie auf iOS auf das Teilen-Blatt und auf „Zum Startbildschirm hinzufügen“, um den apple-touch-icon zu testen. Verwenden Sie [favicon tester](utility:favicon-tester) für eine schnelle Simulation.
- 6
Cache-Bust beim Aktualisieren eines vorhandenen Favicons
Wenn Sie ein Live-Favicon ersetzen, erhöhen Sie die Versionszeichenfolge in Ihrem Link-Tag href (`?v=2`, `?v=3` usw.). Dadurch werden alle Browser gezwungen, die aktualisierte Datei beim nächsten Laden der Seite abzurufen, anstatt die zwischengespeicherte Version bereitzustellen.
Jetzt ausprobieren
Erstellen Sie jetzt Ihr Favicon
Favicon-GeneratorFAQ
Wie erstellt man am einfachsten ein Favicon?+
Laden Sie ein 512×512 großes Quadrat PNG oder SVG in den FetchFavicon-Generator hoch. Es erstellt alle erforderlichen Dateien – .ico, SVG, apple-touch-icon, Manifest PNGs – sowie einfügefähige HTML in weniger als einer Sekunde, ohne Anmeldung und ohne Server-Upload.
Welche Größe sollte mein Quellbild haben?+
Mindestens 512×512 Pixel, idealerweise als SVG. Wenn Sie kleiner werden, besteht die Gefahr einer sichtbaren Unschärfe bei der von Windows verwendeten Größe von 256 x 256 und bei der für PWA-Installationsaufforderungen erforderlichen Größe von 512 x 512. Das Hochskalieren eines kleinen Bildes führt bei jedem Größenänderungsschritt zu einem Qualitätsverlust.
Benötige ich einen apple-touch-icon?+
Ja, sofern Besucher ein iPhone oder iPad nutzen. Ohne diese Funktion wird bei Installationen auf dem Startbildschirm von iOS anstelle Ihres Markenzeichens ein minderwertiges Screenshot-Miniaturbild Ihrer Seite angezeigt. Ein 180×180 PNG, verknüpft mit „<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` ist alles, was Sie brauchen.
Warum wird mein Favicon nicht im Browser-Tab angezeigt?+
Meistens handelt es sich um ein Caching-Problem. Öffnen Sie ein privates/Inkognito-Fenster und navigieren Sie zu Ihrer Website. Wenn es immer noch nicht angezeigt wird, überprüfen Sie, ob favicon.ico im Stammverzeichnis Ihrer Domain bereitgestellt wird und ob der href-Pfad des Link-Tags korrekt aufgelöst wird. Überprüfen Sie, ob sich Tippfehler und führende Schrägstriche fehlen.
Benötige ich sowohl .ico als auch SVG?+
Ja, für eine vollständige Abdeckung. Die .ico-Datei verarbeitet ältere Browser, Windows-Verknüpfungen und Tools von Drittanbietern, die /favicon.ico direkt abrufen. Der SVG sorgt für eine gestochen scharfe Wiedergabe auf Chrome, Firefox, Edge und Safari 15+ und unterstützt die Farbumschaltung im Dunkelmodus. Die kombinierte Dateigröße liegt normalerweise unter 30 KB.
Wie lange dauert die Verbreitung einer Favicon-Änderung?+
Zwischen Sekunden und mehreren Tagen, je nachdem, wie aggressiv der Browser das Original zwischengespeichert hat. Die schnellste Lösung besteht darin, eine neue Abfragezeichenfolge (`?v=2`) an Ihre Favicon-Href anzuhängen. Dies führt dazu, dass Browser sie als neue URL behandeln und sofort eine neue Kopie abrufen.
Kann ich ein JPEG als Favicon-Quelle verwenden?+
Sie können ein JPEG in den Generator hochladen, JPEGs unterstützen jedoch keine Transparenz. Wenn Ihr Symbol einen transparenten Hintergrund benötigt – der in Browser-Registerkarten am besten aussieht – beginnen Sie stattdessen mit PNG-32 oder SVG. Der Generator konvertiert entweder korrekt in .ico oder PNG.