Making an Apple iPhone Icon for your website
9 years, 2 months ago Posted in: Blog 0

If  you own an iphone or an itouch, iphoneiconyou’ll be aware of when you ‘bookmark’ a page to your homepages from the internet, some sites have a specially-created icon the resembles an ‘app’ and other sites just have a small portion of the actual page.  Today, I’ll show you how easy it is to apply a custom-made icon to load on any iphone/itouch.

Now usually, when you bookmark a page on the iphone, it normally captures the screen that was last visible before you pressed the ‘+’ button then ‘Add to Home Screen’ buttons.   This screenshot  gets used as an icon  on the iphone – but you can customise this logo in the same way as a Favicon appears on a PC or Mac.

These are the steps to create an icon for your website:


1.   Create a 57px × 57px PNG file (preferably non-transparent) to use as your icon

2.   Name it ‘apple-touch-icon.png’ and place it in the root HTML folder of your site

3.    To apply the icon,  insert this simple code in the <head> tag of the header:


<link  rel="apple-touch-icon"  href="/apple-touch-icon.png” />


The iPhone automatically changes your  icon to fit the style of the other icons including adding rounded corners to the shape and the glossy effect for the glassy-reflection style so you don’t need to do that yourself.

If you notice a slight delay after clicking the ‘Add to Home Screen’ button on your iPhone it is simply that the icon is being downloaded and ‘shine’ added.

Here’s the exact image I used for my iphone bookmark icon for this website:



Leave a Reply

  • Copyright © 2011. OwenDevelopment. All rights reserved.