[Since firmware version 2.0 the problem with 57×57 pixel icons not working correctly has been fixed!]
Since firmware version 1.1.3 iPhone and iPod Touch allow basic customization of their Home Screen. Users can rearrange application icons and they might add bookmarks, either from traditional websites (like nyt.com) or from mobile versions of websites, that offer a special service (e. g. games like Bejeweled) or a service ( e. g. the RSS reader NewsGator). Such home screen applications are also called webclips.
Everybody’s website
should make a
crisp impression
on iPhone and
iPod Touch …
beware of blurs,
crops and scaling!
When users add a webclip to their home screen via Safari’s (+)-Button, such bookmarks will be represented by a glossy 57 x 57 px icon with round corners. It’s in the hand of the designers of the corresponding web sites, how these icons look like. Safari looks for a customized icon at the root level of the website that must carry the filename apple-touch-icon.png; to be on the safe side include the following code into your websites header:<link rel=”apple-touch-icon” type=”image/png” href=”apple-touch-icon.png”/>The iPhone OS will automatically give this image a rounded 3D effect. If Safari couldn’t find such an icon, it generates something based on the website’s home page.
The rules of the icon rendering are known only to Apple. The official iPhone Dev Center just says, take any 57 x 57-.png and name it apple-touch-icon.png. “Safari will automatically composite the icon with the standard glassy overlay so it looks like a built-in iPhone or iPod application.� Unfortunately the rendering results are not satisfying because the iPhone-OS generates blurred buttons. Some blogs found out, that 60 x 60 px generates much better results. But it is still not a 1:1-representation of your original artwork.
While generating Touch icons for the website of FontShop’s design conference www.typoberlin.de our designer Magnus at studio adhoc (Berlin, Germany) gets frustrated. After some trials he wrote me “Now I like to know exactly what is happening within that damned iPhone� and generated some test cards: 57 x 57 (ouch), 58 x 58 (argh), 59 x 59 (no, no), 60 x 60 (not bad, but not perfect). After some hours of experimentation he mailed me the perfect dimensions: 59 x 90 px. Isn’t that weird?
Forget Apple’s advice (57 x 57 px). We used a test card to find our the perfect result via reverse engineering
We’ve noticed, that parts of the original 59 x 59 pixel art work are either blurred, scaled or cut off. Horizontally everything was fine, except loosing one pixel row at the left and one at the right side. But the vertical scaling was totally abnormal; and even with a height of 61 we lost three rows at the bottom. After a series of experiments we ended up with a format of 59 x 90 px.
And this is our template:
59 x 90 px = socket for best rendering results
green = cropped
blue = blurred
grid = untouched area
Please load it as psd-file. It contains several layers like “blurredâ€?, “croppedâ€?, “gridâ€? and so on. Have fun. Mail me your results and web-adresses … I look forward to seeing your touch icons on my iPhone’s home screen.
Startseite
Über Fontblog
Impressum
Werbung im Fontblog
Archiv
Mir sind iPhone-Icons einfach Latte (diesmal nicht Macchiato)!
naja, ich denke, das über kurz oder lang, vermutlich eher kurz diese icons genauso wichtig sein werden wie die fav-icons. da man mittlerweile den home-screen individuelle anpassen kann sind wiedererkennbare icons einfach ein muss. so einfach kanns manchmal sein.
[... Fontblog » How to make a proper iPhone-Icon ...]
[... How to make a proper iPhone-Icon ...]
[... Jürgen Siebert of Fontblog and Magnus of studio adhoc tested many sizes to create a pixel-perfect iPhone WebClip icon with no scaling or stretching (although it is cropped) for TYPO Berlin and provide a Photoshop template to use for your own icon work. ...]
Das finde ich super-interessant! Schönes reversed-engineering!
danke für die mühsame arbeit! gratulation, jetzt haut’s hin!
In der Tat, Charly: dein Touch-Icon sieht gut aus … ich habe es mir eben geladen:
Ich freue mich, dass Du unser Experiment bestätigen kannst:
O2? Wird iPhone nicht exklusiv mit T-Mobile angeboten?
Der Screenshot stammt von einem entsperrten iPhone, das für jede SIM-Karte offen ist. Abgesehen davon könnte man den Carrier-Schriftzug mit einem kleinen Programm namens MIM (make it mine) in ein beliebiges Wort umwandeln.
habs auch online. war grad drüben im t-mob-store: funktioniert prächtig ; )
frage: werden iphones denn immer so heiß, wenn sie ständig an der ladestation stecken (wie im store)?
Bezahlt man den T-Mobile Vertrag weiterhin, wenn man sein iPhone entsperren lässt?
T-Mobile verkauft iPhones – in Deutschland exklusiv – nur mit Vertrag. Menschen mit entsperrtem iPhone haben diese wahrscheinlich aus den USA mitgebracht, wo man sie in einem Apple-Store für $ 399 ohne Zwangsvertrag kaufen kann.
Hinweis: Der “type” in der Deklaration ist falsch. Hier gehört nicht der Verwendungszweck, sondern der Mime-Type hin und der ist im Falle eines PNG “image/png” und nicht “image/x-icon”.
Ich ändere das mal da oben … denn nur die wenigsten werden die Kommentare bis hierhin lesen.
Thomas Junold (buerofueraufmerksamkeit.de) hat auch ein schönes iPhone-Touch-Icon gebaut (rechts):
@thomas Dass iPhone Icons ansatzweise so wichtig wie Favicons werden bezweifle ich jetzt mal. Selbst hier in New York, wo wirklich verhältnismäßig viele Leute ein iPhone haben, nutzen die meisten Menschen andere Geräte, z.B. Blackberrys. Wenn man also eine Art Favicon für mobile Geräte gestalten will, sollte dies nicht nur auf dem iPhone funktionieren und auf lange Sicht wird sich, gerade im Hinblick auf die wachsende Personalisierung der “mobile Desktops”, sicher auch ein besserer Weg finden müssen, um Bookmarks, Anwendungen, was auch immer in großer Zahl schnell und übersichtlich erreichbar zu machen. Und ich hoffe, dass dieser Weg nicht mit 3D-Buttons visualisiert wird. Einen einheitlichen Look auf einem Gerät zu realisieren finde ich dagegen dennoch sehr interessant und wahrscheinlich eine der großen gestalterischen Herausforderungen der nächsten Jahre. Gestalter und Entwickler werden dahingehend im Bezug auf Logos und Icons, vielleicht aber auch auf ganze Anwendungen Lösungen finden müssen, Informationen so zu strukturieren, dass sie eindeutig und wiedererkennbar, aber auch generisch und ubique an die Umgebung, in der sie angezeigt werden, modifizierbar bleiben.
ich würde sagen auf iPhone 2.0 warten und schauen. dass man viele dinge auf dauer so einfach nicht wird organisierung können, da gebe ich dir recht. ich bleibe aber dabei, dass das iPhone eine gute vorlage gibt, von der nun fleißig abgepaust wird. erste ansätze gibt’s ja bereits zu sehen. visuell haben diese icons defintiv den stellenwert von fav-icons in deiner bookmarksammlung. das stichwort lautet wiedererkennbarkeit.
Ich glaube, dass die Touch-Icons einen größeren Stellenwert haben als Favicons, die letztlich nichts anderes als Etikette sind. Die Touch-Icons funktionieren jedoch wie Programmtasten, die man beliebig auf mehrere Home-Screen-Seiten organisieren kann. Eine Wikipedia- oder eine Twitter-Taste, die sich ästhetisch harmonisch eingliedert zwischen Notizbuch, Taschenrechner und Wetterbericht, bekommt auf diese Art eine ganz andere Kraft.
So findet sich dasauge.de seit heute – nach Anwendung unserer Bauanleitung – auf dem eigenen iPhone wieder (danke für die Mail):
Favicons sind meiner Meinung nach nicht nur Etikette. Sie nehmen einen Großteil meiner Firefox-Toolbar ein, wo ich alle meine wichtigen oder oft benutzten Bookmarks gespeichert habe. Um den Platz effektiv zu nutzen habe ich die Namen gelöscht, so dass nur die Favicons sichtbar sind, über die ich schnell auf die Seiten zugreifen kann, die ich oft nutze:
Daran, wie viel Platz der FFFFound-Button braucht, der kein Favicon hat, sieht man, dass Favicons mehr als nur Etikette sind. Sie sind für mich wie Shortcuts bzw. Touch-Icons, die von fast allen Geräten/ Anwendungen genutzt bzw. angezeigt werden können, sogar auf meinem recht alten iPAQ. Ich finde auch die Idee Touch-Icon an sich gut, aber davon, aus Entwickler- oder Designersicht wirklich bedienbar zu sein sind die bisherigen Lösungen, wie ihr ja auch gemerkt habt, weit entfernt. Wünschenswert wäre doch sowohl vom Standpunkt der Nutzer als auch der Hersteller, Autoren, etc. ein Weg, bei dem man ein Icon nicht für alle Geräte anpassen muss, sondern einmal – nach festgelegten Regeln erstellt und dieses von allen Geräten aller Hersteller, Länder, Kulturen so interpretiert wird, dass es sich optimal in das entsprechende Interface einpasst. Sozusagen nicht nur das Trennen von Content und Design, wovon ich ein großer Freund bin, sondern auch das Trennen von Design und Design.
Ich finde deinen/ euren Beitrag dazu, wie jeder sein iPhone-Icon erstellen kann sehr wertvoll, und nützlich aber noch besser fände ich es, wenn solche Anleitungen gar nicht nötig wären, weil es Technologien gibt, die diese Sisyphosarbeit unnötig und das Icon in der richtigen Auflösung, Qualität und einer zum restlichen Interface passenden visuellen Erscheinung verfügbar machen.
@Raketentim
Dieser Haltung ist vollkommen unterstützenswert. Ich empfinde es auch als Zumutung, was Apple da einem zum Fraß vorwirft. Natürlich wäre eine vectorbasierte, systemunabhängige Lösung viel besser. SVG heißt die Technologie, die es eigentlich sein sollte: Eine Datei, beliebige Ausgabe in beliebiger Größe. Kann doch eigentlich nicht so schwer sein, das endlich mal durchzusetzen.
das ist illusorisch. wenn du das schaffst nimmt dich jede agentur, die leitsysteme baut mit kusshand.
ein system kann objektiv richtig sein, subjektiv aber falsch verwendet werden.
vektoren sind auch nicht ad libitum skalierbar. es gibt grenzen an unten. was für schrift im übrigen ein problem darstellt.
früher, also vor 10–15 jahren, konnte sich sicherlich niemand vorstellen, das man vektoren für die darstellung von grafiken im computerbereich als selbstverständlich verwendet. alle icons waren einfarbig oder 16 farbig maximal 256 farben.
wartet es doch einfach mal ab.
Warum ist diese anleitung eigentlich auf englisch? Der text ist doch offensichtlich übersetzt? (das fängt schon beim ersten satz an: Since firmware version 1.1.3 iPhone and iPod Touch allow basic customization… Das würde richtig heissen …have allowed…, also vorvergangenheit, weil das ganze ja in der vergangenheit stattfand. Bei sätzen, die mit „since“ anfangen, ist das so. Andere typische übersetzungsfehler will ich nicht aufzählen, aber es wäre doch sicher einfacher gewesen, für das deutschsprachige FontBlog den originaltext zu nehmen, oder?
Ich glaube nicht, dass das unrealistisch ist. Zwar ist es richtig, dass es in absehbarer Zeit nicht dieses eine Icon, Symbol, Piktogramm geben wird, dass beispielsweise in allen Kulturen funktionieren wird, man braucht verschiedene Symbole für verschiedene Kulturen. Aber genau das ist einer der Punkte, die in Zukunft realisiert werden. Wir sollten nicht verschiedene Icons für jedes Gerät erstellen müssen, sondern beispielsweise für verschiedene Kulturen – das ist sinnvoll so wie beim Roten Kreuz.
Der Nutzer sollte nach Möglichkeit nix dafür tun müssen, dass ihm das Icon angezeigt wird, das er am besten versteht. Und für die, die für den Nutzer gestalten, sollte es einfach sein, diese Icons (ich bleib jetzt mal beim einfachen, greifbaren Beispiel “Icon”) zur Verfügung zu stellen. Und diese sollten dann auch in verschiedenen Auflösungen zur Verfügung stehen. SVG ist dabei ab einer gewissen Auflösung eine gute Möglichkeit, Allerdings stimmt es, dass man bei 16×16 Pixeln sehr wahrscheinlich nicht das Resultat sehen würde, das man sehen will.
Dieser Beitrag zeigt, dass das für iPhones verwendete Bildformat alles andere ist, als eine gute Basis für standardisierte Icon-Formate. Wünschenswert wäre beispielsweise, ein Icon in 16×16, 32×32, 48×48, 64×64 Pixeln Auflösung und eine SVG-Grafik zu hinterlegen und das, wenn nötig, in verschiedenen grafischen Ausführungen für verschiedene Kulturen. Das Gerät könnte dann aus diesem Pool die Grafik aufrufen, die es für eine optimale Darstellung benötigt.
Im Bezug auf Leitsysteme glaube ich übrigens auch, dass es in naher Zukunft viele Änderungen geben wird. Mobile Geräte werden in Zukunft eine viel grössere Rolle spielen, so dass man sich z.B. nur noch die Informationen – Was ist wo – auf das Gerät lädt, das einem die Informationen dann immer mit dem selben Leitsystem anzeigt. Ich glaube, dass könnte ein lukrativer Markt sein – Flexible Leitsysteme für mobile Geräte.
Mist – wieder so viel geschrieben, aber nur die Hälfte von dem gesagt, was ich sagen wollte – dafür zu vieles, was nur halb rein passt – wie Maria Carrie in ihre Klamotten.
Es ist die Übersetzung meiner deutschen Gedanken, ja. Ich habe den Text in englisch geschrieben und veröffentlicht, weil das Thema von internationalem Interesse ist. Das meiste, was ich bisher über das Interface des iPhones gelesen habe, findet man auf US-Seiten – verständlicherweise, weil das Gerät dort bereits zum Alltag gehört; hierzulande löst es ja gerna mal Neidreflexe aus (sie Kommentar #1). Der zweite Grund: Doping fürs Fontblog-Ranking bei Google, Technorati & Co.
Nachdem das Logo unseres Newsletters immer schon sparsame 60×60 war, ist der Umbau auf 59×90 ein Klacks, und natürlich kommt da viel mehr Information rüber als bei einem 16×16 favicon:
Well, I wish I could read German so I could enjoy the comments, but thanks for the great article & the PSD file!
ich habe für meine seite nun auch ein icon erstellt. Wie habt ihr eigentlich screenshots von eurem homescreen gemacht um hier zeigen zu können wie die icons aussehen?
Screenshots lassen sich nur auf einem gehackten iPhone erstellen, weil man entweder ein Zusatzprogramm installieren muss oder aber die (vorgesehene) Screenshot-Funktion einschalten muss.
hello! i wanted to learn how to changes the icon of may i phone thank you.
This method worked perfectly. Thanks for taking the time to put this together!
With the coming of the version 2.0 firmware, the problem with 57×57 pixel icons not working correctly has been fixed! Now, there is no problem creating a pixel perfect icon as a web clip for the iPhone. I’ve posted some example images (a 57×57 grid and a 57×57 checkerboard) on my site for examination.
http://www.makentosh.com/tipsfromtheiceberg/Blog/Entries/2008/7/20_Clip_a_little_Web_for_you.html
Hi,
wie funktinoert das nun mit dem Template, dass ich ein optimales Ergebnis auf dem iPhone bekomme… ich hab die psd datei nun geladen und mit photoshop geöffnet… und nun ?
andy: der Beitrag hat sich erledigt. Konstruiere Dein Touch-Icon bitte so, wie es Apple empfiehlt.
Hallo iPhone-Nutzer,
wer kann mir ein Programm liefern, mit welchem ich selbst Icon’s gestalten kann? Hierbei sollte es möglich sein, dass eine Internetadresse hinterlegt werden kann. Zum Beispiel: Icon zum Empfang des Rundfunksenders “SWR4″ (die Internetadresse liegt mir vor). Vorteil: Durch anklicken des Icon bin ich sofort mit dem Südwestrundfunk SWR4 verbunden und das Rundfunkprogramm kann ablaufen…
Sehr dankbar wäre ich, wenn mir irgendjemand einen Hinweis geben könnte. Im voraus besten Dank.
Gruß Wolfgang Schock ++
wenn du einfach eine url hinterlegen willst, kannst du das vom safari aus direkt auf deinem iphone machen… einfach gewünschte seite laden, unten aufs plus klicken (+) und dann “zum home-bildschirm” anklicken…