So erstellst du ein Favicon aus deinem Logo

Welche Favicon-Dateien eine Website 2026 braucht

Browser, Smartphones und externe Dienste fragen jeweils unterschiedliche Dateien an. Ein vollständiges Favicon ist daher kein Einzelfoto, sondern ein abgestimmtes Set. Diese Dateien benötigen die meisten Websites heute:

SVG-Favicons funktionieren mittlerweile in allen großen Browsern. Laut caniuse unterstützen Chrome und Edge sie ab Version 80, Firefox ab 41, Samsung Internet ab 13 und Safari seit Version 26 auf macOS wie iOS.

Das macht favicon.ico keineswegs überflüssig: Manche Dienste, darunter viele Feed-Reader, fragen starr /favicon.ico aus dem Hauptverzeichnis ab und suchen nirgendwo sonst. Auch Browser, die zu alt für SVG sind, greifen darauf zurück. Die Google-Suche listet SVG ebenfalls nicht unter ihren unterstützten Favicon-Formaten – sie benötigt ein Raster-Icon (ICO oder PNG), das auf der Startseite verlinkt ist.

Das Apple-Touch-Icon muss zwingend einen deckenden Hintergrund haben. iOS unterstützt auf dem Startbildschirm keine Transparenz und füllt transparente Bereiche schwarz auf – ein dunkles Logo auf transparentem Grund würde so zum schwarzen Kasten. Gib dieser Datei immer einen soliden Hintergrund.

Chromium-Browser erwarten mindestens ein 192 px und ein 512 px Icon im Web-Manifest, damit eine Website als App installiert werden kann. Das maskierbare Icon (Maskable Icon) folgt derselben Idee mit zusätzlichem Sicherheitsabstand: Android schneidet Icons je nach Launcher zu Kreisen, abgerundeten Quadraten oder Tropfenformen zu – nur ein zentrierter Kreis mit 40 % des Icon-Durchmessers bleibt garantiert immer sichtbar.

Was bei 16 px erkennbar bleibt und was nicht

Ein Browser-Tab zeigt das Favicon in einer Größe von 16 × 16 CSS-Pixeln an – auf hochauflösenden Bildschirmen entspricht das 32 physischen Gerätepixeln. Bei 16 px sind das insgesamt nur 256 Bildpunkte: Platz für genau eine markante Form und zwei bis drei Farben, nicht für Text oder eine Szene. Wir haben vier Logos aus unserem Testset mit 16 px gerendert. Die Kacheln unten zeigen diese 16-px-Dateien vergrößert, Pixel für Pixel.

✓

Kräftiges Symbol

✗

Wortmarke / Schriftzug

✗

Dünne Line-Art

✗

Detailreiche Szene

• Laborkolben (✓): Der Körper des Kolbens ist eine solide blaugrüne Form, die selbst bei dieser Winzigkeit als Kolben erkennbar bleibt. Nicht ganz perfekt: Das kleine Molekül und die Bläschen über dem Hals verschmelzen zu einem Pixelcluster. Ein vereinfachtes Symbol ohne diese Details wäre noch schärfer.
• Wortmarke (✗): „HAMMER AND HOME“ ist in fetten Großbuchstaben gesetzt, doch bei 16 px ist jede Buchstabenzeile nur zwei bis drei Pixel hoch. Die Worte werden zu gestreiften Balken in Blau und Grau, und Haus samt Hammer schrumpfen zu einem unklaren Klumpen. Nutze für das Favicon nur das Bildsymbol oder einen einzelnen Buchstaben.
• Dünne Line-Art (✗): Die lesende Katze besteht aus feinen dunklen Linien auf Weiß. Bei 16 px deckt jede Linie nur einen Bruchteil eines Pixels ab; sie wird mit dem umgebenden Weiß verrechnet und verblasst zu einem hellgrauen Schatten. Mache Linien für kleine Größen deutlich dicker oder fülle die Flächen aus.
• Detailreiche Szene (✗): Ein Fahrrad vor einer Stadtsilhouette hat dünne Speichen, Rahmenrohre und winzige Fenster – allesamt feiner als ein Pixel. Sie verschmieren zu Grau, und der Schriftzug darunter wird zu einem dunklen Balken. Wähle ein einzelnes Kernelement – etwa das Rad – und zeichne es kräftig.

Die Grundregel hinter allen vier Beispielen: In Favicon-Größe wird alles, was dünner als etwa ein Pixel ist, grau und flau – und Formen, die näher als ein Pixel beieinander liegen, verschmelzen. Kräftige Volltonformen mit hohem Kontrast überstehen die Verkleinerung; Schriftzüge, feine Konturen und kleinteilige Details gehen unter.

Nutze das Symbol, nicht das ganze Logo

Die meisten Logos bestehen aus zwei Teilen: einem Bildzeichen (Symbol) und dem Namen. In einem 16-px-Tab stiehlt der Name den Platz, den das Symbol dringend bräuchte – und lesbar ist er ohnehin nicht mehr. Das Kolben-Logo zeigt den Unterschied deutlich.

✓

Symbol allein, 16 px

✗

Ganzes Logo, 16 px

Zusammen mit dem Text muss sich der Kolben das Quadrat mit „CHEMICA LABORATORIES“ teilen; dadurch schrumpft er auf die halbe Höhe und der Name wird zu einem unlesbaren grauen Streifen. Allein füllt der Kolben die Fläche voll aus und behält seine klare Form. Besucher sehen deinen vollständigen Namen ohnehin auf der Seite und im Tab-Titel direkt neben dem Icon – das Favicon muss nur als visuelle Marke wiedererkennbar sein.

Besteht dein Logo ausschließlich aus Schrift (Wortmarke), nimm den Anfangsbuchstaben oder ein Monogramm in den Farben deines Logos auf einer vollflächigen Farbkachel.

Logobundle misst automatisch, wie viele Details dein Logo bei Favicon-Größe einbüßt. Ist das Gesamtlogo zu unruhig, isoliert es das Symbol für Favicons und App-Icons, während Social-Media-Vorschauen das komplette Logo behalten. Genau so lief es beim Laborkolben. Ist das Symbol selbst zu filigran, weist das Paket darauf hin, dass es in Miniaturgröße verschwimmt und eine vereinfachte manuelle Variante nötig ist. Dasselbe gilt für App-Icons; der App-Icon-Ratgeber behandelt die größeren Formate und die Masken mobiler Betriebssysteme.

Dunkle Browser-Tabs (Dark Mode)

Viele Menschen nutzen ihren Browser im Dark Mode – dann ist der Tab-Hintergrund dunkelgrau. Ein transparentes Favicon mit dunklen Linien, das auf Weiß perfekt aussah, kann dort komplett verschwinden. Wir haben das 32-px-Favicon aus zwei Logobundle-Paketen auf einen dunklen Tab gesetzt.

✗

Dunkle Line-Art auf dunklem Tab

✓

Kräftige Farbe auf dunklem Tab

Die Katze ist mit fast schwarzen Linien auf transparentem Grund gezeichnet und auf dem dunklen Tab kaum noch zu erkennen. Der Fuchs ist leuchtend orange und hebt sich deutlich ab. Beide Pakete enthielten das gesamte Logo samt Schrift, und in beiden Fällen verschwindet die dunkle Schrift unter dem Symbol fast vollständig – ein weiterer Grund, nur das Symbol allein zu nutzen.

Drei Wege zu einem Favicon, das auf hellen wie dunklen Tabs funktioniert:

• Wähle Mitteltöne wie Orange, Türkis oder ein mittleres Blau, die sich sowohl von Weiß als auch von Dunkelgrau gut abheben.
• Füge bei dunklen Motiven eine helle Außenlinie hinzu – bei 16 px genau einen Pixel breit.
• Setze das Symbol auf ein vollflächiges Quadrat oder einen Kreis in deiner Markenfarbe, sodass die Tab-Farbe keine Rolle mehr spielt.

Ein SVG-Favicon kann seine Farbe sogar selbstständig anpassen. Da es sich um ein SVG-Dokument handelt, kann es per CSS-Media-Query auf das Farbschema des Systems reagieren:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1d2433; }
    @media (prefers-color-scheme: dark) {
      path { fill: #f2f2f2; }
    }
  </style>
  <path d="M6 4h20v24H6z"/>
</svg>

Logobundles favicon.svg verzichtet standardmäßig auf diesen Wechsel: Es liefert das Farb-SVG des Icons mit konsistenten Farben auf jedem Tab. Möchtest du den automatischen Wechsel, ergänze den Style-Block oben manuell. Nur moderne Browser mit SVG-Unterstützung folgen dieser Regel; die .ico- und PNG-Dateien behalten feste Farben.

Die Dateien von Hand erstellen

Du brauchst zunächst eine Vektorversion deines Logos. Liegt es nur als PNG oder JPEG vor, solltest du das PNG-Logo in SVG umwandeln; stammt es aus Gemini, zeigt der Gemini-Ratgeber, wie du es vor dem Vektorisieren säuberst. Erstelle dann ein quadratisches SVG nur mit dem Bildsymbol (hier icon.svg genannt), mit etwas Randabstand zum Motiv.

for s in 16 32 48 192 512; do rsvg-convert -w $s icon.svg -o $s.png; done
magick 16.png 32.png 48.png favicon.ico
cp icon.svg favicon.svg
rsvg-convert -w 180 -b white icon.svg -o apple-touch-icon.png
mv 192.png icon-192.png && mv 512.png icon-512.png
rsvg-convert -w 288 -b white --page-width 512 --page-height 512 \
  --left 112 --top 112 icon.svg -o icon-maskable-512.png

rsvg-convert behält das Seitenverhältnis bei, wenn nur die Breite angegeben wird – deshalb sollte icon.svg quadratisch angelegt sein. Die Option -b füllt den Hintergrund deckend aus, was für das Apple- und das maskierbare Icon unverzichtbar ist; ersetze white bei Bedarf durch deine Markenfarbe. Der Befehl für das maskierbare Icon platziert das Motiv mit 288 px Breite mittig auf einer 512-px-Fläche, sodass es sicher im geschützten Innenkreis liegt.

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192",
      "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512",
      "type": "image/png" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512",
      "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Logobundles Komplettpaket enthält genau diese Dateien, plus favicon-16x16.png, favicon-32x32.png und eine Datei head-snippet.html mit den HTML-Tags. Die PNG-Icons werden für jede Größe sauber aus dem Vektor gerendert; die drei .ico-Ebenen werden aus einem hochauflösenden 256-px-Rendering herunterskaliert. Das Manifest lässt name und short_name als Platzhalter frei: Trage dort vor Veröffentlichung deine Daten ein.

Favicon in die Website einbinden

Kopiere die Dateien bei einer klassischen HTML-Website ins Hauptverzeichnis (Root) direkt neben index.html und füge diese Tags im <head> jeder Seite ein:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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">

Browser, die SVG verstehen, nutzen favicon.svg; ältere ignorieren diese Zeile und greifen auf das .ico zurück. Behalte das sizes-Attribut bei der .ico-Zeile unbedingt bei: Ohne Angabe oder mit sizes="any" bevorzugt Chrome mitunter fälschlicherweise das .ico vor dem SVG. Evil Martians’ Favicon-Guide empfiehlt sizes="32x32"; Logobundles Snippet nutzt 48x48.

Next.js (App Router)

app/favicon.ico
app/icon.svg
app/apple-icon.png
app/manifest.webmanifest
public/icon-192.png
public/icon-512.png
public/icon-maskable-512.png

Next.js erkennt diese Dateinamen automatisch und generiert die passenden Tags selbstständig – du musst keine manuellen <link>-Tags im Code hinterlegen. favicon.ico funktioniert nur auf oberster Ebene im app/-Ordner. Die Icons des Manifests verweisen auf Dateien in public/, die Next.js direkt unter dem Root-Pfad ausliefert.

Astro, Vite und andere statische Websites

Lege alle Dateien in den public/-Ordner. Astro und Vite kopieren diesen Ordner beim Build unverändert ins Hauptverzeichnis, sodass public/favicon.svg als /favicon.svg ausgeliefert wird. Füge die vier Tags anschließend in den <head> deines Basis-Layouts ein (bei Astro in die Layout-Komponente, bei Vite in index.html).

WordPress

WordPress generiert seine Icons aus einem einzigen Bild, dem sogenannten Website-Icon (Site Icon). Seit WordPress 6.5 findest du die Option unter Einstellungen → Allgemein → Website-Icon; davor lag sie unter Design → Customizer → Website-Informationen. Lade ein quadratisches PNG mit mindestens 512 × 512 px hoch – icon-512.png aus dem Set passt perfekt. WordPress fügt alle Tags automatisch ein, sodass du kein HTML-Snippet benötigst.

Fehlerbehebung

Die häufigsten Favicon-Probleme und ihre Ursachen:

• Unscharfes Favicon: Meist wurde ein großes PNG vom Browser auf 16 oder 32 px herunterskaliert. Rendere jede Größe direkt aus dem Vektor und vereinfache das Bildzeichen für 16 px, falls es noch flau wirkt.
• Das alte Icon wird weiter angezeigt: Browser cachen Favicons extrem hartnäckig. Rufe die Dateiadresse direkt im Browser auf (z. B. deine-domain.de/favicon.ico), lade sie neu und lade dann deine Seite mit Strg+Umschalt+R (Cmd+Umschalt+R auf dem Mac) neu. Das Umbenennen der Datei oder das Anhängen von ?v=2 an die URL erzwingt einen frischen Download.
• Falsches oder fehlendes Icon in Google-Suchergebnissen: Google verwendet ein einziges Favicon pro Hostname, ausgelesen von deiner Startseite. Das Icon muss quadratisch und mindestens 8 × 8 px groß sein (Google empfiehlt mehr als 48 × 48 px). Es muss auf der Startseite mit rel="icon" verlinkt sein, in einem von Google unterstützten Format vorliegen (ICO und PNG funktionieren; SVG steht nicht auf Googles Liste) und darf nicht per robots.txt gesperrt sein. Aktualisierungen können Tage oder Wochen dauern; das URL-Prüftool in der Search Console kann ein erneutes Crawlen anstoßen.
• Schwarzer Kasten auf dem iPhone-Startbildschirm: apple-touch-icon.png hat einen transparenten Hintergrund. Exportiere die Datei noch einmal mit einem vollflächig deckenden Hintergrund.
• Icon auf Android abgeschnitten: Das Motiv des maskierbaren Icons ragt über den sicheren Innenbereich hinaus. Halte es innerhalb eines zentrierten Kreises mit maximal 40 % des Icon-Durchmessers.
• Favicon funktioniert lokal, aber nicht online: Prüfe, ob alle Dateien im Server-Hauptverzeichnis (Root) liegen und ob die Pfade in den Tags mit einem Schrägstrich (/) beginnen.