WebDevelopersNotes logo

home-icon Home / iPad / Web site icon on the iPhone, iPad and iPod – create Webclip icon

Web site icon on the iPhone, iPad and iPod – create Webclip icon

Web site icon on the iPhone, iPad and iPod - create Webclip icon

This short and sweet tip explains how to create a Webclip icon (akin to a Favicon) which is used by the iPhone, iPad and the iPod Touch. Typically, when a user on one of these devices adds your web site to their “Home” screen, the web site homepage snapshot is placed as the icon. A better bet is to get a web site icon of your logo to appear on the iPad, iPhone or iPod.

Webclip icon: a web site icon for the Apple devices

Creating a Webclip icon is a very simple affair. Take the logo and save it as a png file. I think this image needs to be a square but am not sure. Anyway, ensure that it’s more than 60×60 pixels in dimensions. I used one which was 120 pixels!

Sponsored Links

Important: Your image doesn’t need to have rounded corners. The Apple device styles the image in this way when it saves it as a web site icon.

Name this image: apple-touch-icon.png and upload it to the document root on your web server – the same directory that holds the index.html or equivalent file.

That’s it! You’ve successfully created a web site icon for the iPhone, iPad and the iPod Touch.

By the way, just as with Favicons, you can also use the <link> tag to point to the Webclip icon if you want to use a different file name. Thus,
<link rel=”apple-touch-icon” href=”filename.gif” />

Webclip icon: a web site icon for Apple iPad, iPhone and iPod TouchI used the image to the left (without the grey 1 pixel border) as the Webclip icon of this site.

Add the web site icon on an iPad, iPhone or iPod Touch

Here is how you can add the web site icon to the iPad (or the iPhone). SImply follow the four steps below and refer to the slideshow if in doubt.

  • Add to home screen on the iPad
  • Put a new name for Webclip icon
  • Web site icon added to the iPad
  1. Load web site in the Safari web browser.
  2. Tap the ‘forward’ button on the iPad or ‘+’ on the iPhone – [Slide 1]. Choose “Add to Home Screen” from the menu.
  3. The web site icon should appear if it exists. By default the first new characters of the site’s title tag will be shown. Obviously you would like to get rid of that and enter a most descriptive name for the Webclip icon – [Slide 2]. Tap on “Add” when done.
  4. You’ll find that the web site icon has been added on your iPad – [Slide 3].

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

  • Hilton Barjolo on June 13th, 2012 10:23 am

    This is such a great tip. My friend was surprised to see an “app” of my web site on my iPad. Merci.

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

Such was the media hype and frenzy around the launch of the iPad that 300,000 were sold on the very first day! [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy