how to add apple touch icon in blogger

how,to,add,apple,touch,icon,in,blogger


how to set up apple touch icon in blogger

Do you have any idea of how to set apple touch icon? 
Do you know what apple touch icon is? 

Don’t worry, in this article I’ll show you exactly how to add an apple touch icon in your blogger blog step by step. 

Apple touch icon 

Close to the Favicon, the apple-touch-icon also described as Apple touch icon is a PNG image file used for a web/blog page logo on the Apple iPhone, iPod Touch, and iPad. 
When someone bookmarks your blog or adds your blog page to their home screen, apple touch icon will be displayed  as your website/ Blog's logo.

What is the size of a perfect Apple touch icon life? 


For iPhone the size is set to be →180px × 180px (60pt × 60pt @3x)

 Or 120px × 120px (60pt × 60pt @2x) 

For iPad the size is set to be around → 167px × 167px (83.5pt × 83.5pt @2x)

And For iPad mini the approximate size could be 152px × 152px (76pt × 76pt @2x)

Now, if your blogger blog has no Apple touch icon included in the theme, then you have to implement the Apple touch icon in your blogger manually by adding some meta codes.
But, how do you add the Apple touch icon to your Blogger's site? 
Steps->
The process is not something to worry if your following below guidelines,
How to set up Apple touch icon? 
  1. Go to your blogger blog and go to the ‘Theme’ option. 
  2. Now download a backup file of your theme, in case of emergency. 
  3. Now, click onto the HTML editor and open your theme XML file and between <head> and </head> you have to paste the Apple touch icon meta code. 
Before going any far, make sure that you have already created an apple touch icon for your blog. But if you don’t, then create one. The size of apple touch icon logo should be exact to the size I mentioned above.

The html code of Apple touch icon :

<link href='Add your image link here' rel='apple-touch-icon'/>

Note : you have to create an html link of your image for example https://thelogoimage/apple-touch-icon.png
And then you have add your image html link inside href='here'

Note: the image format should be in PNG.


After adding everything correctly, save your theme.xml file and go to your blogger blog and to see if your apple touch icon is working or not, you can bookmark and add your blog to your Home screen.

Also: Do you want to read more interesting articles like this one? Check MR laboratory for more relevant & interesting content.

3 Comments

  1. Which template are you using ?

    ReplyDelete


  2. Nice post. I used to be checking constantly this blog and I am impressed! Extremely useful info particularly the ultimate section 🙂 I take care of such information a lot. I was seeking this certain information for a long time. Thank you and best of luck.
    Communication skills essay

    ReplyDelete
Previous Post Next Post