How to

How to change the wallpaper to customize your iPhone or iPad

How to

How to use the Home screen on iPhone or iPad: The ultimate guide

How to

How to remove apps and delete folders on your iPhone or iPad

How to

How to create folders and add apps on your iPhone or iPad

How to use multiple Apple ID's with one computer and iTunes

How to

How to use multitasking gesture navigation shortcuts on the new iPad

News

How to use the iPad Home button to navigate, access the fast app switcher, take a screenshot, and more

How to

Daily Tip: How to improve the look of your home screen Safari bookmark icons

How to

Daily Tip: How to navigate through your home screens in three different ways

How to

Daily Tip: How to save your application data using appbackup [jailbreak]

Apps

Daily tip: How to delete jailbreak apps quicker with CyDelete [jailbreak]

How to

Daily Tip: How to set up Skype to become your home iPhone, iPad security camera

How to

iOS 4.3 bugs: Web Clips, WebViews not benefitting from new Nitro JavaScript engine, asynchronous mode, HTML5 caching

How to

Daily Tip: How to stop an app download/install iOS 4.3

How to

Daily Tip: How to diagnose and fix springboard crashes [jailbreak]

How to

How to jailbreak iOS 4.2.6 on your Verizon iPhone 4 with Greenpois0n

How to

How to jailbreak iOS 4.2.1 iPhone, iPad untethered via greenpois0n [Mac users only]

How to

Daily Tip: Bookmarking websites to your iPhone, iPad home screen [Beginner]

How to

Daily Tip: How to skin carrier names with Winterboard [Jailbreak]

How to

Daily Tip: How to get a better Gmail experience on iPhone

< >

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.

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

Senior Editor at iMore and a practicing therapist specializing in stress and anxiety. She speaks everywhere from conferences to corporations, hosts the ZEN & TECH podcast, and should be followed on Twitter @Georgia_Prime.

More Posts

 

6
loading...
1
loading...
2
loading...
0
loading...

← Previously

Having Netflix or HDCP problems with Apple TV?

Next up →

iOS 4.2 features: Improved Safari web browser

Reader comments

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

53 Comments
Sort by Rating

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

@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"/ >

@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.

@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

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.

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

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.

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?

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 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.

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.

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!