CSS

Setup Apple Touch Icon

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">
Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

Your email address will not be published. Required fields are marked *