Schöne, retina-optimierte Favicons erstellen
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.
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
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.
Hallo,
danke für den Beitrag. Frage: Was ist der Vorteil von Convertico.com gegenüber dem Umbennenen der .png in .ico im Finder?
Gruss aus Zürich
Max
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.
Danke – sehr guter und inbesondere hilfreicher Artikel. Andere meinen ja man braucht noch Apple-touch Icon etc. – Ist das dann Unsinn?
Ist wirklich lustig – da wird ganz primitiv angefangen und für jeden Laien erklärt, was ein Favicon ist und am Ende steht dann schnell – es muss nur hochgeladen werden und in den Head Bereich der Webseite in eine Link Tag eingefügt werden. Das, was am wichtigsten wäre, wie man das macht, wird einfach nicht erklärt und damit hat diese Anleitung wieder ein Fachidiot verfasst, der den Wald vor Bäumen nicht sah. Und natürlich wird dieser Verfasser den Fehler wieder nicht bei sich suchen.
Hallo Stefan,
gerne erhalte ich von dir eine detaillierte Erklärung, wie man das Favicon in die jeweiligen CMS, statischen Websites oder sonst selbstprogrammierten Seiten der Leser einsetzt. Bitte lass kein Detail aus.
Da mir die Kraft des Hellsehens fehlt und ich leider auch nicht die Zeit und Muße dazu habe, alles zu berücksichtigen, habe ich diesen Schritt nämlich auf das nötigste reduziert. Tut mir Leid, dass ich deinen Ansprüchen nicht gerecht werden konnte.
Schicke sie bitte an adrian@pixelbar.be, das ist meine E-Mail Adresse. Ich bin nämlich der Fachidiot der diesen Artikel geschrieben hat.
Viele Grüße,
Adrian
Super Tipp, vielen Dank :-)
Vielen Dank! Für mich war der Artikel genau richtig: Ein bisschen Hintergrund/Zusatzinfos, dann knackig und kurz die wichtigsten Schritte erklärt, dazu funktionierende links zu nützlichen tools. Besser gehts nicht.
Ich bin immer wieder dankbar und beeindruckt, dass es Fachleute (keine Fachidioten!) gibt, die ihr Wissen so bereitwillig teilen! Super, vielen Dank!
Vielen Dank, Anne :-) Das hört man sehr gerne!
Alles ausreichend und genau beschrieben!
Entgegen dem unnötigen Gemecker von Stefan Schmidt, finde ich den Artikel sehr gelungen. Wer googlen kann, findet sicherlich andere Seiten, die genauen Aufschluss über die Einbindung von Favicons geben ;)
Eigentlicher Grund für den Kommentar: Teaser-Bild.
Danke, es hat mir den morgen versüßt. Erst auf den zweiten – dritten Blick konnte ich erkennen worum es sich handelt ;)
LG
„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.“ Das ist nicht ganz richtig: Es stimmt zwar, dass dies funktioniert, allerdings sieht es weit hässlicher aus wenn der Browser ein 32×32-Icon einfach in 16×16 anzeigt, als wenn dies vorher in Photoshop mit dem entsprechenden Filter verkleinert und dabei interpoliert wurde. Der Browser lässt nur jede zweite Pixelreihe/-zeile weg beim „kleiner anzeigen“, was oft zu unschönen Treppchen im Icon führt. Warum also auf das 16×16 im .ico verzichten? Das ist von der Datenrate absolut nicht relevant die paar Bytes. Just sayin, appropo „Professionalität“.
Ich bin zwar kein Profi, habe aber seit gut 20 Jahren einen Online Shop. Aktuell bewirtschafte ich diesen mit PrestaShop 1.7. Früher wurde bei der Speicherung als Homebutton die schon hinterlegten Favicons als .ico oder .png übernommen. Neu kann man diese standardmässig gar nicht mehr anders als wie von Dir erwähnt als .ico in 32 dpi hinerlegen. Nur wird aber beim speichern als Homeicon bei meinen Apple Geräten nicht mehr das Favicon sondern ein „Mini Printscreen“ als Icon angezeigt. Liegt das nun an meiner Shop-Software oder an Apple?