Ninja tip: How to create a custom iPhone/iPad home screen icon for your website
Interested in making one of those custom website icons that show up on your iPhone, iPod touch, or iPad when you hit "Add to Homescreen"? A cool icon will make visitors want to add a WebClip of your site to their home screens. They'll show it to their friends, their friends will also add WebClips of your site, and your site will zoom up the Google Page ranks. (Hey, every little bit helps!). Thanks to SockRolid from the forums, we'll show you how after the break!
It's actually quite easy, though thanks to Apple adding iPad and now Retina Display resolutions to the lineup this year, you do have to take the larger size into account:
- First, create a relatively small, square PNG file. 120x120 is the way to go if you want it to look good on iPad and crisp on iPhone 4.
- Don't worry about rounding the corners, Apple will do that automatically and even add the "shiny" treatment as well.
This is what the TiPb WebClip icon looks like:
- After you've created the ultimate icon, name it "apple-touch-icon.png"
- Now upload it in your website's root directory (typically via FTP). For example, http://www.yoursite.com/apple-touch-icon.png
That's it, you're done. What could be easier?
Now when visitors are browsing your site on an iPhone, iPod touch, or iPad, they can just hit the "action" button (on iOS 4.2, the "+" button or earlier versions of iOS) and tap "Add to Home Screen". That's will create a WebClip right alongside their apps. They get instant one-touch access to your site, and your site get more traffic. Never underestimate the power of simplicity. Especially when it's also cool and shiny.(opens in new tab)
Bonus tip: If you don't create a custom icon for your site, Apple will create one for you based on a tiny screenshot of whatever random page, at whatever random zoom-level, your visitor happened to be on when they tapped "Add to Home Screen." Image may not be everything, but as we all know it's crucially important. Don't leave it to chance. Manage your site's image.
UPDATE: Marc Edwards was nice enough to point us towards Jesse Dodd's article from Campaign Monitor on how to take your web icons to the next level.
If you notice in the above code I have used apple-touch-icon-precomposed. The addition of -precomposed stops iOS from automatically rendering gloss atop my icon and rounding it’s corners. If you do want iOS to auto-apply the gloss and rounded corners automatically (so you can supply a flat, square image), simply use rel=“apple-touch-icon”.
So did you get it to work? If you have questions, let us know in the comments. If your site has a great new icon, drop us a link to it as well so we can check it out!
Tips of the day will range from beginner-level 101 to advanced-level ninjary. If you already know this tip, keep the link handy as a quick way to help a friend. If you have a tip of your own you’d like to suggest, add them to the comments or send them in to firstname.lastname@example.org. (If it’s especially awesome and previously unknown to us, we’ll even give ya a reward…)
Get the best of iMore in your inbox, every day!
Senior Editor at iMore and a practicing therapist specializing in stress and anxiety. She speaks everywhere from conferences to corporations, co-host of Vector and Isometric podcasts, follow her on Twitter @Georgia_Dow and check out her series at anxiety-videos.com.
One time I noticed the Tipb icon changed to something different for just a few minutes. Must have been Rene screwing around...
There's a maximum width the names can be to display completely. This all depends on the characters that are used.
For example, some names might max out at 10 or 11 characters, but if more characters in the name are the letter "i", for instance, then more characters (longer names) will display completely.
I actually haven't tried this using iWeb and MobileMe, but these steps might work if you're using both:
If you have published your site with iWeb on MobileMe and you have a domain name associated with your site, you should be able to drop the file into the iDisk/Web/Sites folder.
If you don't have a domain name associated with your site, and it's on MobileMe, you should be able to drop the file into http://web.me.com/MobileMeAccountName/File_Name
This allows you to place it in other locations (e.g., /images) and should allow you to set it if using Blogger (where you can't upload images, but can modify code), etc. I usually place this with my favicon code.
If using WordPress (especially a multisite install), you want the image in your theme directory, not root directory. Thus, the code would be:
where do i throw the code that you've prodived? thanks in advance!
The last three lines of my section look like this:
directory'); ?>/favicon.ico" />
directory'); ?>/apple-touch-icon.png" />
(Somehow, the space was removed and some of it is italicized.)
In case of a site published to iWeb on MobileMe with a domain name associated to the site, it works fine to simply drop the file into the iDisk/Web/Sites folder.
You'll be able to engage a article author regarding community posting, blog site creating, internet marketing, selling your business, creating essays, dissertations, article marketing and many more. This is such kind of site that helps you a lot.
you can be a great author.I will remember to
bookmark your blog and may come back down the road.
I want to encourage that you continue your great job,
have a nice evening!