Wie Du ein Mobile Touch Icon erstellst und einbindest

Bekanntermaßen wächst die Besucherzahl über mobile Endgeräte immer weiter und weiter, das Internet ist schon lange nicht mehr auf den heimischen PC beschränkt. Unterwegs schnell die neuesten Nachrichten lesen oder eben kurz die Mitteilungen seiner Freunde auf Facebook checken.

Auch zur direkten Informationsgewinnung wird das Smart Phone und Co gerne genutzt, da möchte man doch als Webmaster oder Blogger mit seiner Website auch mobil gut aussehen. Und das beginnt mit einem Mobile Touch Icon. Wer noch keines hat, der sollte sich ans Werk machen.

Wie Du ein solches Mobile Touch Icon erstellst und auf deiner Website oder deinem Blog einbindest zeige ich dir in diesem Artikel.

Das Mobile Touch Icon erstellen

Für das Design des Icons musst Du nur wenig beachten. Die Icons sehen zwar immer sehr aufwendig aus mit den runden Ecken, dem Schattenwurf und ihrem Glosseffekt, aber darum musst Du dich gar nicht kümmern. Diese Effekte werden zu deinem Icon auf dem Smart Phone automatisch hinzugefügt und es erscheint in demselben Stil wie die übrigen Icons.

Du musst einfach ein Bild in der Größe von 144 x 144 Pixel im .png Format für dein Icon anfertigen.

Für die Reeder App des iPad sollte das Icon die Maße von 241 x 241 Pixel haben, damit es auch dort wirklich gut aussieht.

Dein fertiges Icon musst Du zum Schluss nur noch als PNG mit dem Namen apple-touch-icon in das Rootverzeichnis auf deinem Webserver abspeichern.

So sieht zum Beispiel das Mobile Touch Icon für Blogsheet im Rohzustand aus:

Mobile Touch Icon

Das Icon verlinken

Die Icon-Datei verlinkst Du anschließend mit unten stehendem Code im Head-Bereich deiner Website. Wenn Du einen WordPress Blog betreibst, dann muss dieser Code in die header.php eingetragen werden. Dazu gehe ins Dashboard deiner WordPress Installation, die header.php findest Du unter [Design] -> [Editor] und dann in der Spalte auf der rechten Seite den Link Kopfzeile wählen.

Das Standard Icon

Hier der Code für das Standard-Icon mit Gloss-Effekt und runden Ecken:


Das Precomposed Icon

Falls dir die automatischen Glosseffekte der Touch Icons nicht gefallen oder der Stil nicht zu deinem Iconbild passt, kannst Du alternativ das Icon auch ohne diesen Glosseffekt einbinden. Die Ecken werden dabei nach wie vor abgerundet und auch der Schattenwurf bleibt erhalten. Diese Möglichkeit den Glosseffekt auszuschalten nennt sich precomposed und der Code dafür lautet:


Warum Du ein Mobile Touch Icon nutzen solltest

Hast Du kein eigenes Mobile Touch Icon, so wird einfach ein Default-Icon genutzt oder auch auf das Favicon zurückgegriffen. Jetzt magst Du dir sagen, dass das doch ganz in Ordnung ist, gerade wenn man ein Favicon eingebunden hat, das ist ja schon individuell gestaltet. Bedenke aber, dass das Favicon viel kleiner ist, nämlich nur 16 x 16 bPixel groß. Diese Maße reichen nicht annähernd an die Maße eines Icons heran, dementsprechend wird das Bildchen dann auch aussehen.

Für dich als Selbständiger sollte es erstrebenswert sein, deine eigene Marke zu etablieren. Ein umfassendes Corporate Design ist ein wichtiger Aspekt, um dieses Ziel zu erreichen. Das Corporate Design endet nicht mit dem Logo und der Gestaltung der Website.

Es bezieht alle die vielen Kleinigkeiten mit ein, die man schnell mal übersehen kann, wie das Favicon oder eben ein Mobile Touch Icon. Dadurch, dass immer mehr von unterwegs aus mit Smart Phones ins Internet gegangen wird, hat man auch hier mit dem passenden Icon einen hohen Wiedererkennungwert geschaffen. Auch für Blogger ist dieser Wiedererkennungswert nur von Vorteil und in der Regel genauso wichtig wie für ein Unternehmen.

Fazit:

Wie Du siehst, ein eigenes Mobile Touch Icon ist kein Hexenwerk und relativ einfach und schnell zu erstellen. Heutzutage ist es wichtig jede Möglichkeit zu nutzen, um im Dschungel des Internets in jeder erdenklichen Situation erkannt zu werden.
Also ran ans Werk, erstelle dein eigenes Mobile Touch Icon. Ich wünsche dir viel Spass dabei 🙂

About The Author

Diana Ludwig

Webdesignerin, Pinselschwingerin, Bloggerin und Studentin der Medieninformatik. Mein Steckenpferd ist das freie Open Source 3D Programm Blender, über das ich auf Blender-Tutorial schreibe. Du findest mich auch auf Google+ oder abonniere unseren RSS-Feed.

2 Comments

  • Jonas

    23. Mai 2012

    Cooler Tipp, das kannte ich noch nicht. Dann werde ich mich gleich mal ans Werk machen, ist ja wirklich kein Akt.

  • Urs

    23. September 2014

    Danke! Gut und einfach erklärt. In zwei Minuten erledigt gewesen!