Ein Favicon erstellen, das auch auf Retina-Displays scharf bleibt

Lange reichte eine einzige kleine favicon.ico für das ganze Web. Das ist seit Jahren vorbei, und dass sie trotzdem oft als ausreichend gilt, ist der Grund für so viele unscharfe Icons.

Von PulsarKit · Veröffentlicht am 8. September 2026 · Aktualisiert am 16. Oktober 2026

Eine kleine Icon-Datei konnte nie alle Bildschirme abdecken

Ein Browser-Tab, eine Verknüpfung auf dem Home-Bildschirm eines Smartphones und ein App-Icon auf einem Laptop-Display mit hoher Pixeldichte verlangen jeweils eine andere Pixelgröße. Ein einzelnes kleines Icon, das für all das gestreckt wird, sieht an einer dieser Stellen scharf aus und überall sonst weich. Die klassische favicon.ico, die Browser noch immer im Stammverzeichnis einer Website abrufen, gehört weiterhin zur Lösung. Sie wurde aber für ein Web gemacht, in dem Bildschirme eine weit geringere Auflösung hatten als heute, und sie war nie als einzige beteiligte Datei gedacht.

Warum ein vollständiger Icon-Satz so viele einzelne Dateien hat

Ein ordentlicher Satz, wie ihn der „Favicon-Generator“ aus einem einzigen Ausgangsbild erzeugt, deckt mehrere Zwecke zugleich ab und nicht bloß mehrere Größen für denselben Zweck. Es gibt PNG-Dateien mit 16 und 32 Pixeln für Browser-Tabs bei normaler und hoher Pixeldichte und ein Icon mit 180 Pixeln für den Fall, dass jemand eine Website zum Home-Bildschirm eines iPhones hinzufügt. Dazu kommen Icons mit 192 und 512 Pixeln, auf die das Manifest einer Progressive Web App verweisen muss, bevor sich die App überhaupt installieren lässt. Jede Größe ist da, weil irgendetwas genau diese Größe anfordert. Redundanz um ihrer selbst willen ist das nicht. Lassen Sie eine davon weg, greift genau diese eine Stelle auf einen unschärferen Ersatz zurück – oder auf gar nichts.

Die eine Datei, die absichtlich nicht transparent bleiben darf

Fügt jemand eine Website auf dem Smartphone zum Home-Bildschirm hinzu, legt iOS ein transparentes Icon nicht über einen sinnvollen Hintergrund. Es füllt jede transparente Fläche mit sattem Schwarz, und so wird aus einem sauberen Logo auf transparentem Hintergrund eine dunkle, unschöne Kachel, sobald es auf dem Home-Bildschirm landet. Beim Icon für genau diese Stelle muss die Transparenz deshalb vorab und ganz bewusst mit einer echten Hintergrundfarbe gefüllt werden, statt wie bei den anderen Größen des Satzes erhalten zu bleiben. Alle übrigen Icons können ihre Transparenz überall dort behalten, wo das Ausgangsbild welche hat, denn ein Browser-Tab oder eine Desktop-Verknüpfung stellt sie korrekt dar.

Warum eine Vektorvorlage ein schärferes Icon mit 16 Pixeln ergibt

Ein Logo, das als SVG vorliegt (ein flaches Bitmap-Logo lässt sich mit „PNG in SVG“ vektorisieren), kann für jede Zielgröße frisch aus seinen Vektorformen gerendert werden, statt einmal groß erzeugt und dann für jede kleinere Variante immer wieder verkleinert zu werden. Am deutlichsten zeigt sich der Unterschied bei der kleinsten Größe des Satzes. Ein Logo, das aus einer einzigen großen Master-Bitmap herunterskaliert wird, zerfällt bei 16 Pixeln gern zu Pixelbrei, und dünne Linien und feine Details verschwinden. Eine Version, die in derselben kleinen Größe aus den Vektorpfaden gerendert wird, behält klare Linien, weil sie nie ein größeres Bild war, das geschrumpft wurde. Sie ist von Anfang an in dieser Größe gezeichnet worden. Deshalb gehört auch ein einzelnes Icon, das Sie selbst rendern, in „SVG in PNG“ mit exakten Pixelmaßen und nicht in ein Tool zum Skalieren von Bildern. Bei einem Logo mit feinem Schriftzug oder dünner Kontur entscheidet das darüber, ob Sie das Icon in der Tab-Leiste wiedererkennen oder nur einen grauen Fleck sehen.

Das maskierbare Icon gibt es, weil Android die Form eines Icons ignoriert

Android schneidet das Icon einer installierten App auf die Form zu, die das jeweilige Gerät oder der Launcher gewählt hat: einen Kreis, ein abgerundetes Quadrat, ein Squircle. Das geschieht unabhängig davon, in welcher Form das Icon gezeichnet wurde. Ein gewöhnliches quadratisches Icon kann deshalb direkt an den Rändern wichtigen Inhalt verlieren, und es hängt allein davon ab, welche Form gerade angewendet wird. Ein maskierbares Icon umgeht dieses Problem, indem es seinen gesamten wichtigen Inhalt ungefähr in den mittleren achtzig Prozent des Bildes hält. So bleibt an jedem Rand ein Sicherheitsabstand, den jede beliebige Form wegschneiden kann, ohne dass etwas verloren geht, das für das Design zählt.

Typische Fehler: eine zu kleine Vorlage und ein Satz, der nie verlinkt wird

Ein unscharfer Icon-Satz entsteht selten im Generator. Jede Größe wird aus einer Mastergrafik mit 512 Pixeln gebaut. Eine kleinere Vorlage wird also gestreckt, bis sie diese Größe erreicht, und eine Vorlage unter etwa 260 Pixeln muss auf das Doppelte oder mehr aufgeblasen werden – die großen Icons wirken dann weich. Beginnen Sie mit mindestens 512 × 512 Pixeln, besser noch mit einer SVG-Datei; eine Vorlage unter 32 Pixeln wird gleich abgelehnt. Die zweite Entscheidung ist, wie ein nicht quadratisches Logo quadratisch wird: Ein Zuschnitt aus der Mitte hält das Logo groß, kann aber einen breiten Schriftzug abschneiden. Wird dagegen das ganze Bild eingepasst und werden die Seiten mit einer Farbe aufgefüllt, bleibt alles sichtbar, dafür wird das Logo kleiner. Ist ein Logo viel breiter als hoch, ist eine quadratische Version nur mit der Bildmarke meist die bessere Vorlage als die vollständige Wort-Bild-Marke. Der dritte Fehler passiert nach dem Erzeugen. Die acht Dateien, mit dem maskierbaren Icon neun, gehören ins Stammverzeichnis der Website, und die Tags aus head-snippet.html gehören in den head jeder Seite. Liegen die Dateien in einem Unterordner, passen Sie die href-Werte im Snippet entsprechend an, sonst zeigen die Tags auf Dateien, die es dort nicht gibt. Prüfen Sie zum Schluss das Icon mit 16 Pixeln in einem echten Browser-Tab statt in einem Bildbetrachter: In dieser Größe wird eine dünne Kontur oder ein Schriftzug zum grauen Fleck, und die Lösung ist ein einfacheres Logo, kein schärferer Export.

Tools aus diesem Artikel

Favicon-GeneratorMachen Sie aus einem Logo den kompletten Favicon-Satz: alle PNG-Größen, eine ICO-Datei mit mehreren Größen, ein Manifest und die HTML-Tags für den Head-Bereich.

PNG in SVGVektorisieren Sie eine PNG-Datei im Browser zu einer skalierbaren SVG-Datei. Das eignet sich für Logos und flächige Icons mit wenigen Farben, nicht für Fotos.

SVG in PNGRendern Sie SVG-Dateien direkt im Browser als PNG – in beliebigem Maßstab oder in exakter Pixelgröße. Skripte und externe Links werden entfernt, bevor irgendetwas gezeichnet wird.