Set Your Site’s Apple Touch Icon
Written by David Walsh on July 17, 2009 · 19 Comments
Apple's mobile devices are taking over the world. iPhones and iPod Touches are all over the place. You can set an Apple Touch Icon for your website just like you can set a favorite icon. So lets do it!
The XHTML
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
The icon should be 57 pixels wide by 57 pixels tall.
Just like the favorite icon. Yet another creative detail to add to your site. Show people that you care about the details!
Good one to remember.
Also worth mentioning that the icon should be 57x57px
Good call George!
And what does this button do?
@Rick: There’s an option in iPhone/iPod Touch’s Safari that lets you place shortcuts to websites right on the main screen. This icon will be used in case someone does that for your site.
It reminds me of MSIE and they standardization :)
Thanks for the tip. I’ve just done it. But, instead of putting the PNG file in the root folder, I put in the themes folder and changed the href reference accordingly. Is this all right?
where do i put this xhtml code?
In the header like html does. Remeber the link code ends with />.
By the way it is also used in Opera’s Speed Dial.
But this doesn’t work for blogger mobile template but only for the web version. Ho can i put this also for the mobile version
Should there be multiple icons listed in the header for new and old devices.? Also, it would be nice if this post [or every post] had a date so we/I would know when it was written as an indicator of it’s relevance.
I was in search for this. Good one.
I added the code to the root folder – is something supposed to show up on the home page or only when you use a mobile device?
Pulled a link to the iOS developer Library with some additional graphics specifications. Thanks for the great post. Love the hover effects!
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
Added your blog as a reference on my SEObrainstorm.com!
[...] http://davidwalsh.name/set-sites-apple-touch-iconHow to create an ‘Apple Touch Icon’ for your website [...]
I noticed a lot of requests for that image in my visitor logs and had no clue what it’s about. Thanks for the tip!
[...] websites as apps (or maybe "bookmarks" is a better term) to the home screen, much in the vain that iOS allows users to do the same. Like iOS devices, Windows 8 allows users to accomplish this same task using custom META tags [...]
[...] apps (or maybe “bookmarks” is a better term) to the home screen, much in the vein that iOS allows users to do the same. Like iOS devices, Windows 8 allows users to accomplish this same task using custom META tags [...]
[...] (eller kanske ”bokmärken” är en bättre term) till startskärmen, mycket i venen att iOS tillåter användare att göra detsamma . Liksom iOS-enheter kan Windows 8 användare för att utföra samma uppgift med hjälp av anpassade [...]