Ninja tip: How to create a custom iPhone/iPad home screen icon for your website

By Georgia
last updated

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.

I put together three simple snippets of code which target each individual iOS device according to their pixel densities. 163dpi for the iPhone 3G/3GS and iPod Touch, 132dpi for the iPad and a whopping 326dpi for the iPhone4.

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 dailytips@tipb.com. (If it’s especially awesome and previously unknown to us, we’ll even give ya a reward…)

Georgia
Georgia

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.

53 Comments
  • How do you do it if you are using iWeb??? I just created a icon and wanna spice up my link on my iphone/ipad/itouch
  • Slick! Didn't realize it was that easy.
  • I didn't realize it was that easier either. I can't stand when websites don't have an icon. The screenshot icon looks cheesy.
    One time I noticed the Tipb icon changed to something different for just a few minutes. Must have been Rene screwing around...
  • Also might want to mention renaming them.
    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.
  • How do u put it the websites directory? This may sound stupid but i dont really know what a directory is, is it a folder or something? If someone could tell me that would be great:D
  • cool! i never thought it was that easy
  • @Calum...to put it on a website's directory you have to have read/write access to it. In other words, it has to be your site. I just did this for my band's website. It works well.
  • @ Calum, @ Tony - "How do you do it if you're using iWeb?"
    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
    Please let me know if either of these worked. (I hand-code all my HTML/Javascript/CSS so I'm clueless about iWeb.) And I'm not sure how you'd put the image file into an iWeb-published site that's not on MobileMe, since Apple has encapsulated iWeb projects. The files are compressed, then stored in a proprietary ".sites2" package.
  • The "Advanced Usage" would be to reference it in your code as such:
    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:
    /apple-touch-icon.png"/ >
  • Updated with some great info for those obsessed with pixel perfection.
  • @aaron,
    where do i throw the code that you've prodived? thanks in advance!
  • @yeahmanh you put it in your code (I wrote it before, but forgot to escape the < > and it was stripped). Anywhere in the head section will do. My preference is near the end, right before the tag.
    The last three lines of my section look like this:
    directory'); ?>/favicon.ico" />
    directory'); ?>/apple-touch-icon.png" />
  • Note on last post: Funkiness on formatting. If copy/pasting for WordPress, make sure the php code says bloginfo('template_directory');
    (Somehow, the space was removed and some of it is italicized.)
  • @ SockRolid @ Tony “How do you do it if you’re using iWeb?”
    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.
  • can't seem to get it to work for a site published with iweb on mobile me. when i "add to home screen" i still just get a grab of whatever was on the webpage. no icon.
  • @ Ed - Try opening your iDisk, then navigating to the Web / Sites folder. Then drop the image into the Sites folder and see if it works.
  • thanks for the reply. but i've tried that a few times. no result. just to confirm, it's a 120 x 120 RGB png file called apple-touch-icon.png, correct? thanks again for trying to assist me.
  • Worked like a CHARM for my blog, thank you so much!!!
  • but if I use iweb and I upload to godaddy im at a loss?
  • the tipb icon is sexy
  • @Ed put the code in the index.HTML file. You can find it under iDisk/Sites and add the png file. Keep diging It can be done with sites made from iWeb
  • Any hints for making this work with Google Sites?
  • Thanks, great idea. Just updated my sites.
  • Great tip - much appreciated
  • If you want to prevent the pre-rendered gloss effect simply name the PNG apple-touch-icon-precomposed.png and iOS will not gloss it.
  • that didnt work for me, any idea why?
  • Great idea, any hints for making this work with Google Sites?
  • Very well writ­ten arti­cle. It will be ben­e­fi­cial to every­one who uti­lizes it, includ­ing myself. Keep doing what you are doing — can’r wait to read more posts.
  • When I originally commented I clicked the "Notify me when new comments are added" checkbox and now each time a comment is added I get several e-mails with the same comment. Is there any way you can remove people from that service? Thank you!
  • Howdy my buddy, this post you have just penned right here without doubt have got everyone interested up to the last word, and I have to tell you I never look at the complete write-up in weblogs as I in most cases got weary and also exhausted by all the gibberish that is written to me on a regular basis and just end up exploring the illustrations or photos along with the head lines and so forth. However your tag-line and also the very first paragraphs ended up being exceptional it easily gotten myself absolutely hooked. Commending you for a job well done in here. Cheers
  • Can a similar thing be done other types of mobile devices.,android, blackberry ?
  • Can a similar thing be done for other types of mobile devices.,android, blackberry ?
  • The Naruto Anime Episode 202 that has been released earlier is not actually the Episode 202. That was just the Naruto Moving Thursday announcement. The
  • Curious, If you add the image to your root dir (http://www.yoursite.com/apple-touch-icon.png) is that the default image icon that will appear when you "add to homescreen"?
  • Exceptional post. I much like the way you expose your writing talent! Keep up good operate.
  • Nice post. I was checking constantly this blog and I am impressed! Extremely helpful info specifically the last part :) I care for such information much. I was looking for this particular information for a long time. Thank you and good luck.
  • Is it possible for a user to customize a button when a website hasn't?
  • vary helpful tip I bookmarked it, and I'll try to do it on my site
  • I placed the image in the root directory of my Joomla site and it is still pulling the Joomla logo instead of my icon. Any help?
  • how do i do that in Blogger? How do i upload the image in root directory?
  • great publish, very informative. I wonder why the other experts of this sector do not realize this. You should continue your writing. I am confident, you've a huge readers' base already!
  • Dear friends,
    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.
    Thanks
  • Thanks for the nice tip on how to create a custom iPhone/iPad home screen icon for your website.
  • Thanks for all of the effort on this website. Betty really likes conducting internet research and it's really easy to see why. Almost all hear all regarding the compelling means you deliver reliable strategies through the web blog and even attract response from some others on that subject and our favorite girl is becoming educated a lot. Take advantage of the rest of the new year. You are conducting a really good job.
  • I am 55 years old and I've been exercising 3 hours a day for one year.I HAVEN'T LOST much: only 6 pounds. I eat chicken/fish no pork, no beef. I sometimes have ice cream/chocolate and no fatty sandwiches/food.Is my age the reason I am not losing weight?
  • I have to say that for the past couple of hours i have been hooked by the impressive posts on this blog. Keep up the good work.
  • Please help me to unlock my ZTE mf627 usb modem with IMEI:351589046091085
  • I do believe I'll ultimately make a move with all your tips on areas I could truthfully never have gotten to touch solely. You're so considerate to permit me to be a type of to benefit from the useful information. Please realize just how considerably I appreciate it.
  • Byl jsem informace z Blog Články .
  • It's really a nice and useful piece of info. I am glad that you simply shared this useful information with us. Please keep us informed like this. Thank you for sharing.
  • I've learn several excellent stuff here. Definitely worth bookmarking for revisiting. I surprise how so much attempt you put to create this kind of great informative web site.
  • Thanks for ones marvelous posting! I seriously enjoyed reading it,
    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!
  • Thanks for sharing the tip. This just makes things that little bit nicer for the user. Appreciated.