Favicon (Website-Icon) in Websites nutzen

Eine häufig gestellte Frage in Kursen und Workshops rund um die Website-Produktion betrifft die Einrichtung des Favicons (“favorite icon”), wie es in der Adreßzeile von Browsern sichtbar ist bzw. als Symbol der Website in der Lesezeichenliste des Browsers.

Website-Icon im Browser Reiter

Um solche Grafiken für die eigene Website nutzbar zu machen, müssen sie zuerst einmal hergestellt und dann auf den Webserver hochgeladen werden. Eventuell folgt dann noch die Angabe im HTML-Quelltext, wo diese Grafiken am Webserver liegen.

Favicon/Website-Icon

Die Datei, die das Favicon darstellt, sollte nach Standard auch den Namen favicon.ico haben. Das Grafik-Format des Favicon ist mittlerweile frei wählbar (auch GIF oder PNG sind möglich). Schön werden die Ergebnisse, wenn Sie PNG Dateien mit transparentem Hintergrund einsetzen.

Herstellung

Am einfachsten geht es, wenn Sie ein Online-Tool benutzen. Mit manchen Tools können Sie den Inhalt auch gleich selbst zeichnen.

Oder Sie erstellen sich eine quadratische Grafik am eigenen Computer, und lassen diese Datei in eine favicon.ico-Datei umwandeln. Damit erhalten Sie vermutlich ein schöneres Ergebnis.

Ablage

Abgelegt wird das Favicon entweder unter dem Namen favicon.ico im obersten Verzeichnis der Website (z.B. http://de.wikipedia.org/favicon.ico) oder an einem anderen Ort auf der Website, den man dann dem Browser mitteilen muss.

<link rel="icon" type="image/x-icon" href="/unterverzeichnis/favicon.ico">

Wenn Sie die Datei im obersten Verzeichnis der Website ablegen, dann muss nicht extra auch noch der Ort angegeben werden, denn Browser suchen dort von sich aus nach favicon.ico.

Im Fall von WordPress können Sie ganz einfach Ihr Favicon – WordPress sagt dazu auch Website-Icon – im Customizer hochladen.

Website-Icon im Customizer

Zum Wikipedia-Artikel über das Favicon

Für die Weiterempfehlung:

Möchten Sie über neue Artikel und mehr rasch informiert werden?

Dann empfehlen wir Ihnen die Anmeldung zu unserem Newsletter "Online-Marketing News der E-Werkstatt".


Heinz Duschanek
Heinz Duschanek

Heinz Duschanek hat 2003 die Online-Marketing Agentur E-Werkstatt gegründet. Da er vorher auch beim Radio gearbeitet hatte (Radio CD International, Ö1, Ö3), freut er sich jetzt ganz besonders über die Richtung, die das Online-Marketing nimmt. Denn das liefert einen Vorwand dafür, viele elektrischen Geräte und Gadgets rund um Audio und Video anzuschaffen.

Daneben interessiert sich Heinz auch für Tango Argentino (seit 2009), Lindy Hop, Wing-Tsun, Boxen, (Jazz-/Blues-)Gitarre.

15 Kommentare

  1. Im Favicon-Link sollte man das rel-Attribut “shortcut” weglassen. Es existiert im HTML-Standard gar nicht und war mal Microsofts Idee, die sich aber totgelaufen hat. Es reicht also vollkommen link rel="icon" zu schreiben.

  2. Kann man auch automatisch so einen Apple Touch Icon erstellen lassen? Das heißt, ich will, dass der Besucher nur auf einen Knopf drücken muss und schon landet das Icon auf dem IPhone…! Geht das überhaupt? Und wenn ja, wie?
    Vielen Dank

  3. Habe jetzt einen Weg gefunden, da man Lesezeichen in Safari wohl nur per Hand machen kann. Es gibt hier einen Script, mit dem man dem User die “Installation” erleichtert. Sonst hab ich keine bessers Lösung gefunden!

  4. Hallo, ich bin auf der Suche nach einem Plugin für WordPress, welches beim Aufruf eins WordPress Themes auf einem Mobilen Device von Apple im Safari dem Benutzer einen Hinweis gibt das er die Webseite via Apple Touch direkt aufrufen kann.

    Ich habe das schon bei diversen Seiten gesehen und würde das gern auch meinen Kunden zur verfügung stellen.

    Ich hoffe die Fragestellung war verständlich.

    LG Pascal

  5. Ein Favicon würde ich immer ganz oben ablegen, da es dort meist gesucht wird, und wenn es dort nicht zu finden ist, werden die Errorlogs des Servers zugemüllt.

    Ich habe eine Frage zu den Touch Icons, auf die ich keine Antwort finde. Wenn man precomposed nutzt, um auch Androidnutzer anzusprechen, werden bei Apple kein Glanz und keine runden Ecken hinzugefügt. Kann man auch beides parallel nutzen, einmal Icons precomposed, einmal nicht?

  6. Eine Verlinkung via HTML ist natürlich Voraussetzung, sonst kann es gar nicht funktionieren. Dennoch sah ich oft genug in der Vergangenheit, wie sich Clients nicht daran störten und Abfragen auf das Document Root-Verzeichnis machten. Vielleicht ist es heute besser, weiß ich nicht, aber allem Ärger geht man aus dem Weg, indem man das Favicon dort ablegt. Man spart außerdem den Markup der Verlinkung, wenn man sich an diese Konvention hält.

    Das mit iOS 7 ist natürlich relevant. Die Frage ist, wie verbreitet ältere Versionen sind. Kannst Du das recherchieren und den Artiikel aktualisieren oder neu schreiben? Es gibt zwar so einige Anleitungen dazu im Netz, aber alle, die ich bisher fand, sind veraltet oder recht unvollständig. Eine aktuelle Anleitung, die das Thema erschöpfend behandelt, sah ich bisher leider nirgends.

  7. Hatte ich mir ehrlich gesagt noch nicht so genau angesehen, nun aber nachgeholt.

    Wie mir scheint, hat der Autor leider auch nur ein Halbwissen. Was ist zum Beispiel mit der Reihenfolge der Links? Ist sie beliebig, oder brechen manche Clients die Suche ab, wenn sie einen ersten passenden gefunden haben? Trotzdem, besser als nichts, die weiteren Informationen suche ich mir notfalls zusammen, und dann bleibt noch Testen, Testen, Testen.

Schreibe einen Kommentar zu alexanderAntworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert