How to Create Apple Touch Icon Of Your Website Or Blogger

How to Create Apple Touch Icon Of Your Website For Ipod Touch , Iphone And Iphone

What is Apple Touch Icon 

During web surfing  online with an Apple mobile device (iPod Touch, iPad, and iPhone), users have the option of saving web pages directly to their home screen. When a page is saved, an icon is generated to which users may use to access said page without having to launch their browser.As more and more people browse the web with their iOS devices, adding a simple icon to your site helps with branding and looks great making sure your brand is well represented on the iPhone, iPod touch and iPad.

Apple Touch Icon is basically  like a favicon of a website. Similar to the Favicon, the apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen this icon is used. If this file is not found these Apple products will use the screen shot of the web page, which often looks like no more than a white square.

What are the Dimension of Apple Touch Icon

The apple tocuh icon pic must be in PNG format . So which dimesion we must use to create the apple touch icon .The answer is given below. 

There are three specifically sized PNG images that you can create:

• 57 x 57 pixels for older iPhones and iPod touch
• 114 x 114 pixels for iPhone 4
• 72 x 72 pixels for iPad

Do not include rounded corners or a gloss effect on your icon, those will be added automatically by the device.

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iOS won’t add any effects to the icon.

How To Make Apple Touch Icon

Now you know the what is apple touch icon and what dimesion images you have to make. 
So how to make apple touch icon .If you want a unique and different icon than you can use adobe photoshop or help of designers. There are also many websites on the web which we can use to create the icon free of cost.One of the site is pic2icon 

Steps to Make Apple Touch Icon from picture.

1. Go to pic2icon
2. Upload your own photo or image file.
3. Apply the settings of preferences options and special effect for the icon.
4. Generate the icon file and download it.

as easy as 1 2 3 

apple touch icon 144 x 144 pixel

apple touch icon 72 x 72 pixel

apple touch icon 144 x 144 pixel

apple touch icon 57 x 57 pixel

How to put apple touch icon image in blogger or website 

Now you have your apple touch icon images . Now i will tell you how to put these images in a blogger or websites. The Html codes for

With rounded corners, reflective shine 

apply the following code into the head section of your website:

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

Without reflective shine

apply the following code into the head section of your website:

<link rel="apple-touch-icon-precomposed" href="somepath/image.png" />

The IOS need  57x57 pixel PNG file for iPhone 2G/3G/3GS/Touch, 72x72 pixel PNG file for iPad, 114x114 pixel PNG for iPhone 5/4, 144x144 pixel PNG for the new iPad 3  .When iOS displays your application icon on the Home screen of a device, it automatically adds the following effects: rounded corners, drop shadow, and reflected shine. What you need to do is upload the generated PNG files to your site and add the code below at your web page or web application header:


<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3.png" />

Where yo put this code for apple touch icon  ? 

This code you have to put in the Head section of website or blog 

Just paste it above the </head> .

Thats all for this topic. Please Share and like the post if you find it useful.