Apple Touch icon for websites

html mobile apple-touch-icon
J82 picture J82 · Feb 24, 2011 · Viewed 90.3k times · Source

Up to now, I've been including the line for the Apple Touch icon in my head like this:

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

However, in the Q&A "What are the correct pixel dimensions for an apple-touch-icon?" it is stated in the accepted answer that three images are now needed according to Apple's guidelines.

So how would one go about inserting these into the head section of the code?

Answer

philippe_b picture philippe_b · Jan 15, 2014

Minimalist solution - Recommended

A common practice is to create a single 180x180 icon, which is the highest expected resolution, and let the iOS devices scale it down as needed. It is declared with:

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

Exhaustive solution - Not recommended

Apple specs specify new sizes for iOS7:

  • 60x60
  • 76x76
  • 120x120
  • 152x152

And also for iOS8:

  • 180x180

In addition, precomposed icons are deprecated.

As a consequence, to support both new devices (running iOS7) and older (iOS6 and prior), the generic code is:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">

In addition, you should create a 180x180 picture named apple-touch-icon.png.

Note that iOS looks for URL like /apple-touch-icon-76x76.png, if it does not find interesting stuff in the HTML code (a bit like what IE is doing with /favicon.ico). So it is important to keep the file names are they are above. It is also important to consider that Android/Chrome is also using these pictures.

You might want to know that this favicon generator can create all these pictures at once. Full disclosure: I'm the author of this site.

Related questions

Sharing link on WhatsApp from mobile website (not application) for Android

I have developed a website which is mainly used in mobile phones. I want to allow users to share information directly from the web page into WhatsApp. Using UserAgent detection I can distinguish between Android and iOS. I was able …

Read More
How to create hyperlink to call phone number on mobile devices?

What is the proper, universal format for creating a clickable hyperlink for users on mobile devices to call a phone number? Area code with dashes <a href="tel:555-555-1212">555-555-1212</a> Area code with …

Read More
Make an image responsive - the simplest way

I notice that my code is responsive, in the fact that if I scale it down to the size of a phone or tablet - all of the text, links, and social icons scale accordingly. However, the ONLY thing that …

Read More