How to Use Apple Touch Icons with Any Blog or Website?

12

With the exponentially increasing popularity of iOS-based devices like the iPhone and iPad, you should update your websites and blogs in terms of web technology. These devices can bookmark websites and blogs. If bookmarked websites and blogs have icons compatible with iPhone and iPad, then these icons will appear on the 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 the branding of your websites and blogs. So it is a must nowadays to use Apple touch icons with your site. It will just take a few minutes of designing and uploading to the server’s root directory.

If you have no access to the server’s root directory as in the 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 on 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., the 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 you 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 of 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 an Apple touch icon to self-hosted websites and blogs where you don’t have access to the root directory. The instructions above are essential and must be first clear to you. As I told you above, there are two ways to add an Apple touch icon.

  1. Using one standard icon on all devices, i.e., the 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 the 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 of how to do it. Must not forget to use ‘your icon link’ before using it 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 an icon that has size 57×57. The following code is an example of 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 for iPhone and iPad.

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

12 COMMENTS

  1. GREAT अंग्रजी और हिँदी को अलग कर दिया अब USE HIDE A POST HOMEPEJ ट्रिक AND डबल पोस्ट मुख्यपृष्ठ पर होने से रोके ।

  2. It’s a nice step dear! On the same topic, separate posts for both languages! Write a double post on the benefits of the same and also consider the advise of Varun. Is it good idea to show tabs of Hindi and English on your Home page to switch the reader for specific language posts. I am sure, you are going to shape your blog unique in nature— a bilingual technical blog.

    • It’s very difficult to write the same post in other language if you not have time to write a post in one language. Only complicated posts will be provided in such a way. Shaping blog for two languages in such a way is a long way. But I introduced a Translate option under the title of the post I hope you guys will enjoy! Regards.

  3. Hi VInay,

    Thanks for the steps and instructions which you provided. It should improve the aesthetic value of the website/blog.

    Do check out my entry for Get Published.

    Regards

    Jay

        • for your blog you should paste apple icon links like that-

          <title>Post it ART Creators </title>
          <link rel="apple-touch-icon" href=”…/icon-iphone.png” />
          <link rel="apple-touch-icon" sizes="114×114" href=”…/icon-iphone4.png” />
          <link rel="apple-touch-icon" sizes="72×72" href=”…/icon-ipad.png” />
          <link rel="shortcut icon" href=”https://25.media.tumblr.com/avatar_5c4997dd6fda_16.png” />

          • Awesome got it! I figured it out. I seems it just takes some time until you can see the updates on your phone.

          • Most welcome Mr Kopp! I will love to see it on my phone! :) Keep Visiting us.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.