Menu
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?
889
You can specify what icon your app should use by including a <link rel="apple-touch-icon" href="/example. png"> tag in the <head> of your page. If your page doesn't have this link tag, iOS generates an icon by taking a screenshot of the page content.
Name the image something like “apple-touch-icon. png” and save it. Now upload the image to your website (this example uses an upload to your site's images directory).
This icon is used when someone adds your web page as a bookmark. For multiple icons with different device resolutions like iPhone or iPad, add sizes attribute to each link element as follows − <link rel = "apple-touch-icon" href = "touch-icon-iphone.png">
“Touch icons” are the favicons of mobile devices and tablets. Adding them to your web page is easy, and I'm sure you already know how this works using HTML: <!-- In its simplest form: --> <link rel="apple-touch-icon" href="apple-touch-icon.png">
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:
And also for iOS8:
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.
51
Here you go, hope this helps.
If you want Apple to do the aesthetic bit for you (add the gloss) then you'd put in these to the <head> tags:
<link rel="apple-touch-icon" href="apple-touch-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" /> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" /> If you want to precompose the image, so that Apple displays it without the gloss, then you'd do this:
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" /> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" /> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" /> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" /> Providing you include more than one, the iOS device will look for the correct size and utilise that image automatically. As you can see from the names of the images in the example, the iPad with retina display needs an icon which is 144x144px, the iPhone 4/4S/5 needs an icon which is 114x114px, the original iPad (and iPad 2, as the screen resolution is no different) needs an icon which is 72x72px, and the original iPhone doesn’t need a size specification, but for your reference it is 57x57px.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
