Die Zeiten ändern sich.
Dieser Beitrag scheint älter als 15 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.
Das Web wird mobiler und Apple hat trägt mit der Einführung des iPhone und iPod touch sicher dazu bei. Allerdings führt Apple damit auch eine neue Möglichkeit der Iconablage ein, denn das Favicon ist nicht von Apple als Idetifizierungs-Icon genutzt worden.
Die Favicons haben sich durchgesetzt und ist einfach und schön, wenn man im Browser etc. die Seite schon an dieser kleinen Spielerei erkennt. Gerrit bemerkt aktuell, dass Kunden und User das Favicon mögen. Nun soll aber auch auf Apples Produkten eine Wiedererkennung mittels Icon funktionieren und deshalb ist es an der Zeit, dass man die Webseite um das WebClip Icon ergänzt. Dazu ist nicht viel Hintergrundwissen nötig und das Bild ist schnell integriert. Im folgenden die wenigen Schritte zum eigenen WebClip Icon.
Zuerst gilt es, ein Icon mit folgenden Vorgaben zu erstellen.
- 57 x 57 Pixel in den Dimensionen
Es wird empfohlen 60 x 60 Pixel zu nutzen, bringt angeblich mehr Schärfe auf das Display
Seit Erscheinen des iPad ist die Größe von 129 x 129 Pixeln empfehlenswert - Speichern als
apple-touch-icon.png - Im Root der Website ablegen (Bei Einsatz von WordPress, dort wo die
wp-config.phpliegt)
Man muss im übrigen sich nicht die Mühe machen, das ganze auch im „Glanzlook“ zu erstellen, denn diesen Effekt bringen Apples Produkte mit, eine einfache Grafik genügt.
Ist das soweit geschehen, dann muss lediglich der Link im head-Abschnitt der Webseite hinterlegt werden. Das rel-Attribut bekommt den Wert apple-touch-icon und wird damit identifiziert.
<link rel="apple-touch-icon" type="image/x-icon" href="apple-touch-icon.png"/>
Hat man WordPress im Einsatz, dann kommt der folgende Syntax in die header.php des verwendeten Themes. Sollte es diese Datei nicht geben, dann in der index.php den head-Abschnitt suchen.
<link rel="apple-touch-icon" type="image/x-icon" href="<?php bloginfo('url'); ?>/apple-touch-icon.png"/>
Das war es schon, ähnlich dem Favicon nur mit einem anderen Attribut im link-Tag.
<link rel="Shortcut Icon" type="image/x-icon" href="<?php bloginfo('url'); ?>/favicon.ico" />
<link rel="apple-touch-icon" type="image/x-icon" href="<?php bloginfo('url'); ?>/apple-touch-icon.png"/>
Hehe, das Tutorial kommt für mich zu spät (wie man an wildbits.de feststellen kann)…
Hauptsächlich verwende ich es wohl selber in Form eines Bookmarklets fürs Backend von WP, denn bekanntlich bloggen ich ja schon mal mobil 😉
Vielen Dank für den Beitrag. Aber was mache ich, wenn ich WordPress MU nutze und für die Unterseiten unterschiedliche Icons nutzen möchte? Die Frage gilt übrigens genauso für das Favicon. Geht da was?
Viele Grüße
Lars
Ja, geht.
Man kann das/die Icon/s auch an anderer Stelle ablegen, Hauptsache die link-Verknüpfung stimmt.
In’s root legt es man nur, für Browser, die mit dem link-Tag bzw. rel-Attribut nix anfangen können.
Danke einmal mehr für eine klare und verständliche Anleitung! (Habe ich natürlich gleich einmal eingbaut) Aber gibt’s denn da irgendwo oder wie im Netz eine Möglichkeit das ganze mal zu testen, so ohne Touch? Es soll da ja tatsächlich Menschen geben, die keinen haben 😉
Beste Grüße
p.
Ich habe auch keinen, Vertauen ist gut und ausreichend. Aber wenn mal ein wenig wartet und sicht, dann findet man sicher einen Online-Tester.
Übrigens kann man auch auf den link-tag verzichten. Wenn die Datei im Root-Verzeichnis liegt und den richtigen Namen trägt finden iPhone und iPod sie von allein. Den link im Head-Element benötigt man nur wenn man ein anderes Touch-Icon auf bestimmten Unterseiten haben möchte. Auch dann sollte die Icons im Root-Verzeichnis ablegen z.B. als
custom-icon.png. Und natürlich den link entsprechend anpassen.Finde ich sehr interessant. Ich frage mich nur, weshalb man 60 Pixel nehmen soll und eben nicht die 57. Bei den 3 Pixeln un der daraus resultierenden, ungeraden prozentualen Skalierung rechne ich hier mit unschärfe, usw.
Weil das Bild verändert/beeinflusst wird. Es werden Rundungen und Glanzeffekt hinzugefügt und dabei aus den 57px interpoliert, mit 60px ist es wohl besser. Ich habe es aber nie geprüft, dazu verweise ich auf Suchen.
Das ist echt cool. Werd das gleich nächste Woche mal ausprobieren und dann mit meinem Touch prüfen 😉
„Übrigens kann man auch auf den link-tag verzichten. Wenn die Datei im Root-Verzeichnis liegt und den richtigen Namen trägt finden iPhone und iPod sie von allein“
-> Das wäre natürlich noch besser, noch weniger Quelltext usw. Werde ich erst ausprobieren ^^
DANKE FÜR DEN BEITRAG =)
Sorry für Doppelpost, aber ich habs ausprobiert ^^
Es geht auch, wenn man nur die Datei „apple-touch-icon.png“ ins Root Verzeichnis legt, wie Matthias schon anmerkte!
Übrigens: Dein Favicon würde glaub ich besser aussehen, wie auf dem oberen Bild (mit der Schrift in der Mitte des Bildes. So sieht das irgendwie ein bisschen komisch aus auf dem Ipod, weil da dann auch 3 mal untereinander bueltge steht. So, wie auf dem Bild mit dem Iphone schauts besser aus, find ich…ist aber Geschmackssache 🙂
Was ist denn daran cool und toll?
1. Gibts schon Favicons, die funktionieren gut und viele Seiten haben sie. Warum wird jetzt ein neuer Apple-Pseudo-Standard gemacht der eigentlich genau das gleiche ist?
2. Warum pfuscht Apple in _meiner_ Grafik rum?
„Man muss im übrigen sich nicht die Mühe machen, das ganze auch im „Glanzlook“ zu erstellen“
kann mir ja mangels iPhone nichtmal ansehen wie das ausschaut. Nun soll ich es a) unterstützen und b) weiß nichtmal, was der Besucher sieht weil Apple irgendwelche Effekte auf mein Design anwendet. Was ist wenn ich selbst einen Glanzeffekt draufmache? Überstrahlt dann alles?
Was ist wenn andere Hersteller das WebClip Icon nutzen? Machen die dann auch Effekte drüber? Sehen die genauso aus? Garantiert nicht. Wird dann überall was anderes.
Back to 1995 – danke Apple.
Nettes Tutorial. Gleich gebookmarkt und werde es mal, wenn ich etwas mehr Zeit habe probieren.
So, leider etwas (sehr) spät, da die Kommentare ja gesperrt waren … 😉
Ich habe dein Webclip mal bei mir auf den Home-Screen meines iPhones gepackt, allerdings ist es abgeschnitten, weil halt die zwei Zeilen recht weit unten liegen.
Hier mal ein Screenshot:
http://www.datenkind.de/iphone/IMG_0003.jpg
k.: Naja, man kann’s auch übertreiben. Apple versucht eine homogene Erscheinung der Apps zu erreichen und nimmt dem Entwickler einige Handgriffe ab. Ich seh da jetzt eigentlich keine großen Probleme drin. Und wenn man auf der Basis von 64×64 Pixeln für Favicons arbeitet, ist das auch kein Beinbruch.
Und zwingen tut dich schon gar keiner.
@datenkind: Danke für den Screenshot, werde mal abändern bei Gelegenheit.
@datenkind:
> Apple versucht eine homogene Erscheinung der Apps zu erreichen
Haben wir doch längst? favicon nennt sich das und die gibts seit 1999.
Dachte heutzutage interessiert man sich für Webstandards. :-/
Ja sicher, geb ich dir vollkommen Recht. Jedoch nützt ein (oftmals) nur 16×16-Px-Bild nichts Viele wissen ja nicht mal, dass man Multi-Resolution-Favicons erstellen kann. Apples Favicon besteht z. B. aus vier Layern mit jeweils 8/24 Bit (uh, glaub ich) in 16/32er Auflösung. Selbst das wäre Pixelmatsch für’s iPhone/touch.
Und ja, ich interessiere mich durchaus für Webstandards, schon allein von Berufswegen. 😉 Betrachten wir halt das Webclip als einen Prototyp des „so kann’s halt auch gehen“-Grundsatz. 😉
Die Umwandlung eines Icon-Artworks ist Apples Geheimnis: es wird abgeschnitten, gedehnt und Elemente verschwimmen. Wir haben umfangreiche Experimente mit Testbildern durchgeführt und eine Methode gefunden, wie man ein 100% sauberes Webclip-Icon erstellen kann:
http://www.fontblog.de/how-to-make-a-proper-iphone-icon#comments
Was soll denn das
type="image/x-icon"im Beispiel, obwohl es offensichtlich ein PNG ist? Da sollte es image/png sein. (Für das ICO-Format ist übrigens image/vnd.microsoft.icon richtig.)