With the exponentially increasing popularity of iOS based devices like iPhone and iPad you should update your websites and blogs in terms of web technology. These devices have ability to bookmark websites and blogs. If bookmarked websites and blogs have icons compatible for iPhone and iPad then these icons will appear on iPhone and iPad touch screen. These icons are called Apple touch icons. If your site does not have Apple touch icons then there is a chance of losing branding of your websites and blogs. So it is must now-a-days to use Apple touch icons with your site it will just take few minutes of designing and uploading to server’s Root directory. If you have no access to server’s root directory as in case of Blogger, tumblr or other hosted platforms similar to that then you can add these Apple touch icons in HTML and XML templates with a little effort. This post will guide you how to add Apple touch icons with self-hosted and hosted platforms. First we talk about self-hosted platforms and later we’ll come to hosted platform like Blogger and tumblr.

apple touch icon for blogs

Use Apple Touch Icons for Self-hosted Blog or Website (Root Directory Accessible)

Use Apple touch icons with self-hosted platform where you’ve access to Root directory. There are two ways to add Apple touch icons

  1. Using one standard icon on all devices i.e. screen resolution doesn’t matter
  2. Using three different size icons for different screen resolutions

Another thing that counts here is these devices have their theme behaviour that can be applied to your icon. If you want to prevent this change on your icon you can use -precomposed suffix in the name of your icon file.

According to standard format your file should have name apple-touch-icon.png and this should be uploaded to the root directory of website. If you don’t want graphical theme behaviour on your apple touch icon then should not forget to rename as apple-touch-icon-precomposed.png.

If you want use Apple touch icons according to different screen resolutions (which is recommended) then you should have to add icon size as suffix in the file name. These files should be in Root directory on the server of your website. Hereunder is an example how to name these icon files:

Standard iPhone: apple-touch-icon-57x57.png
iPhone 4 or 5: apple-touch-icon-114x114.png
Standard iPad: apple-touch-icon-72x72.png

Use Apple Touch Icons for hosted Blog or Website (No Root Directory Access)

Now talk about adding Apple touch icon to hosted websites and blogs where you don’t have access to Root directory. Instructions above are very important and must be first clear to you. As I told you above there are two ways to add Apple touch icon.

  1. Using one standard icon on all devices i.e. screen resolution doesn’t matter
  2. Using three different size icons for different screen resolutions

Similarly there you should have to keep it in your mind if you want to use -precomposed suffix to disable graphical theme behaviour on your icons.

In first case you should use the following code and must not forget to replace highlighted image link with your icon link.

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

If you want to override the graphical theme behaviour of iOS then you should use -precomposed suffix in rel part of the code, hereunder is an example how to do. Must not forget to use ‘your icon link’ before using in your template.

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

In second case if you want to use icons for different screen resolutions of iOS devices, you should need to specify the icon sizes in code. One thing if you didn’t mention size then it is considered icon has size 57×57. The following code is an example how to use icons in your html and xml template. Must not forget to replace the icon link.

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

Again if you want your icon override the graphical theme impact of iOS then you should add -precomposed suffix in the rel part. See the example give below. Must not forget to replace the icon link.

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

I hope this post will help you to make your websites and blogs more responsible to iPhone and iPad.

इस पोस्ट का हिंदी संस्करण पढ़ने के लिए नीचे दिये लिंक पर क्लिक करें।
Read the Hindi version of this post, click the following link.
https://hindi.techprevue.com/2013/01/iphone-and-ipad-icon-with-blogs.html

If you want to add favicon on your blog then follow the instructions given on the following post.
https://hindi.techprevue.com/2012/07/favicon-for-blogger-blogs.html

Keywords: Apple touch icon, iPad touch icon, iPhone touch icon