When creating a new WordPress responsive themes or any mobile website for that matter, there is one thing you shouldn’t forget, that is to add mobile icons for the iOS devices.
This is important for brand consistency and is better way for the user to distinguish the bookmark from other sites. Add the following code within the <header> tag. Notice that we are adding different image sizes for different devices and a start or splash icon. Make sure to update the image URL.
<link rel="apple-touch-icon" href="/icon.png" /> <link rel="apple-touch-icon" sizes="57x57" href="/icon-57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/icon-60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/icon-72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/icon-76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/icon-114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/icon-120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/icon-144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/icon-152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png">
By default iOS adds two effects to images, a glare and a drop shadow. If you don’t want the effects to be applied or you have added your own use the following code instead, it will prevent iOS from applying the effects.
<link rel="apple-touch-icon-precomposed" href="/icon.png" /> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/icon-57.png"> <link rel="apple-touch-icon-precomposed" sizes="60x60" href="/icon-60.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/icon-72.png"> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/icon-76.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/icon-114.png"> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/icon-120.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/icon-144.png"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/icon-152.png"> <link rel="apple-touch-icon-precomposed" sizes="180x180" href="/icon-180.png">
