Frisch notiert!
Die neusten Artikel aus unserem Blog.

Schöne, retina-optimierte Favicons erstellen

von Adrian Lambertz / Zuletzt aktualisiert am 29/08/2016 / Netzwelt / Webdesign / 2
Die Tage der hässlichen, verpixelten Favicons sind schon lange vorbei. In Zeiten von Retina-Bildschirmen, HiDPI Modi und Monster-Auflösungen sind knackscharfe, schöne Grafiken ein Muss. In diesem Artikel lest ihr, wie ihr ganz einfach hochauflösende und scharfe Favicons selber erstellt und worauf ihr achten müsst.

Für alle, die sich jetzt fragen, was ein Favicon ist: es ist eine kleine Grafik, die im Kopfbereich des Browsers neben der URL oder in einem geöffneten Tab einer Website angezeigt wird. Favicons werden ebenfalls beim Abspeichern einer Seite als Lesezeichen mit abgespeichert und angezeigt.

Pixelbar Favicon - knackscharf und retinaoptimiert.

Ein paar Zusatzinfos

Favicons werden im .ICO Format gespeichert. Dieses Format ist ein Container in dem mehrere Bilder abgespeichert werden können. So kann z.B. in einer .ICO Datei dasselbe Icon in mehreren Größen, z.B. 16×16, 32×32 und 64×64 Pixeln abgespeichert werden.

Da Favicons immer in 16×16 Pixeln angezeigt werden, benötigen wir also zwei Bildgrößen: 16×16 und 32×32 Pixel (für Retina Bildschirme). Die „best practice“ wäre (damals zumindest) gewesen: eine .ICO Datei mit den darin befindlichen 2 Bildgrößen. Die Browser laden also das .ICO File und zeigen dann die geeignete Größe an.

Allerdings finde ich, dass diese Methode keine wirklichen Vorteile bringt, da jeder populäre Browser mit den 32×32 Icons zurechtkommt und sie bei Bedarf einfach runterskaliert. Aus diesem Grunde ist es schlicht und einfach garnicht nötig, sich die Arbeit damit zu machen, mehrere Icongrößen zu erstellen und diese in eine .ICO Datei zu packen.

Das Favicon erstellen

Die Maße stehen nun also fest: 32×32 Pixel. Erstellt einfach ein neues Dokument mit diesen Maßen in dem Bildbearbeitungsprogramm eurer Wahl. Wie euer neues schickes Favicon aussehen soll ist natürlich euch selber überlassen.

Wichtig ist nun das Abspeichern. Da z.B. Photoshop von Haus aus keine Dateien im .ICO Format abspeichern kann, müssen wir hier entweder ein Plugin installieren oder einen kleinen Umweg gehen.

Wir gehen hier einfach den Umweg (da dieser mit allen Bildbearbeitungsprogrammen einsetzbar ist) und speichern das Favicon als .PNG Datei.

Wir nutzen bewusst .PNG, da aktuelle Browser (ausser der Internet Explorer …) ebenfalls .PNG Dateien als Favicon unterstützen und da dieses Dateiformat auch Transparenz unterstützt.

Sobald Ihr euer Favicon gespeichert habt, müssen wir es in eine .ICO Datei umwandeln. Dafür nutzen wir den Onlinedienst: convertico.com 

convertICO - aus .PNG saubere .ICO Dateien für Favicons erstellen.

Auf convertICO könnt ihr eure .PNG Datei in eine .ICO Datei umwandeln und direkt abspeichern. Ladet dazu einfach eure Quelldatei hoch und ladet dann die fertige Datei herunter.

So einfach ist das. Schon habt Ihr euer retina-optimiertes Favicon, welches in jedem Browser korrekt angezeigt wird. Ohne viel Aufwand.

Das Favicon auf die Website einfügen

Damit das Favicon nun auf der Website genutzt werden kann, muss es 1. hochgeladen werden und 2. in den <head> Bereich der Website über einen <link> Tag eingefügt werden:

<link rel="shortcut icon" href="/pfad/zum/favicon.ico">

Das war’s schon. Euer Favicon ist nun eingebettet.

Fazit

Scharfe Favicons für jeden Browser, egal ob retina oder nicht. Sie sind schnell und einfach erstellt. Man benötigt keine komplizierten Online-Editoren wie favicon.cc, die pixelige Favicons generieren sowie Zeit und Nerven kosten.


Adrian Lambertz

Seit 2010 bin ich nun schon bei Pixelbar mit dabei. Zuerst als Auszubildender und nach erfolgreichem Abschluss meiner Ausbildung als Frontend-Entwickler.

Ohne Musik und Kaffee kann ich nicht leben, daher konsumiere ich beides während der Arbeit praktisch durchgehend :).

Daneben liebe ich WordPress – darauf habe ich mich spezialisiert.

Weitere Beiträge von adrian anzeigen

2 Kommentare

    • Hallo Max, ein Umbenennen von .png in .ico im Finder konvertiert die Datei ja nicht. Man benennt sie halt um. Das Dateiformat bleibt aber „im Hintergrund“ identisch. Ein Umbenennen im Finder ist in diesem Sinne ein „Fake“. Man ändert nur Meta-Daten, der Dateityp bleibt davon unangetastet.

Hinterlasse eine Antwort