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 / 5
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

5 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.

  1. Stefan Schmidt

    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

Hinterlasse eine Antwort