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 the 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 touchscreen. 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 nowadays 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 a 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 a self-hosted platform where you’ve access to the 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 behavior 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 a standard format, your file should have name apple-touch-icon.png and this should be uploaded to the root directory of the website. If you don’t want graphical theme behavior on your apple touch icon then should not forget to rename as apple-touch-icon-precomposed.png.

If you want to use Apple touch icons according to different screen resolutions (which is recommended) then you should have to add icon size as a suffix in the file name. These files should be in the 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 the 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 behavior on your icons.

The 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 behavior 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"/>

The 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 to override the graphical theme impact of iOS then you should add -precomposed suffix in the rel part. See the example given 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.

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