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.
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 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:
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. 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. 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.
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. 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. 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
