Favicon-Generator
Aus einem Bild werden favicon.ico und die PNG-Icons, die eine Website braucht — samt Tags zum Einfügen.
Bild hierher ziehen, um zu beginnen
Läuft im Browser. Nichts wird hochgeladen.
Ein Favicon ist längst keine einzelne Datei mehr. Browser holen weiterhin `/favicon.ico`, ob es verlinkt ist oder nicht, iOS will ein 180-Pixel-PNG für die Verknüpfung auf dem Homescreen, und ein Web-App-Manifest verlangt 192 und 512. Hier werden alle aus einem einzigen Ausgangsbild geschrieben, damit der Satz zusammenpasst, statt über drei Jahre aus dem entstanden zu sein, was gerade greifbar war.
Die `.ico` enthält die Versionen mit 16, 32 und 48 Pixeln in einer Datei — genau dafür ist dieses Format da: Der Browser wählt die Größe für den Tab, die Lesezeichenleiste oder die Desktop-Verknüpfung ohne weitere Anfrage selbst. Sie wird hier Byte für Byte geschrieben statt von einem Dienst, und jede Version entsteht aus dem Original in voller Auflösung, nicht aus der Verkleinerung der nächstgrößeren.
Beschnitten wird auf das mittlere Quadrat, denn überall, wo ein Icon auftaucht, ist es quadratisch. Ein breites Logo verliert seine Enden — hierher gehört also eine Bildmarke und keine Wortmarke, denn bei 16 Pixeln ist ein Name ohnehin nicht lesbar. Transparenz bleibt erhalten, sofern du keine Farbe dahinterlegst; bei einem dunklen Logo, das sonst in einem dunklen Browser-Theme verschwindet, lohnt sich das.
Schritt für Schritt
- 1Ein einigermaßen quadratisches Logo oder Bild hierher ziehen.
- 2Wähle, was dahinterliegt: transparent, weiß oder schwarz.
- 3Den Satz herunterladen und die drei link-Tags in deinen head kopieren.
Fragen
Welche Größen brauche ich wirklich?
Eine favicon.ico mit 16, 32 und 48 darin, ein 180-Pixel-apple-touch-icon für iOS und PNGs mit 192 und 512 für das Manifest. Genau diesen Satz schreibt das Werkzeug, und er deckt aktuelle Browser und Telefone ab.
Wohin kommen die Dateien?
In das Wurzelverzeichnis der Website, neben die index.html, und die drei link-Tags dann in den head. favicon.ico wird auch ohne Tag gefunden, die anderen müssen genannt werden.
Kann ich ein Foto nehmen?
Kannst du, aber bei 16 Pixeln ist es ein Fleck. Nur eine einfache Marke mit starkem Kontrast und wenigen Details übersteht die kleinste Größe.
Mein Logo ist breit — was passiert damit?
Es wird auf sein mittleres Quadrat beschnitten, die Enden gehen also verloren. Bereite eine quadratische Fassung vor oder nimm das Symbol aus dem Logo statt der vollständigen Sperrung.