Apple introduced a new meta tag named apple-touch-icon
, you can now display website icons on the iOS homescreen when you bookmark a site.
Our icon, by default, is 200x200px. But, with iPad and Retina devices, we need to provide more sizes. iPad requires icons with the size of 72x72px, while Retina devices need icons with 114x114px size.
So, all in all, we need to provide the icon in the following specifications ? within the <head> ? to support iPhone, iPad and Retina devices.
Simply create your icon just like you did for your favicon and load it in the root directory. Then add the following code in:
// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
<link rel="apple-touch-icon" href="/icon.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="icon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="/icon.png"/>
By default, iOS will automatically add the eye-candy effects to the icons.