Apple Touch icon for websites

Asked 24/2, 2011 at 21:36 Answered 22/2, 2023 at 11:26

106

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?

Bedel answered 24/2, 2011 at 21:36 Comment(0)

130

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.

Vociferant answered 15/1, 2014 at 17:59 Comment(13)

Are all the files in each <link> tag downloaded if they are not in the client's cache? Regardless of where the page is requested (phone, tablet, pc, windows, android...)? I'm a bit concerned about the performance implications... – Situation 18/6, 2014 at 20:36

As of iOS8, there is also the new 180x180 resolution. You don't really have to link to the icons from HTML either - unless you want specific icons for just one particular page. Apple has the recent list of what sizes they like: developer.apple.com/library/ios/documentation/UserExperience/…. Look for the entry "Web clip icon" in the table. – Package 19/10, 2014 at 16:34

@Package That's right, thank you for the reminder. I updated the answer for the 180x180 icon. Note that other browsers also use these icons, such as Android Chrome. So declaring them can be useful, even if Safari does not require it. – Vociferant 20/10, 2014 at 20:40

Adding so much data in the header of each page seems unnecessary to me - if the icon is not huge in the 180x180 version (mine is usually between 2kb and 5kb) then just having <link rel="apple-touch-icon" href="/apple-touch-icon.png" type="image/png" /> is enough. And even if you create different sized pictures, as far as I can tell you can just remove all apple-touch-icon links and iOS will look for the files itself, starting with the preferred size (like apple-touch-icon-180x180.png) and using apple-touch-icon.png if no other files are found. – Mauriciomaurie 17/4, 2016 at 22:28

@Mauriciomaurie That's right, you can totally use only one declaration. As the founder of RealFaviconGenerator, I'm working on this one-size-fits-all solution. There is a possible catch, although iOS does a good job: iOS uses an algorithm similar to Mitchell to scale down the icons. Depending of your specific design, that may not be what you want. I'll update my answer once I have more feedback on this. – Vociferant 19/4, 2016 at 21:31

RealFaviconGenerator is really great by the way, the only thing I thought could be better were the many header links which are not strictly necessary - both when generating new favicons and checking on how a website is doing. Maybe as a further improvement the website could show different possibilities - which parts are strictly beneficial (and what they do/more explanation), and what parts can be left out and are usually auto-detected by the browser (as far as I know iOS also looks for the specific sizes in the root directory if the page does not have any information on apple-touch-icon). – Mauriciomaurie 20/4, 2016 at 12:21

@Mauriciomaurie Thank you! Yep, a lighter package would be great. That's the spirit of the upcoming release: github.com/RealFaviconGenerator/realfavicongenerator/milestones/… – Vociferant 20/4, 2016 at 14:6

@Vociferant Sounds great, thanks for the great tool & your work on it! – Mauriciomaurie 20/4, 2016 at 14:25

Your website is awesome, thanks for the tool, I donated to your fine work ;) – Swirly 1/1, 2017 at 18:22

Thank you very much @frankies ! – Vociferant 1/1, 2017 at 22:42

Is it possible to just have one image and let Apple automatically resize it on their end? – Manlike 11/3, 2019 at 22:44

@AaronFranke Absolutely! My answer was quite old, I've just edited it. Good thing you asked! – Vociferant 12/3, 2019 at 17:55

HI , I did all what ou said above, but In Ipad Air2 , the icon is not generated, but instead there is the first letter of the page title. – Blotch 27/2, 2020 at 15:25

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.

Fabrienne answered 12/4, 2011 at 12:16 Comment(4)

Why does precomposed mean without gloss? I can't make the definition of precomposed jibe with "without gloss". And no, I'm not being sarcastic, I really want to know. – Okinawa 27/6, 2013 at 19:7

@Mark0978 I read it to mean: "it's already composed, i.e. "iOS styled" (by you), so iOS won't mess with it (except to round the corners)" – Hafner 27/6, 2013 at 23:23

This is outdated as of iOS 7. – Karleenkarlen 12/3, 2014 at 23:55

Is it possible to just have one image and let Apple automatically resize it on their end? – Manlike 11/3, 2019 at 22:45

Since a few of these answers are out of date already, I recommend using http://realfavicongenerator.net/ to generate all the images and markup - I donate a couple euros each time I use it in the hope that it enables them to keep up to date as to what is currently valid on iOS, Android & Windows, so I don't have to.

Radiology answered 24/6, 2015 at 10:58 Comment(3)

(I've just noticed one of the other answers here is from the author of realfavicongenerator.net - please upvote his answer instead of mine!) – Radiology 29/6, 2015 at 11:11

Support this developer, because this site is perfect – Anagnorisis 30/8, 2015 at 17:20

Tim + @Anagnorisis : Thank you for your support! (yep, I notice your comments just now) – Vociferant 20/4, 2016 at 14:52

As of 2018, Apple Developers Website recommends the following for iOS devices:

  <link rel="apple-touch-icon" href="touch-icon-iphone.png">
  <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
  <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
  <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
  <link rel="apple-touch-startup-image" href="/launch.png">
  <meta name="apple-mobile-web-app-title" content="AppTitle">

App Title will replace your website title. Usually, you'd want that. Startup image is what will appear while the app is launching.

Barbershop answered 7/1, 2018 at 16:43 Comment(0)

Specifying a Webpage Icon for Web Clip

You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iOS.

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png

To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:

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

In the above example, replace custom_icon.png with your icon filename. To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:

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

<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">

<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60. If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.

If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:

apple-touch-icon-76x76.png

apple-touch-icon.png

See Icon and Image Sizes for webpage icon metrics.

Note: Safari on iOS 7 doesn’t add effects to icons. Older versions of Safari will not add effects for icon files named with the -precomposed.png suffix. See First Steps: Identifying Your App in iTunes Connect for details.

Source: Apple touch icon specs

Analects answered 10/5, 2015 at 14:57 Comment(1)

hi do you know where i can download those icon png images from? – Gripper 8/5, 2018 at 4:48

Apple Touch Icon deprecated

Since Safari 15.4, you can use Manifest Icons instead of the proprietary meta tag.

The whole spec for Configuring Web Applications from Apple is now obsolete.

Diegodiehard answered 22/2, 2023 at 11:26 Comment(0)

From my pull-request to https://github.com/h5bp/mobile-boilerplate (with iPhone 6 icons):

<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">

<!--
    Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
    If it’s not defined on that size it will take 128×128.
-->
<link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">

Mardis answered 14/10, 2014 at 10:26 Comment(0)

I have never read any apple specs, I must admit, but according to logs on my site, these images are required in root:

apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-120x120.png
apple-touch-icon-152x152.png

apple-touch-icon-72x72-precomposed.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-152x152-precomposed.png

Seashore answered 20/5, 2014 at 10:55 Comment(0)

You can use omg-img for generate all sizes and colors for popular icons. For example:

<link rel="apple-touch-icon" sizes="152x152" 
      href="https://img.icons8.com/color/152x152/anonymous-mask.png">

This tag returns next image for iOS devices:

Ly answered 14/6, 2018 at 6:24 Comment(1)

OMG-IMG community community.icons8.com/t/faq-omg-img-for-true-developers/56 – Ly 17/9, 2018 at 3:49

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Apple Touch Icon deprecated

Recommended topics

Hot tags