Home / iPad / 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.
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!
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” />
I used the image to the left (without the grey 1 pixel border) as the Webclip icon of this site.
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.
This is such a great tip. My friend was surprised to see an “app” of my web site on my iPad. Merci.
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...]
Super Mario's debut was in "Donkey Kong" where he was portrayed as a carpenter and not a plumber. [more...]
We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy