Favicon erstellen: welche Grössen und Dateien Ihre Website wirklich braucht

Kurz gesagt: Eine moderne Website braucht ein favicon.ico mit 16, 32 und 48 Pixeln (oder mindestens ein PNG mit 32 Pixeln) für den Browser-Tab, optional ein SVG-Favicon, das in jeder Grösse scharf bleibt, ein Touch-Icon mit 180 × 180 Pixeln für Smartphones und Tablets, die die Website auf dem Startbildschirm ablegen, und ein Web-App-Manifest mit Icons von 192 × 192 und 512 × 512 Pixeln, idealerweise mit einer maskierbaren Version. Jede Datei wird mit einer einzigen Zeile im <head> der Seite eingebunden.

Dieser Leitfaden erklärt, wofür jede Datei da ist, wie Sie ein Zeichen gestalten, das auch auf 16 Pixeln lesbar bleibt, warum maskierbare Icons mehr Rand brauchen und wie Sie das ganze Set mit Favicon & App-Icons aus einem Bild in Ihrem Browser erstellen – samt HTML-Tags und Manifest. Zum Schluss: wie Sie das Ergebnis prüfen und warum Browser manchmal das alte Icon weiter anzeigen.

Welche Favicon-Grössen braucht eine Website?

Browser, Betriebssysteme und Startbildschirme wählen aus dem, was die Seite anbietet, jeweils das passende Icon. Ein vollständiges, aktuelles Set sieht so aus:

Das Web-App-Manifest ist eine kleine JSON-Datei (site.webmanifest) mit dem Namen der Website, ihren Icons, einer Designfarbe und der Art, wie sie sich nach der Installation öffnet. Ihr Format ist eine W3C-Spezifikation. Auch wenn Sie nie eine installierbare Web-App planen: Browser lesen sie für die Icons auf dem Startbildschirm.

ICO, PNG oder SVG: welches Format fürs Favicon?

• ICO ist das älteste Format und noch immer das robusteste: Eine Datei enthält mehrere Grössen und funktioniert dort, wo sonst nichts funktioniert. Legen Sie sie ins Stammverzeichnis der Website.
• PNG-Favicons sind einfache Einzelgrössen. Moderne Browser nehmen sie direkt an; bieten Sie 16 und 32 Pixel an.
• SVG-Favicons skalieren verlustfrei und sind meist winzig. Nicht jeder Browser verwendet sie – sie ergänzen ICO und PNG, statt sie zu ersetzen.
• Touch- und Manifest-Icons sind immer PNG: deckend beim Touch-Icon, transparent, wo erlaubt, bei den regulären Manifest-Icons.

Ob Ihr Logo überhaupt als SVG oder als PNG vorliegen sollte, ist eine eigene Frage – verglichen in SVG oder PNG fürs Logo.

Favicon gestalten: lesbar auf 16 Pixeln

Auf 16 × 16 Pixeln stehen 256 Punkte zur Verfügung. Ein vollständiges Logo mit Schriftzug wird zum grauen Fleck. Was funktioniert:

• Das Zeichen, nicht das ganze Logo. Ein Buchstabe, ein Initialenpaar oder nur die Bildmarke – nie ein Slogan oder kleiner Text.
• Starker Kontrast. Ein helles Zeichen auf dunkler Fläche oder umgekehrt. Der Tab kann hell oder dunkel sein; ein Zeichen ohne eigenen Hintergrund muss auf beidem funktionieren.
• Kräftige Formen, wenig Details. Feine Linien und schmale Zwischenräume verschwinden beim Verkleinern. Vereinfachen statt schrumpfen.
• Das Quadrat füllen. Ein breites Logo im Quadrat ergibt einen dünnen Streifen in der Mitte; schneiden Sie auf die Bildmarke zu oder zeichnen Sie sie quadratisch neu.
• Gross beginnen. Erstellen Sie die Icons aus einem SVG oder aus einem Bild mit mindestens 512 Pixeln pro Seite, damit jede Grösse eine echte Verkleinerung ist und nichts vergrössert wird.

Noch kein Logo? Ein einzelner Buchstabe oder ein Emoji auf der Markenfarbe ist ein durchaus gutes Favicon und in jeder Grösse lesbar.

Maskierbare Icons: Rand und sichere Zone

Manche Systeme schneiden Icons auf dem Startbildschirm als Kreis, abgerundetes Quadrat oder in einer anderen eigenen Form zu. Ein normales Icon verliert dann seine Ecken – oder schwimmt als kleine Form auf einer weissen Fläche. Ein maskierbares Icon löst das: Es ist bis an den Rand deckend, und alles Wichtige liegt in der sicheren Zone, einem Kreis in der Mitte, dessen Radius 40 % der Icon-Grösse beträgt, wie es die Spezifikation des Web-App-Manifests festlegt. Was ausserhalb liegt, darf abgeschnitten werden.

Praktisch heisst das: viel Rand. Ein Zeichen, das das reguläre Icon randvoll ausfüllt, muss auf dem maskierbaren deutlich kleiner sein, auf einer vollflächigen Hintergrundfarbe. Auch das Touch-Icon für Smartphones und Tablets ist deckend, weil transparente Bereiche schwarz dargestellt würden; seine Ecken rundet das System selbst ab.

Favicon erstellen mit *Favicon & App-Icons*

Favicon & App-Icons erstellt das vollständige Set in einem Durchgang, in Ihrem Browser: Das Bild wird auf Ihrem Gerät verarbeitet und nie zu uns hochgeladen (mehr auf der Sicherheitsseite).

1. 1

   Quelle wählen

   Fügen Sie ein Bild hinzu – idealerweise ein SVG oder ein quadratisches PNG Ihres Zeichens – oder stellen Sie «Icons erstellen aus» auf «Text oder einem Emoji» und wählen Sie Text, Textfarbe, die Farbe dahinter und eine Schrift.

2. 2

   Einpassen und Rand

   Wählen Sie bei einem nicht quadratischen Bild «Ganzes Bild einpassen» oder «Quadrat ausschneiden» und welcher Bereich bleiben soll. «Rand um Bild oder Text» fügt jedem Icon Abstand hinzu.

3. 3

   Farben und Manifest festlegen

   Bestimmen Sie den Hintergrund der Apple- und maskierbaren Icons, auf Wunsch abgerundete Ecken des Apple-Icons, den App-Namen, den Kurznamen unter dem Icon auf dem Startbildschirm, die Designfarbe und wie sich die Website nach der Installation öffnet.

4. 4

   Speicherort angeben

   «Speicherort der Dateien auf der Website» wird in die HTML-Tags und das Manifest geschrieben – / für das Stammverzeichnis oder ein Ordner wie /icons/.

5. 5

   Herunterladen und Tags einfügen

   Speichern Sie alle Dateien auf einmal, laden Sie sie wie gewohnt auf Ihre Website und fügen Sie die Tags aus snippet.html in den <head> jeder Seite ein.

Das Ergebnis: favicon.ico (16, 32 und 48 px), die PNGs mit 16 und 32 Pixeln, das Apple-Touch-Icon mit 180 Pixeln, die Manifest-Icons mit 192 und 512 Pixeln, ein maskierbares Icon mit 512 Pixeln, dessen Inhalt in der sicheren Zone bleibt, site.webmanifest und snippet.html. Bei einer SVG-Quelle kommt ein bereinigtes icon.svg dazu, das in den Tags aufgeführt wird; auf Wunsch auch browserconfig.xml mit einer Kachel für ältere Windows-Kacheln. Die kleinen Grössen werden nach dem Verkleinern geschärft, sofern Sie das nicht ausschalten, und ein Hinweis erscheint, wenn die Quelle vergrössert werden musste. Mit den Standardeinstellungen lautet das Snippet:

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#ffffff" />

Das Werkzeug verarbeitet eine Quelle pro Durchgang, und ein Durchgang ist ein Vorgang. Ihre ersten Schritte in der App beschreibt Ihr erstes Werkzeug; alle kreativen Werkzeuge finden Sie unter Erstellen.

Favicon prüfen und den Cache erneuern

Browser behalten Favicons lange, oft länger als die Seite selbst. Erscheint nach einer Änderung noch das alte Icon, liegt es meist am Cache, nicht an den Dateien:

• Die Datei direkt öffnen, zum Beispiel https://www.example.ch/favicon.ico. Erscheint dort das neue Icon, hat das Hochladen geklappt.
• Ohne Cache neu laden oder die Seite in einem privaten Fenster öffnen.
• Den Dateiverweis ändern, wenn Sie ein Icon ersetzen, zum Beispiel /favicon.ico?v=2 in den Tags, damit Browser es neu abrufen.
• Den Tab im hellen und im dunklen Design prüfen und auf dem Startbildschirm eines Smartphones – dort zeigen sich schwacher Kontrast oder zu wenig Rand.
• Den Seitenquelltext ansehen: Die Tags gehören in den <head> jeder Seite, nicht nur der Startseite.

Häufige Fragen

Wie gross sollte ein Favicon sein?

Für den Browser-Tab 16 und 32 Pixel (in einer ICO-Datei zusätzlich 48 Pixel); für Startbildschirme 180 Pixel für das Touch-Icon sowie 192 und 512 Pixel im Manifest. Gehen Sie von einer Quelle mit mindestens 512 Pixeln oder einem SVG aus.

Reicht ein einzelnes favicon.ico noch?

Für den Browser-Tab meistens ja. Startbildschirme und installierte Web-Apps suchen aber nach dem Touch-Icon und den Manifest-Icons; ohne sie zeigen sie ein Bildschirmfoto oder einen generischen Buchstaben statt Ihres Zeichens.

Kann ich ein Emoji als Favicon verwenden?

Ja. Wählen Sie in Favicon & App-Icons «Text oder einem Emoji» und eine Hintergrundfarbe; das Emoji wird mit den mitgelieferten Schriften gezeichnet und in jeder Grösse zu einer normalen Bilddatei – es sieht auf jedem Gerät gleich aus.

Warum erscheint mein neues Favicon nicht?

Meist wegen des Browser-Caches. Öffnen Sie die Adresse des Icons direkt, laden Sie ohne Cache neu und ergänzen Sie den Dateiverweis um einen Versionsparameter. Prüfen Sie auch, ob der Pfad in den Tags dorthin zeigt, wo die Dateien wirklich liegen.

Bereit für ein scharfes Icon in jedem Tab? Öffnen Sie die kreativen Werkzeuge, sehen Sie, welche Bildformate unterstützt werden, lesen Sie, wie Sie Bilder für die Website optimieren, wie Agenturen Kundenmaterial vorbereiten, oder erstellen Sie ein kostenloses Konto.