Favicon-Größen: Welche Dateien Sie brauchen — und in wie viel px
Warum gibt es so viele Favicon-Dateien?
Das Favicon ist das kleine Symbol Ihrer Website — im Browser-Tab, in der Lesezeichenliste, in Suchergebnissen und auf dem Startbildschirm des Handys. Es ist das Gesicht der Seite; ohne wirkt sie unfertig.
Der Haken: Jeder dieser Orte verlangt eine andere Größe und ein anderes Format. Ein Favicon ist deshalb keine einzelne Datei, sondern ein kleines Set.
Das benötigte Set
- favicon.ico — 16, 32 und 48px in einer Datei. Für Adressleiste, Tabs und Lesezeichen; der älteste Standard und immer noch Pflicht
- PNG mit 16px und 32px — die scharfen Versionen, die moderne Browser im Tab nutzen
- apple-touch-icon mit 180px — wird verwendet, wenn jemand Ihre Seite zum iPhone- oder iPad-Startbildschirm hinzufügt
- PNG mit 192px und 512px — für Android-Startbildschirme und PWA-Installationen, eingetragen in site.webmanifest
Logo ablegen und favicon.ico, Apple-Touch-Icon und PWA-Icons als ZIP erhalten — plus das HTML für Ihre Seite. Alles geschieht im Browser.
Komplettes Favicon-Set erzeugenOhne Installation und ohne Registrierung · Alles läuft im Browser, Dateien gehen nie an einen Server
So bereiten Sie das Ausgangsbild vor
Der richtige Weg: mit einem großen quadratischen Bild (mindestens 512px) beginnen und verkleinern. Ein kleines Bild zu vergrößern macht es nur unscharf.
Es muss auch bei 16px erkennbar bleiben — je einfacher, desto besser. Ein einzelnes Symbol schlägt ein textlastiges Logo, etwas Rand verhindert ein gedrängtes Bild, und ein transparenter Hintergrund passt zu hellem wie dunklem Design.
So kommt es ins HTML
Laden Sie die Dateien in den Stammordner der Website und verweisen Sie im head mit link-Tags darauf: rel="icon" für ICO und PNGs, rel="apple-touch-icon" für das 180px-Icon und rel="manifest" für site.webmanifest.
Zur Not finden die meisten Browser eine favicon.ico im Stammverzeichnis auch ohne Tags. Damit aber die größenspezifischen PNGs und Startbildschirm-Icons sauber funktionieren, setzen Sie die Tags.
Das Set nicht von Hand bauen
Bild für Bild zu verkleinern und von Hand eine ICO zu packen ist mühsam. Legen Sie ein einziges Bild in den Favicon-Generator von Image Converter NOW: Er erzeugt favicon.ico, alle PNG-Größen, site.webmanifest und die fertigen HTML-Tags — in einem ZIP.
Alles läuft im Browser — Ihr Logo wird nie auf einen Server hochgeladen.
Logo ablegen und favicon.ico, Apple-Touch-Icon und PWA-Icons als ZIP erhalten — plus das HTML für Ihre Seite. Alles geschieht im Browser.
Komplettes Favicon-Set erzeugenOhne Installation und ohne Registrierung · Alles läuft im Browser, Dateien gehen nie an einen Server