Favicon.ico aus einem PNG-Logo erstellen
Ein Favicon ist das kleine Symbol, das in Browser-Tabs, Lesezeichen und Suchergebnissen neben dem Namen Ihrer Website erscheint. Fehlt es, zeigen Browser ein allgemeines leeres Seitensymbol an – und die Website wirkt unfertig.
Dieser Ratgeber zeigt, wie Sie aus einem PNG- oder JPG-Logo eine richtige favicon.ico machen und sie in jede beliebige Website einbinden.
Welche Größen braucht ein Favicon?
Browser zeigen Favicons in unterschiedlichen Größen an: 16×16 Pixel in Tabs, 32×32 auf hochauflösenden Bildschirmen und bei manchen Lesezeichen, 48×48 unter Windows und größere Varianten für Verknüpfungen.
Eine ICO-Datei kann mehrere Größen in einer einzigen Datei speichern, und der Browser wählt die passendste aus. PixShift erstellt automatisch ICO-Dateien mit Versionen in 16, 32, 48 und 256 Pixeln.
Bild vorbereiten
- Verwenden Sie ein quadratisches Bild. Ist Ihr Logo nicht quadratisch, wird es zentriert und mit transparentem Rand umgeben.
- Beginnen Sie mit mindestens 256×256 Pixeln, damit die großen Varianten scharf bleiben.
- Halten Sie es einfach. Feine Schrift und dünne Linien verschwinden bei 16 Pixeln, daher funktioniert ein einzelner Buchstabe oder ein Symbol oft am besten.
- Verwenden Sie PNG mit transparentem Hintergrund, wenn sich das Symbol in helle und dunkle Browser-Tabs einfügen soll.
PNG in ICO umwandeln
- Öffnen Sie den PNG-in-ICO-Konverter von PixShift.
- Ziehen Sie Ihr Logo in das Feld. Die ICO-Datei wird sofort in Ihrem Browser erstellt.
- Laden Sie die Datei herunter und benennen Sie sie in favicon.ico um.
Favicon in Ihre Website einbinden
- Laden Sie favicon.ico in das Stammverzeichnis Ihrer Website hoch, sodass die Datei unter https://ihre-website.de/favicon.ico erreichbar ist.
- Fügen Sie die unten gezeigte Zeile in den <head>-Bereich Ihrer Seiten ein.
- Laden Sie Ihre Website neu. Erscheint weiterhin das alte Symbol, leeren Sie den Browser-Cache oder öffnen Sie die Website in einem privaten Fenster – Browser speichern Favicons sehr hartnäckig im Cache.
<link rel="icon" href="/favicon.ico" sizes="any">Brauchen Sie in modernen Browsern noch ICO?
Moderne Browser akzeptieren auch Favicons im PNG- und SVG-Format. Dennoch bleibt eine favicon.ico im Stammverzeichnis die kompatibelste Lösung: Manche Tools, Feedreader und ältere Browser suchen genau nach dieser Datei. Viele Websites bieten sowohl eine ICO- als auch eine SVG- oder PNG-Version an.