Favicon erstellen

So nutzt du das Werkzeug

Ein Favicon ist das kleine Symbol im Browser-Tab, in Lesezeichen und neben deiner Seite in der Google-Suche. Wähle oben, ob es aus Buchstaben entstehen soll oder aus einem Bild, etwa deinem Logo. Bei Buchstaben stellst du Schrift, Farben, Form und Größe ein. Bei einem Bild wählst du, ob es ganz zu sehen sein oder die Fläche füllen soll, wie viel Abstand zum Rand es bekommt und ob ein Hintergrund dahinter liegt.

Die Vorschauen zeigen das Favicon im hellen und dunklen Tab, vergrößert in 16 und 32 Pixeln, in der Google-Suche und als Symbol auf iPhone und Android. Darunter wählst du, wo deine Website läuft: Für einen Baukasten bekommst du die eine passende Datei und die Schritte, für eine eigene Website das ganze Paket als ZIP und den Code.

Alles läuft in deinem Browser. Dein Bild wird nicht hochgeladen, und das Werkzeug speichert nichts. Lädst du die Seite neu, beginnst du von vorn. Verwende nur Logos und Bilder, an denen du die Rechte hast.

Welche Dateien eine Website heute braucht

Früher bestand ein Favicon-Paket aus Dutzenden Größen. Heute reichen wenige Dateien, weil Browser größere Bilder selbst verkleinern und alte Sonderformate wegfallen. Das Paket enthält:

Bewusst weggelassen sind die Datei browserconfig.xml und die Kacheln für Windows: Sie galten für den Internet Explorer 11, dessen Unterstützung Microsoft am 15. Juni 2022 beendet hat. Auch das einfarbige „mask-icon“ braucht es nicht mehr; Safari nutzt seit Version 12 auch für angeheftete Tabs das normale Favicon. Viele weitere Apple-Größen ersetzt das eine Symbol mit 180 Pixeln.

Der Code für den Kopf jeder Seite, also zwischen <head> und </head> im HTML, wenn du das Paket ohne Baukasten einbaust:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

• favicon.ico mit sizes="32x32": Ohne diese Angabe nimmt Chrome manchmal die ICO-Datei statt des schärferen SVG.
• Die PNG-Datei mit 96 Pixeln ist für die Google-Suche da. Google nennt SVG nicht unter den Formaten für Favicons.
• Das SVG steht zuletzt und ohne sizes. Ohne Buchstaben oder SVG als Vorlage entfällt diese Zeile; das Werkzeug passt den Code dann an.
• „shortcut icon“ ist veraltet. Steht so ein Eintrag noch in deiner Seite, ersetze ihn.

Welche Größe muss ein Favicon haben?

Ein Favicon ist quadratisch. Im Tab zeigt der Browser es mit 16 Pixeln, auf scharfen Bildschirmen mit 32 oder 48 Pixeln. Für die Google-Suche verlangt Google mindestens 8 × 8 Pixel und empfiehlt mehr als 48 × 48 Pixel. Die frühere Regel „ein Vielfaches von 48 Pixeln“ hat Google im Oktober 2024 aufgegeben; manche Hilfeseiten von Baukästen nennen sie noch.

Fürs iPhone braucht es 180 × 180 Pixel, für Android 192 und 512 Pixel. Als Vorlage taugt deshalb ein Logo mit mindestens 512 Pixeln Kantenlänge oder ein SVG. Kleinere Bilder funktionieren im Tab, werden für die großen Symbole aber unscharf.

Favicon einbauen: Baukasten, Shop oder eigene Website

Die meisten Baukästen und Shopsysteme erzeugen die Größen und den Code selbst. Du lädst dort nur eine Datei hoch. Die Menüs stammen aus den Hilfeseiten der Anbieter vom Oktober 2026; das Werkzeug zeigt dir die Schritte im Einzelnen.

Bei einer eigenen Website legst du alle Dateien ins Hauptverzeichnis, dorthin, wo die Startseite liegt, und fügst den Code oben in jede Seite ein. Die Datei favicon.ico gehört auch dann ins Hauptverzeichnis der Domain, wenn die Website in einem Unterordner liegt, weil manche Programme nur dort suchen.

Warum Google dein Favicon nicht zeigt

• Der Verweis fehlt auf der Startseite. Google liest das Favicon aus dem Kopf der Startseite (rel="icon"). Ein Favicon gibt es je Hostname; Unterordner können kein eigenes haben.
• Google darf die Datei nicht abrufen. Die robots.txt darf weder die Startseite noch die Favicon-Datei sperren.
• Format oder Größe passen nicht. Google verlangt ein quadratisches Bild mit mindestens 8 × 8 Pixeln (empfohlen: mehr als 48 × 48) in einem Format aus Googles Liste, etwa PNG oder ICO. SVG steht nicht in dieser Liste.
• Es braucht Zeit. Laut Google dauert es einige Tage bis mehrere Wochen. Schneller kann es gehen, wenn du in der Search Console für die Startseite die Indexierung beantragst. Ändere danach die Adresse der Favicon-Datei nicht mehr.

Auch wenn alles stimmt, garantiert Google die Anzeige nicht. Favicons, die Google für unangemessen hält, ersetzt es durch ein Standardsymbol.

Ob deine Startseite auf das Favicon verweist, prüft der SEO-Check.

So bleibt ein Favicon in 16 Pixeln erkennbar

• Zeichen statt Schriftzug. Ein ganzer Firmenname ist in 16 Pixeln nur ein Strich. Nimm das Zeichen aus deinem Logo oder ein bis zwei Anfangsbuchstaben.
• Kräftiger Kontrast. Die Regeln für Barrierefreiheit (WCAG 2.2) verlangen für wichtige Grafiken mindestens 3 : 1. Logos sind davon ausgenommen, als Richtwert taugt die Grenze trotzdem. Bei Buchstaben warnt das Werkzeug, wenn der Kontrast zwischen Schrift und Hintergrund darunter liegt.
• Lieber mit Hintergrund als durchsichtig. Ein dunkles Logo ohne Hintergrund verschwindet im dunklen Tab, ein helles im hellen. Ein farbiger Hintergrund wirkt auf beiden. Eigene Farben für den dunklen Modus kann ein SVG zwar enthalten, Safari beachtet sie aber nicht.
• Keine eigene Rundung beim iPhone-Symbol. iOS rundet die Ecken selbst und zeigt durchsichtige Stellen schwarz. Das Werkzeug legt deshalb immer einen Hintergrund dahinter.
• In echter Größe prüfen. Unter der großen Vorschau steht das Favicon in 16, 32 und 48 Pixeln; die vergrößerte 16-Pixel-Ansicht zeigt jeden Bildpunkt.

Grenzen und Vorgehen

Das Werkzeug zeichnet alle Dateien in deinem Browser. ICO, PNG und ZIP schreibt es mit eigenem Code, ohne fremde Bibliotheken und ohne Server. Ein ausgewähltes SVG wird bereinigt, bevor es als favicon.svg ins Paket kommt: Skripte, Verweise auf andere Dateien und eingebettetes HTML fallen weg, weil sie auf deiner Website ein Risiko wären, dazu Animationen und Links, die in einem Favicon nicht funktionieren. HEIC-Fotos vom iPhone kann das Werkzeug nicht lesen; speichere sie vorher als PNG oder JPG.

Die Vorschauen sind vereinfacht. Google probiert verschiedene Formen für Favicons aus und hat keine feste Vorgabe veröffentlicht; die Rundung auf dem iPhone ist nachgebildet. Welche Datei ein Browser am Ende nimmt, entscheidet er selbst. Die Buchstaben stammen aus den Schriften Inter („Klar“), Manrope („Rund“) und Fraunces („Klassisch“) unter der SIL Open Font License. Laut den häufigen Fragen zur Lizenz sind Logos und Grafiken aus diesen Schriften erlaubt; die Grafik selbst fällt nicht unter die Lizenz.

Stand: 26. Oktober 2026 · Nächste Prüfung der Größen und Anleitungen: April 2027

Häufige Fragen

Welche Größe muss ein Favicon haben?

Quadratisch und mindestens 8 × 8 Pixel; Google empfiehlt mehr als 48 × 48 Pixel. Im Paket stecken 16, 32 und 48 Pixel in der ICO-Datei, 96 Pixel für Google, 180 Pixel fürs iPhone und 192 und 512 Pixel für Android.

Brauche ich noch eine favicon.ico?

Ja. Manche Programme und ältere Browser fragen ohne Verweis direkt nach /favicon.ico. Die Datei ist klein und schadet nicht.

Kann ich nur ein SVG als Favicon nutzen?

Für aktuelle Browser ja (Safari ab Version 26), für die Google-Suche besser nicht: Google nennt SVG nicht als Format. Deshalb gehören eine PNG- und eine ICO-Datei dazu, wie im Paket.

Warum ist mein Favicon auf dem iPhone schwarz hinterlegt?

iOS füllt durchsichtige Stellen auf dem Home-Bildschirm schwarz. Das apple-touch-icon aus dem Paket hat deshalb immer einen Hintergrund; die Farbe wählst du im Werkzeug.

Ich habe das Favicon getauscht und sehe noch das alte. Warum?

Browser merken sich Favicons lange. Öffne deine Seite in einem neuen privaten Fenster oder leere den Browser-Speicher. Google braucht für die Suche einige Tage bis Wochen.

Wird mein Bild hochgeladen oder gespeichert?

Nein. Das Werkzeug verarbeitet das Bild in deinem Browser und sendet es nirgendwohin. Lädst du die Seite neu, ist es weg. Lade deine Dateien deshalb herunter, bevor du die Seite verlässt.