Favicon für die Website erstellen: Alle Größen erklärt

Zu lernen, wie man ein Favicon für die Website erstellen kann, gehört zu den kleinsten Aufgaben im Webdesign — und zu den sichtbarsten. Ein Favicon ist das winzige Icon, das im Browser-Tab neben dem Seitentitel erscheint, in Lesezeichen, in mobilen Suchergebnissen und auf dem Startbildschirm, wenn jemand Ihre Seite speichert. Obwohl es im Tab nur 16 Pixel breit ist, trägt es Ihre Markenidentität in jeden Winkel des Web-Erlebnisses — und ein fehlendes oder defektes Favicon untergräbt leise das Vertrauen.

Die gute Nachricht: Ein Favicon zu erstellen ist unkompliziert, sobald Sie wissen, welche Größen Sie brauchen und wie Sie sie einbinden. Sie benötigen weder Photoshop noch einen Designer. Ein quadratisches Logo, ein kostenloses Online-Tool und ein paar Zeilen HTML genügen. Diese Anleitung führt Sie durch alles: was ein Favicon ist, die exakten Größen, die Sie 2026 brauchen, wie Sie eines gestalten, das auch winzig lesbar bleibt, wie Sie alle Größen auf einmal erzeugen und wie Sie es auf Ihrer Seite installieren, damit es überall erscheint, wo es soll.

Was ein Favicon ist und warum es wichtig ist

Das Wort „Favicon" kommt von „favorites icon" (Favoriten-Icon) — ursprünglich erschien es neben gespeicherten Seiten in den ersten Browsern. Heute ist seine Aufgabe deutlich größer. Es erscheint in:

• Browser-Tabs — das 16×16-Icon neben Ihrem Seitentitel, oft das einzige sichtbare Branding, wenn ein Nutzer zwanzig Tabs geöffnet hat.
• Lesezeichen — Nutzer scannen Icons, nicht Text, wenn sie eine gespeicherte Seite suchen.
• Verlauf und Autovervollständigung — Favicons lassen Ihre Seiten unter den Vorschlägen hervorstechen.
• Mobilen Suchergebnissen — Google zeigt Ihr Favicon neben Ihrem Treffer in der mobilen Suche, es gehört also zu Ihrem Auftritt in der Suche.
• Startbildschirmen und PWAs — wenn jemand Ihre Seite auf dem Smartphone-Startbildschirm speichert, wird Ihr Icon zur Identität Ihrer „App".

Ein generisches Globus-Icon oder ein Platzhalter für ein defektes Bild signalisiert, dass die Seite lieblos zusammengeschustert wurde. Ein scharfes Favicon signalisiert Professionalität und hilft Nutzern, zurückzufinden. Browser fordern /favicon.ico automatisch an, und wenn die Datei fehlt, füllen sich Ihre Server-Logs mit 404-Fehlern.

Favicon für die Website erstellen: Die Größen, die Sie 2026 brauchen

Sie brauchen keine Dutzende Dateien. Ein moderner, vollständiger Favicon-Satz ist klein und überschaubar:

• favicon.ico (16×16 und 32×32) — das klassische Format. Eine einzige ICO-Datei kann beide Größen enthalten. Browser fordern diese Datei nach wie vor zuerst an, und sie deckt Tabs und Lesezeichen in allen Desktop-Browsern ab.
• icon-32.png und icon-16.png (optionale PNGs) — PNG-Versionen der beiden klassischen Größen, nützlich, wenn Sie jede Größe explizit in Ihrem HTML referenzieren möchten.
• apple-touch-icon.png (180×180) — das Icon, das iOS und iPadOS verwenden, wenn jemand Ihre Seite zum Startbildschirm hinzufügt. Diese eine Größe genügt für Apple-Geräte; die alten Größen 57/72/114 sind obsolet.
• icon-192.png und icon-512.png — Pflicht, wenn Ihre Seite eine Progressive Web App (PWA) ist, referenziert im App-Manifest. Das 512×512-Icon wird auch für die Installationsaufforderung verwendet.
• icon.svg (SVG-Favicon) — ein skalierbares Vektor-Icon, das moderne Browser wie Chrome, Firefox und Edge unterstützen. Eine einzige winzige SVG-Datei ersetzt alle Raster-Größen und bleibt in jeder Auflösung gestochen scharf.

Das ist der komplette Satz: ein ICO für universelle Kompatibilität, ein 180×180-PNG für Apple-Geräte, 192- und 512-PNGs für PWAs und optional ein SVG für perfekte Skalierung.

Ein Favicon gestalten, das bei 16 px lesbar bleibt

Der schwierigste Teil eines Favicons ist nicht das Dateiformat, sondern das Design. Bei 16×16 Pixeln verschwindet jedes Detail. Ein Favicon ist eher ein Verkehrsschild als ein Logo: Es muss auf Anhieb lesbar sein. Halten Sie sich an diese Regeln:

• Rücksichtslos vereinfachen. Nutzen Sie einen Buchstaben, ein Symbol oder eine markante Form — den unverwechselbarsten Teil Ihres Logos. Streichen Sie Slogans, dünne Linien und Verläufe.
• Starken Kontrast wahren. Ihr Icon liegt auf der Browser-Oberfläche, die hell oder dunkel sein kann. Eine kräftige Marke auf einfarbigem Grund (meist Ihre Markenfarbe) bleibt in beiden Fällen lesbar.
• In Originalgröße testen. Zoomen Sie heraus und betrachten Sie Ihr Design in 16×16, bevor Sie es veröffentlichen. Wenn Sie im Tab nicht erkennen, was es ist, vereinfachen Sie weiter.
• Markenkonform bleiben. Verwenden Sie die Primärfarbe Ihrer Marke und nach Möglichkeit den Anfangsbuchstaben Ihres Markennamens — Nutzer erkennen ihn sofort neben Ihrem Titel wieder.
• Quadratische Arbeitsfläche, randabfallend. Gestalten Sie auf einem Quadrat (mindestens 512×512 für eine saubere Vorlage), wobei die Marke das Format füllt und ein maßvoller Abstand nichts abschneidet.

Ein häufiger Fehler ist, das komplette Website-Logo zu exportieren und zu verkleinern — Text wird zu grauem Brei. Gestalten Sie stattdessen eine abgeleitete Marke: nur den Icon-Teil Ihres Logos oder einen einzelnen Buchstaben auf Ihrer Markenfarbe.

Favicon für die Website erstellen mit einem Generator

Sechs Größen in drei Formaten von Hand zu exportieren ist mühsam und fehleranfällig. Der praktikable Weg: Sie gestalten ein hochwertiges Quellbild und lassen ein Tool den kompletten Satz erzeugen. Ein Favicon-Generator nimmt Ihr quadratisches Logo und liefert ICO, PNGs und SVG in den korrekten Abmessungen innerhalb von Sekunden.

Hier ein konkretes Beispiel. Angenommen, Ihre Seite heißt Bäckerei Sonnenblume und Ihr Logo ist eine kleine Sonnenblume auf weißem Quadrat:

1. Vorlage vorbereiten. Exportieren Sie die Marke als quadratisches PNG in 512×512 (oder größer). Ist Ihr Ausgangslogo nicht quadratisch, schneiden Sie es zuerst sauber quadratisch zu — immer ausgehend von der höchsten verfügbaren Auflösung.
2. In den Generator hochladen. Öffnen Sie den Favicon-Generator und laden Sie das quadratische Bild hoch. Betrachten Sie die Vorschau in kleinen Größen, um zu prüfen, dass die Sonnenblume noch erkennbar ist.
3. Den Satz erzeugen. Laden Sie das Komplettpaket herunter: favicon.ico (16+32), icon-180.png für Apple, icon-192.png und icon-512.png für das PWA-Manifest sowie optional ein SVG.
4. Die Dateien ablegen. Legen Sie sie in das Stammverzeichnis Ihrer Seite (oder einen /icons/-Ordner) und notieren Sie die Pfade.
5. Das HTML verdrahten (im nächsten Abschnitt im Detail) und bei einer PWA die 192/512-Icons in Ihrer manifest.json referenzieren.
6. Live testen. Öffnen Sie die Seite in einem Desktop-Tab, laden Sie ohne Cache neu (Strg/Cmd+Umschalt+R) — Favicons werden aggressiv zwischengespeichert, daher zeigt ein privates Fenster das ehrliche Ergebnis.

Unter zehn Minuten Gesamtzeit. Die Alternative — jede Größe von Hand aus einem Grafikeditor zu exportieren und das Markup von Hand zu schreiben — dauert deutlich länger und lädt zu Fehlern wie unpassenden Abmessungen ein.

Das Favicon auf Ihrer Seite installieren

Installieren bedeutet, <link>-Tags im <head> Ihres HTML hinzuzufügen, damit Browser jedes Icon finden. Mit den Icons im Stammverzeichnis sieht das Markup so aus:

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

Einige Hinweise zu diesem Markup:

• Die ICO-Zeile mit sizes="any" bedient ältere Browser, die /favicon.ico automatisch anfordern — behalten Sie die Datei genau an diesem Pfad, auch wenn Ihre anderen Icons woanders liegen.
• Die SVG-Zeile steht vor dem PNG, damit moderne Browser die skalierbare Version wählen; ältere Browser überspringen einen Typ, den sie nicht verstehen, einfach und fallen auf die nächste Zeile zurück.
• apple-touch-icon braucht kein sizes-Attribut, wenn Sie die einzelne 180×180-Datei ausliefern; iOS erkennt sie automatisch.
• Fügen Sie für eine PWA die 192- und 512-Icons in der manifest.json unter "icons" hinzu — die Installationsaufforderung liest das Manifest, nicht den <head>.
• Setzen Sie lange Cache-Header auf Icon-Dateien, benennen oder versionieren Sie die Dateien aber bei einem Redesign um, sonst sehen wiederkehrende Besucher weiterhin das alte Icon.

Wenn Sie WordPress oder Squarespace nutzen, können Sie dort meist die 512×512-Vorlage in den Website-Identitätseinstellungen hochladen, und die Plattform schreibt das Markup für Sie — doch wer weiß, was die Tags bewirken, kann das Ergebnis prüfen.

Jetzt wissen Sie, wie Sie ein Favicon für die Website erstellen — von Anfang bis Ende: Gestalten Sie eine mutige, einfache Marke, die 16 Pixel übersteht, erzeugen Sie die ICO-, PNG- und SVG-Größen in einem Durchgang und installieren Sie sie mit einer Handvoll <link>-Tags. Eine Zehn-Minuten-Aufgabe, die sich jedes Mal auszahlt, wenn jemand auf seine Tabs blickt, Ihre Seite als Lesezeichen speichert oder Sie in mobilen Suchergebnissen findet. Lassen Sie den Standard-Globus nicht stehen.

FAQ

Was ist die Standardgröße eines Favicons?

Der klassische Standard ist 16×16 Pixel, mit 32×32 als Begleitgröße — beide werden üblicherweise in einer einzigen favicon.ico-Datei gebündelt. Für vollständige moderne Abdeckung fügen Sie ein 180×180-apple-touch-icon, 192×192- und 512×512-PNGs für PWAs und optional ein SVG-Favicon für scharfe Skalierung in modernen Browsern hinzu.

Brauche ich 2026 noch favicon.ico?

Ja. Browser fordern /favicon.ico nach wie vor automatisch an, und es ist das einzige Format, das überall garantiert funktioniert. Behalten Sie eine kleine ICO-Datei im Stammverzeichnis Ihrer Seite neben Ihren modernen PNG- und SVG-Icons.

Kann ich ein SVG als Favicon verwenden?

Ja, in modernen Browsern. Chrome, Firefox und Edge unterstützen SVG-Favicons, die in jeder Größe perfekt scharf bleiben. Kombinieren Sie das SVG immer mit einem PNG- oder ICO-Fallback für Browser, die es noch nicht unterstützen.

Warum wird mein neues Favicon nicht angezeigt?

Fast immer liegt es am Cache. Browser speichern Favicons aggressiv zwischen. Laden Sie mit Strg/Cmd+Umschalt+R ohne Cache neu, testen Sie in einem privaten Fenster und prüfen Sie, dass Ihre <link>-Tags auf die korrekten Dateipfade zeigen. Wenn Sie ein bestehendes Icon neu gestaltet haben, benennen Sie die Datei um, damit wiederkehrende Besucher das neue Icon laden.