Favicon-Generator

Eine einzelne Icon-Datei müsste einen Browser-Tab bei 16 Pixeln, einen mobilen Home-Bildschirm bei 180 Pixeln, eine Android-App-Schublade bis zu 512 Pixeln, und ein Windows-Taskleisten-Thumbnail bedienen — Oberflächen mit radikal unterschiedlichen Regeln für Auflösung, Seitenverhältnis-Behandlung und Hintergrundkomposition, von denen keine eine einzige ideale Ausgangsauflösung teilt. Historisch lieferten Websites deshalb entweder nur eine niedrig aufgelöste `favicon.ico`, die überall unscharf aussah, oder ließen mobile und PWA-Icons ganz weg. Jede Größe aus einer Quelle zu generieren und zusammenzupacken ist es, was ein Icon überall gleichzeitig scharf und korrekt aussehen lässt, statt an einer Stelle akzeptabel und an den anderen falsch.

Das Web-Manifest existiert aus einem verwandten, aber anderen Grund: Es ist das, was Android- und Chromium-Desktop-Browsern erlaubt, „App installieren" anzubieten und die Website nach der Installation mit eigenem Icon und Namen anzuzeigen, statt als Lesezeichen mit generischem Globus-Icon. Ein Favicon und ein PWA-Icon werden von unterschiedlichen Teilen der Plattform verwaltet, weshalb hier sowohl ein einfacher Icon-Satz als auch ein Manifest zusammen generiert werden.

Der Browser-Tab ist die kleinste und am häufigsten gesehene Darstellung eines Favicons, und er ist gnadenlos: Bei 16×16 Pixeln ist Platz für eine markante Form, höchstens zwei, und praktisch kein Platz für Text über einen einzelnen Buchstaben oder eine Zahl hinaus. Ein komplettes Logo mit mehreren Elementen, das bei normaler Größe elegant wirkt, wird bei Tab-Größe normalerweise zu einem undeutlichen Fleck, weil das Detail, das es erkennbar macht, schlicht keine verbleibenden Pixel zum Rendern hat.

Die zuverlässigsten Ausgangsbilder sind ein einzelnes Glyph, Monogramm oder einfaches Icon auf glattem oder transparentem Hintergrund, idealerweise mit 512×512 oder größer bereitgestellt, damit jede generierte Größe eine saubere Verkleinerung statt einer Vergrößerung ist. Ist das vorhandene Logo komplex, ist es meist besser, ein einzelnes erkennbares Element daraus zu extrahieren oder zu vereinfachen — ein Monogramm, ein Symbol, eine markante Form — statt das gesamte Set zu verkleinern und zu hoffen, dass es kohärent bleibt.

Ein Favicon mit transparentem Hintergrund passt sauber sowohl zu hellen als auch dunklen Browser-Tab-Themes, was die richtige Wahl ist, solange das Design selbst keinen braucht. Manche Ziele können Transparenz jedoch überhaupt nicht nutzen — das Apple-Touch-Icon insbesondere wird von iOS über einem Volltonhintergrund zusammengesetzt, bevor die eigene abgerundete-Ecken-Maske angewendet wird, daher erzeugt eine transparente Quelle ein über Schwarz schwebendes Logo statt des sauberen Icons, das jede andere iOS-App hat. Eine Volltonfarbe im Voraus zu wählen, abgestimmt auf eine Markenfarbe statt standardmäßig weiß oder schwarz zu belassen, ist es, was das Icon auf jeder Oberfläche bewusst statt nur auf manchen korrekt wirken lässt.