What is Apple Touch Icon?
Apple Touch Icon or Apple-touch-icon.png is similar to a favicon icon used for web pages on Apple iPhone, iPad and iPod Touch devices.
When someone bookmarks or saves your webpage or add in their home screens, this icon is used.
What if we don't enable the Apple Touch Icon?
First, This icon is good for your website SEO purpose, second, it is just an enhancement to the favicon icon. If this file isn't found in your web pages then Apple devices will use the screenshot of the pages as a favicon, which are looks like a white square.
Adding Apple Touch Icon To a Blogger Website
Here I have a solution or you can say enhancement for the favicon icon -
<link href='Apple-touch-icon-114×114.png' rel='apple-touch-icon' sizes='114×114'/>
<link href='Apple-touch-icon-72×72.png' rel='apple-touch-icon' sizes='72×72'/>
<link href='Apple-touch-icon-iphone.png' rel='apple-touch-icon'/>
Related: How to add Language Country HTML Codes in Blogger Website
Apple Touch Icon Sizes
As you are seeing so many different sizes of apple touch icon because Apple devices from different Retina display use different favicon icon images. iPad, iPhone 4/4s/5 needs 144×144 px while the original iPad ( iPad 2 ) uses 72×72 px.
I have searched a lot and found that nowadays iOS 7 and iOS 8 devices is using something different sizes -
iOS7 sizes -
- 60×60 px
- 76×76 px
- 120×120 px
- 152×152 px
- 167×167 px
Also for iOS 8 Sizes -
- 180×180 px
Should I have to use all different Apple Touch Icon Sizes Icons?
The answer is No. You don't need to use all those different sizes for apple touch icon.
<link href='Apple-touch-icon-iphone.png' rel='apple-touch-icon' sizes='60×60'/>
This is just enough to tell the Apple Touch Icon information to the Apple browsers.
Rating 4.5