Eigenes Logo auf dem iPad, iPhone oder iPod touch

5. Juli 2010 Kategorie: Internet, iOS, geschrieben von: caschy

So, mal wieder ein Beitrag aus der sehr beliebten Kategorie der Apfelgeräte ;) Ich wurde vor Urzeiten mal von einem Leser angeschrieben, der hatte sich dieses Blog auf den Startscreen seines iPhones gepackt. Er fragte, warum es denn kein eigenes Logo hätte. Mangels iDevice konnte ich den ganzen Spaß natürlich nie testen…

Die Lösung ist eigentlich relativ simpel: man erstellt ein mindestens 120 x 120 Pixel großes Logo und speichert dies unter dem Namen apple-touch-icon.png auf dem Webserver ab.

Dann bindet man den Pfad zum Icon in seiner Webseite ein (z.B. dort, wo ihr auch euer Favicon eingetragen habt). Bei meiner WordPress-Installation ist dies die header.php. So wird eingebunden:

<link rel="apple-touch-icon" href="Dateipfad-des-Logos/apple-touch-icon.png" />

Danach erscheint euer eigenes Logo, wenn jemand auf iPad, iPhone oder iPod Touch eure Seite auf dem Home-Bildschirm legen will. Sieht auf jeden Fall besser aus als der Standard-Einheitsbrei. Danke an den Early Adopter für den Hinweis!

Über den Autor: caschy
Dortmunder im Norden. Blogger, Freund gepflegter Technik, BVB-Maniac und Hausmeister dieses Blogs. Auch zu finden bei Twitter, Google+, Facebook, XING und YouTube.

28 Kommentare

Webmaster 5. Juli 2010 um 10:19 Uhr

-.- Wieso benutzt das iDevice den nicht wenigstens das Favicon? Android macht das auch…

Immer dieser Proprietäre mist… “apple-touch-icon” da hätte man auch was universelleres nehmen können.

Naja, danke für den Tipp!

Stefko (twitter ) 5. Juli 2010 um 10:41 Uhr

@webmaster: wahrscheinlich weil ein Favicon u.U. nur 16×16 Pixel gross ist und das ziemlich bescheiden aussehen würde.

NicoAppel (twitter ) 5. Juli 2010 um 10:49 Uhr

Cooler Beitrag, caschy!
Favicon wusste ich, aber das ist ein wertvoller Tipp. Werde ich mal ins Auge fassen, wenn ich meine Seite für Mobilgeräte optimiere. Apropos, hat da jemand Erfahrung mit den entsprechenden WP-Plugins, die dabei helfen, dass die Seite für mobile Browser optimiert dargestellt wird?

JürgenHugo (twitter ) 5. Juli 2010 um 11:08 Uhr

@Caschy:

Ich hätt das “Deich-City” Logo auch gern. Für rein private Zwecke auf dem Comp. Gibste mir das? Hmm?

Wobei natürlich größer als 120×120 besser ist – viele von den “Apple-Quadraten” hab ich auch schon als PNG in 256×256. :-P

Bierfreund (twitter ) 5. Juli 2010 um 11:22 Uhr

@JürgenHugo:
Das 120x120px Icon kann man sich aus dem Quelltext ziehen:
http://www.stadt-bremerhaven.d.....h-icon.png

Flo 5. Juli 2010 um 11:25 Uhr

@JürgenHugo
http://www.stadt-bremerhaven.d.....h-icon.png :D

@Caschy
schön wäre auch an Fast Dial zu denken und auf http://userlogos.org/ eine entsprechende Grafik zu platzieren ;)

Marc 5. Juli 2010 um 11:29 Uhr

Super finde ich auch die auf Mobilgeräte optimierte Ansicht durch das WP-Plugin! Top zu lesen! Danke!

Thomas K. 5. Juli 2010 um 11:57 Uhr

@Nico Appel
Das Plugin für WP heißt: WPtouch iPhone Theme. Der Hersteller sagt:
A plugin which formats your site with a mobile theme for the Apple iPhone / iPod touch, Google Android, Palm Pre and other touch-based smartphones.
Gibt es in der kolo Version und als Pro fürn paar Mäuse. Bin mit der kolo Version total zufrieden.
http://www.bravenewcode.com/products/wptouch-pro/

Da läßt sich dann auch das Logo für die Mobile Seite direkt einbinden.

@Caschy – Danke für den Tipp. Habe mich schon gefragt warum das Favicon beim speichern der original Page nicht übernommen wird! :-)

JürgenHugo (twitter ) 5. Juli 2010 um 11:59 Uhr

Danke euch schon mal – das 120×120 hab ich jetzt. Es hat aber nich so schön runde Kanten, sondern ist ganz “eckich”, grins. :-P Da muß ich noch irgenswie was fummeln, mal sehen.

Mit Graphik-Bearbeitung hab ich das nich so – alle meine weiterführenden Versuche in dieser Richtung sind bislang an meiner Ungeduld/Unvemögen gescheitert. Tja. :mrgreen:

NicoAppel (twitter ) 5. Juli 2010 um 12:40 Uhr

@Thomas K.: Das werde ich mal probieren. Danke!

Dominik 5. Juli 2010 um 13:33 Uhr

Das Icon hat übrigens den coolen Nebeneffekt, dass es nun auch in Reeder (Extrem gute Google Reader App am iPad & iPhone) angezeigt wird — und zwar schön groß im Gegensatz zum mickrigen Favicon :-)

Tim (twitter ) 5. Juli 2010 um 14:08 Uhr

Hatte ich auch gelesen und gleich umgesetzt. Vor allem im Reeder sieht es klasse aus.

ad (twitter ) 5. Juli 2010 um 14:16 Uhr

Die Einbindung im Quelltext ist – ebenso wie beim Favicon – nur dann nötig, wenn es nicht im Root-Verzeichnis liegt! ;)

@webmaster: Hauptsache mal gegen Apple gebasht – auch wenn man keine Ahnung hat, was? Mann, Mann…

JürgenHugo (twitter ) 5. Juli 2010 um 15:27 Uhr

“Reeder” managen Schiffe, mit einem “Reader” kann man was lesen! So ist das. :mrgreen: Wenn ich mich vertipp, könnt ihr aber auch ruhig meckern, grins. :-P

leosmutter 5. Juli 2010 um 16:09 Uhr

Reader ist anscheinend nicht apple genug und deswegen heißt es als App halt Reeder…

Mit dem Icon werde ich gleich mal spielen. Habe zwar nur ein Iphone, aber mal schauen…

JürgenHugo (twitter ) 5. Juli 2010 um 17:16 Uhr

@ad:

Gut, Reeder hast du voll richtig geschrieben – so wie Apple halt. Das ist sicher eine ganz tolle App – für das “ei”Phone. Das kann ich ja dann auch “individuell” schreiben, oder? :mrgreen:

Matthias (twitter ) 5. Juli 2010 um 23:15 Uhr

Du Caschy leider geht das icon auf dem iPhone nicht ;o(

Thomas K. 6. Juli 2010 um 08:44 Uhr

@Matthias
Ja, witziger Weise hat es bei mir bisher einmal geklappt. Danach nicht wieder. Es muss aber klappen, mit der Spricherung von Caschys Site hat es auch hingehauen.

@caschy
Ne Idee?

Jens (twitter ) 6. Juli 2010 um 10:04 Uhr

Trackback ist wohl nicht angekommen … http://www.jens-stratmann.de/e.....2010/07/05

Gruß,
Jens

Jan 6. Juli 2010 um 10:34 Uhr

Danke für den Hinweis Caschy. Ich hab mich schon eine Weile gewundert, wieso öfters dieser komische Bildname als nicht gefunden in meinen Logs auftauchte.

Denny (twitter ) 7. Juli 2010 um 14:48 Uhr

Es gibt noch mehr Spielereien, z.B. ein Startup Image: http://developer.apple.com/saf.....51-CH3-SW4

MC Winkel 16. September 2010 um 17:36 Uhr

Klapt auch, wenn man das Ding (ohne zusätzlichen Code irgendwo) einfach im Hauptpfad speichert, wie ich gerade festgestellt habe! :)

Voku (twitter ) 9. November 2010 um 22:58 Uhr

Danke für den Tipp, werde es auch mal in meinem Blog einbauen… :-)



Du willst nichts verpassen?
Neben der E-Mail-Benachrichtigung habt ihr auch die Möglichkeit den Feed dieses Beitrags zu abonnieren. Wer natürlich alles lesen möchte, der sollte den Hauptfeed abonnieren. Alternativ könnt ihr euch via E-Mail über alle neuen Beiträge hier im Blog informieren lassen. Einfach eure E-Mail-Adresse hier eingeben, dann bekommt ihr 1x täglich eine Zusammenstellung.

Deine Meinung ist uns wichtig...

Name*


E-Mail* (wird nicht veröffentlicht)


Webseite


Twitter-Name


Blogverzeichnis - Blog Verzeichnis bloggerei.de