A device which lots of your visitors will use to access your website are iPhone and iPads. You can't ignore how important it is to allow users of these devices easy access to your site. There are a few ways you will do this, one of them is responsive design. Use media queries to define how the website looks on these devices. If you want to start working with media queries on apple devices here is a boilerplate for iPhone and iPad media queries. Another thing you need to do for the apple devices is to define the apply touch icon in your head tag. This is a tag that defines an icon to use when on web clips. Web clips is a feature on apple devices to to display an icon on the home screen of iOS for the website. To define the icon to use for the apple-touch-icon is done the same way as you define the favicon.

<link rel="apple-touch-icon" href="apple-touch-icon.png"/>

The default size of the icon should be 57px x 57px. As some of the devices are different with retina displays you might want to define a different icon for different devices, if so use the following snippet.

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-retina-ipad.png" />

Special Effects

On these icons iOS will add special effects to the icons such as rounded corners, drop shadows and reflected shines. If you don't want iOS to add these effects to the icons then you have to define the icon as precomposed.

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">