Favicon-Generator

Das Ausgangsbild zählt mehr als jede Einstellung, und drei Dinge daran entscheiden, ob das Ergebnis gut aussieht.

Beginnen Sie mit etwas Großem oder mit einem Vektor. Ein SVG ist ideal, weil jede Größe aus den Formen gerendert wird, statt aus einer Bitmap skaliert zu werden. Sonst nehmen Sie 512×512 oder mehr: Allein das Android-Symbol braucht 512.

Machen Sie es quadratisch. Symbole sind überall, wo sie erscheinen, quadratisch. Ein breites Logo wird mit Platz drumherum in ein Quadrat eingepasst und wirkt klein und verloren. Schneiden Sie es vorher quadratisch zu oder gestalten Sie eine quadratische Marke.

Vereinfachen Sie. Das überspringen die meisten, und es zählt mehr als die Auflösung. Bei 16×16 haben Sie insgesamt 256 Pixel: Das vollständige Firmenlogo mit Slogan ist unleserlich, egal wie gut das Original ist. Achten Sie auf die Favicons der Websites, die Sie täglich nutzen: Fast alle sind ein einzelner Buchstabe, eine einfache Marke oder eine kräftige Form, und viel einfacher als das eigentliche Logo desselben Unternehmens.

Ist Ihr Logo detailreich, erstellen Sie eine eigene, vereinfachte Version für das Symbol. Das ist normal und genau das, was große Organisationen tun.

Die Transparenz bleibt erhalten. Meist ist das gewünscht: Ein Symbol mit eingebautem weißem Hintergrund erscheint in einem Browser mit dunklem Design als weißes Quadrat.

Das Symbolset installieren

Laden Sie alles in das Stammverzeichnis Ihrer Website hoch, damit die Dateien unter https://example.com/favicon.ico und so weiter erreichbar sind. Unterordner funktionieren nicht: Browser suchen gezielt nach /favicon.ico, und die Pfade im Manifest gehen vom Stammverzeichnis aus.

Fügen Sie dann Folgendes in Ihren <head> ein:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Öffnen Sie zuletzt site.webmanifest und tragen Sie name und short_name ein.

„Ich habe es hochgeladen, und nichts hat sich geändert“

Das ist mit Abstand das häufigste Problem, und fast nie liegt es an den Dateien.

Browser speichern Favicons sehr hartnäckig im Cache, oft stärker als jede andere Ressource, und ignorieren manchmal ein normales Neuladen völlig. Bevor Sie annehmen, dass etwas falsch ist:

• Versuchen Sie ein erzwungenes Neuladen, ein privates Fenster oder einen Browser, mit dem Sie die Website nie besucht haben.
• Öffnen Sie die Datei direkt (https://example.com/favicon.ico), um zu bestätigen, dass sie wirklich da ist und ausgeliefert wird.
• Geben Sie ihm Zeit. Manche Browser prüfen das Symbol erst nach einer Weile erneut oder nach einem Neustart.

Öffnet sich die Datei direkt, der Tab zeigt aber weiter das alte Symbol, ist es der Cache. Gibt die Datei einen 404-Fehler, liegt sie am falschen Ort.

Wollen Sie zusätzlich ein SVG-Symbol?

Moderne Browser akzeptieren ein SVG-Favicon, das in jeder Größe scharf bleibt und sich an den dunklen Modus anpassen kann:

<link rel="icon" href="/icon.svg" type="image/svg+xml">

Das ist eine gute Ergänzung, kein Ersatz. Behalten Sie die ICO als Rückfall: Windows-Verknüpfungen, ältere Browser und viele Werkzeuge von Drittanbietern suchen noch danach.

Über Websites hinaus

Die favicon.ico in diesem Archiv ist ein normales Windows-Symbol mit mehreren Größen, sie dient also auch für Programmsymbole, Desktop-Verknüpfungen und Ordnersymbole. Wo Windows ein Symbol zeigt, wählt es die Größe, die am besten zur Ansicht passt, und genau deshalb enthält die Datei vier.