Tipps und Tools rund um WordPress, Google und mehr
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.
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.
- https://www.websiteplanet.com/de/webtools/favicon-generator/
- https://tools.dynamicdrive.com/favicon/
- https://www.favicon-generator.org/
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.
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".
danke für die anleitung! cool!
Warum 129×129 Pixel ?
Keine Ahnung, das war mal so angeführt. Mittlerweile sind andere Größen en vogue:
Insofern scheinen sich die 129×129 erübrigt zu haben. Ich bessere es aus. Danke für den Hinweis.
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.
@NetHawk Danke für den Hinweis, hab’s ausgebessert.
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
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!
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
Plugin haben wir nicht gefunden, aber vielleicht hilft das: http://cubiq.org/add-to-home-screen
Hier wohl die umfangreichste Anleitung zum Thema Favicons:
http://www.jonathantneal.com/blog/understand-the-favicon/
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?
Wenn man im
der HTML-Datei die Lage des Favicons angibt, bleiben die error-Logs unbehelligt.Zu Android: vielleicht hilft dieser Artikel? http://favicons.info/apple-touch-icon.html
PS: seit iOS7 verzichtet ja Apple auf Glanz und runde Ecken.
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.
Dazu fehlt mir leider völlig die Zeit.
Der Artikel von http://favicons.info/apple-touch-icon.html ist nicht ausreichend gewesen? So wie ich das verstehe, liegen letzten Endes ziemlich viel Icons am Server, darunter auch eigenes mit -precomposed für Android.
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.