Favicon und Apple Touch Icon (Webclip-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.

favicon

Auch das Webclip-Icon (Apple Touch Icon) spielt eine immer größere Rolle. Zu sehen ist es für die Benutzer von Apple iPhone, iPod touch und iPad-Geräten, wenn die Website dem Home-Bildschirm hinzugefügt wird.

Zum Home-Bildschirm

Apple Touch Icon
Das Apple Touch Icon

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

Die Datei, die das Favicon darstellt, hat üblicherweise den Namen favicon.ico. Das Grafik-Format des Favicon ist zwar relativ frei wählbar (auch GIF oder PNG sind möglich), aber am besten wählt man dafür das ICO-Format, denn nur das wird derzeit von allen aktuellen Browsern für diesen Zweck erkannt. ICO ist eigentlich ein Container für Bilddaten, in dem mehrere Bilder liegen können. Schwach animierte Icons sind daher möglich.

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. 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. Es kann aber auch nicht schaden, den Ort explizit mit der folgenden Anweisung der Startdatei Ihrer Website im <head>-Bereich anzugeben (speziell, wenn Sie die Datei doch woanders abgelegt haben):

Im Fall von WordPress empfehlen wir, das Icon in den Themenordner zu legen, und dort am besten in einen Unterordner für Bilder. Angenommen, der gesamte Pfad zum Bild lautet nun:

Um diese Datei als Favicon nutzbar zu machen, öffnen Sie die Datei „Kopfzeile“ (header.php) Ihres Themas und setzen die folgende Angabe irgendwo in den <head>-Bereich, also zwischen <head> und </head>:

Zum Wikipedia-Artikel über das Favicon

Apple Touch Icon / WebClip-Icon

Ähnliches passiert auch beim Apple Touch Icon. Erstellen Sie quadratische Dateien im PNG-Format in den Größen 57×57, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152 Pixel. Sie müssen sich nicht selbst Effekte kümmern, die besorgen die Apple-Geräte von alleine.

Geben Sie den Dateien die Namen apple-touch-icon.png (57x57px), apple-touch-icon_72x72.png (72x72px), apple-touch-icon_76x76.png (76x76px)  und so weiter. Legen Sie diese Dateien in das oberste Verzeichnis Ihrer Website.

Wenn Sie auch Android Smartphones beglücken möchten, kopieren Sie die Datei apple-touch-icon_152x152.png und geben der Kopie den Namen apple-touch-icon-precompressed.png

Fügen Sie die folgenden Anweisungen der Startdatei Ihrer Website im <head>-Bereich hinzu:

WordPress-Benutzer legen diese Dateien wieder am besten in das Bildverzeichnis ihres Themas (/images/) und binden dann das neue Icon ähnlich dem Favicon mit folgender Anweisung in der Datei header.php ein:

Erfreulicherweise hat intervice Medien e.K. hierzu einen Icon Generator programmiert, der die mühsame Bildbearbeitung erspart.

Viel Vergnügen!

Ähnliche Artikel:

15 Antworten auf „Favicon und Apple Touch Icon (Webclip-Icon) in Websites nutzen“

  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

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