Nice write up — one other platform to add to the equation: BlackBerry (OS6) also supports apple-touch-icon (although it appears not to support precomposed)

More info here: http://supportforums.blackberry.com/t5/Web-Development/Adding-WebSite-to-Home-Screen-Icon/m-p/568119

Also, I believe Firefox Mobile supports touch icons too (it displays them more like a favicon, in the top left of the browser window).

Your screenshots have a different interface. Lion!

Thanks for the great article. In my project I have been using JavaScript and user agent detection (ugh!), to build the link rel="apple-touch-icon" dynamically.

I will rip it out and replace it with this.

Looks like a bit of a messy system to me, I guess scanning the root is okay. But if we add these link tags, the IE9 meta tags etc etc we'll soon have a 1000 line head block!

Using rel="apple-touch-icon apple-touch-icon-precomposed" (or vice-versa) does not work in iOS 4.2 (and likely before), it ignores the whole declaration, so you must put composed and precomposed on separate LINKs.

Opera 11.10 supports both apple-touch-icon and precomposed for its Speed-Dial feature. Minimum of 114×114px, else it’s ignored. Maximum of 260×195px else it will be resized to max.

If more than one icon is available, Opera uses the largest; if multiple icons with the same size are available, Opera will use the first one in the HTML. http://dev.opera.com/articles/view/opera-speed-dial-enhancements/

I recently did a post expanding on the listing of necessary icons and images for mobile apps, you might find it useful: http://savagelook.com/blog/android/mobile-developers-icon-image-checklist

Great article. One thing I’m trying to find is if it’s possible to change the URL associated with the icon? For instance, if an icon is added from my homepage can I control what page the icon opens?

I got nothing on my Nexus S running 2.3.4... But I'm not sure I set the link up right. I might have another play later.

Hi, what about behavior of devices if these icons are in root directory (and don't need to be linked)? Is it the same? Or do they choose the right then?

Thanks a lot for answering… -A.

Sorry. You’re right, thanks.

Great overview, thank you!

With the last W3C validator update, apple-touch-icon no longer validates as a registered rel value.

http://zevbrokeit.posterous.com/relapple-touch-icon-no-longer-validates

Arrgh. I see that now.

Of course, I'm not even an Apple person, and I don't wish them to write the spec with their non-semantic name all over it. But I am a firm believer in the spec being written to follow the cowpaths. If they (and also Android) have the browsers to support it, shouldn't we push to have apple-touch-icon registered as well?

Mathias:

Why only apple-touch-icon why not apple-touch-icon-precomposed, too? I don’t have an iOS device here, so I can’t tell if it actually works as a rel value or if it only works as a magic file name. Apple’s docs kinda suggest it works as both. (Why did they make file names magic anyway?)

I started seeing queries in my server logs for these PNG files even though I don’t have them on my system, nor do I have any links to them in any of my HTML files. LOL. So I added a soft link for apple-touch-icon.png to some 50 MB file on my system. Anythying that does a GET on a web server without first finding that filename in a parent HTML file deserves whatever it gets.

iOS appears to to always add rounded corners and drop shadow, whether the icon is precomposed or not.

Is there any way to define custom text for the Home Screen icon? At the moment, it uses the page title and truncates it. My page title has a bit of descriptive text in it too for SEO purposes, but i'd like that to be removed for the Home icon.

I cant find any answers that say this is possible.. yet..

Hi, great post. Is it possible to have a different web page title for Add to Home Screen, so it’s shorter? Without using some JavaScript to check. Thanks.

On browsers I’d like the proper webpage title, and a shorter version if they add to home screen on iOS device.

Just what I was looking for to get the ‘shine’ effect off of my icon. Thanks a lot!

Thanks, we were seeing a lot of 404s for these files in the logs, this sorts that out.

I love the fact that there is an nonHTML version. Thanks for sharing!

I tested your no-HTML approach in Android 3.2.1: Home screen bookmark to this page is a custom touch icon.

Does anyone know if there’s any problems serving these icons from a shared domain… Just trying to save some bandwidth :)

Just a heads up — it looks like touch icons in a password-protected directory aren’t accessible (tested on iOS5). This make sense, as the icons are requested by the system, not the browser (where a user may have typed in a user/pass).

Hey Mathias,

Great writeup! Just thought I should let you know that I saved this page on my HTC Thunderbolt running Android 2.2.1 and I only got Android’s default bookmark icon.

Before reading this article, I was messing around on another site of mine, and I placed my apple-touch-icon.png file at the root, and removed the link to it from the site’s <head>. This caused the site icon to appear inside Android’s default bookmark icon. Whether it was the favicon or the apple-touch-icon being used, I don’t know. I’ll do some further testing if I have time and let you know.

Ah, what a great mess this relatively simple thing is. Thanks for the excellent writeup!

One additional note: the default browser of the recently announced MeeGo-based Nokia N9 (and N950) device is able to add sites to application grid as well, but doesn’t support the -precomposed version. So, apple-touch-icon.png is needed to make the site play nicely together with this device. the icon can be just placed to the root of the site, no need to add a link to it in the <head>.

And to confirm, yes, this current page works well with N9, the icon is shown as it should be.

Apparently even sites such as mobile.twitter.com or touch.linkedin.com can’t get this right — it’s a bit frustrating.

Hey,

I'm running into a brick wall with this.

I have a HTC EVO and put an icon at http://mikecowles.com/apple-touch-icon-precomposed.png in the root and in the folder of the mobile version I’m working on at http://mikecowles.com/mobile/apple-touch-icon-precomposed.png. I made it the lazy 114px size and have tried bookmarking the site and always get the default red ribbon with the star, icon.

Can you offer any help?

Thanks very much! =]
Mike. <><

By far, the best touch icon tutorial I've found. Saved my life with the reverse order, thats a must tweet tip.

thanx!

George: That’s an awesome idea. If my personal site kept on getting those requests I’d totally do it too. Sadly I don’t think it would go over well if I did that on a customer’s site.

Ajay: Yes, a shorter title, different from your descriptive/long SEO title is possible:

<title>Long SEO title</title>
<script>
  document.title = 'Short display title';
</script>

Luke: No, without JavaScript it’s not possible, but how many iOS users disable JavaScript?

Mike: I’m having the same issue on my website when testing with my HTC Sensation. The fact that it works for Mathias makes me think that HTC Sense ignores apple-touch_icon.png while stock Android does recognize it.

Red Feet: Oo! Thank you! That’s exactly what I was looking for! Namely, a way to control the name given to the Apple Touch Icon that gets saved to the iOS desktop, while keeping my longer, carefully crafted title for SEO! Yes, I still wish I could set the ATI name directly, and thus keep and show my homepage title of choice. However, in the meantime, this is a compromise I can live with.

@Mathias: Maybe put a mention of this title-trickery gem up in the main text? I confess I was about to skip the comments and continue searching elsewhere. Glad I kept reading!

Can I remove the !-- tags?

Ajay: I, too, wanted to have a different page title assigned just for instances of homescreening in iOS and I found the solution online — works perfectly: http://studiohyperset.com/itouch-home-screen-short-title/2337

A note about transparency: if you use PNG images with alpha channel (transparency) iOS will make them opaque and use a black background instead. This happens even if you use the precomposed option!

Android supports (as far as I tested) transparency on precomposed icons (maybe on normal icons, too). You can create really nice icons with transparency on Android, because the OS does not insist on this boring rounded edge button style.

Right now I’m trying to set up a line of <link> tags with different parameters, to provide iOS with an opaque version (because I don’t want black background) and a transparent version for Android…

Sonya: A note about changing the page title with JavaScript — be careful with manipulating the page title this way. Google and other search engines could interpret this as bad SEO.

No matter what I've tried I cannot get these icons to show on my HTC Sensation. I always get the red ribbon bookmark icon. Has anyone been able to get past this on this phone?

Sonya: Ooo! Lovely script refinement! And that Unicode-escape demo is a nice touch. Many thanks! (For a few additional usage notes, see comments "over yonder." )

Great article. It helped me figure out how to implement the precomposed versions of web clip images. Thanks.

Great stuff. Been looking into the best route/order to place this. I think I prefer the HTML route though.

I just downloaded HTML5 Boilerplate, unzipped it and copied it up to my website without any modifications, and favicon did not show. I tried it in IE9, FF, Opera, and Safari. Nothing. Granted, I am in a shared environment at Network Solutions and maybe they are doing some caching but this was a brand new website. I was very disheartened after watching 2 1/2 hours of HTML5 Boilerplate videos only to find that what seems to be basic web functionality (favicon?) did not work. What am I not understanding, what am I missing?

It’s worth pointing out that Reeder, a popular Google Reader client, takes apple-touch-icons even further: its non-Retina icons are 157×157px, so its Retina icons are 314×314; that’s the size I serve up, and it scales down fine.

Does anyone know how to control the title when a person adds the icon to their screen?

Saving this page to the home screen on Android 4.0 (on Asus Transformer TF101) produces a nice custom icon (white ‘m’ on the green squares).

And unfortunately a title truncated part way through the second word.

So no real need to use the rel= links soon (maybe now), the older Androids that use them will fade away.

Hi @Mathias, nice post.

I haven’t found all I was looking for. I added two <link> tags in my <head>:

<link rel="apple-touch-startup-image" href="/images/Apple/apple-touch-startup-image.png" />
<link rel="apple-touch-icon" href="/images/Apple/apple-touch-icon.png" />

And that’s just working great client-side. But in my server log I’ve got several 404 not found errors that are very resource-consuming for me: looking for /apple-touch-icon-72x72-precomposed.png, /apple-touch-icon.png, etc… All you described in you “No HTML” section. Is there a way to avoid Apple to look for all versions if I do not want to provide them and reduce the 404 errors?

Thanks a lot for your answer :)

Is it possible to use a combination of the link method and WebKit implementations at the same time? It appears the wrong size image is being picked up on my Samsung Galaxy SII using the link method.

You can see it here: http://www.whatsitworth.net/

I am trying to create a custom icon for an imbedded web server. Think the web server may serve up the pages slightly differently than a traditional server and the pages don’t live on the server as a traditional html file. They are created on the fly when they are requested. I have spent all weekend trying to get this to work and would just give up and say it wasn’t possible except for the fact I can get it to work on an iPhone 1 (IOS 4.2.1).

I can not get it to work on and iPhone 4, or iPad 1 or iPad2 (IOS 5.1 and OS 5.1.1).

To get the iPhone 1 to work I had to place the apple-touch-icon.png file in the images folder (it did not work in the root or any other folder). In an attempt to get it to work on the other devices I have tried the file in every folder on the server. I also modified the file that generates the html on the fly to include in the <head> tag:

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

I created the different size png files and tried them in a bunch of directories. I have also tried it with an absolute path to the .png files.

I can put the code and files on a traditional server and get them to work on all devices. I cant figure out why it work on the iPhine 1 and not the other devices Is it the IOS version, screen resolution, etc.

Any ideas?

All this SEO mythology is bunk anyway. Just optimize for humans and let Google do its job.

Great post. I wish they made it more standard. I’m currently trying to set it up on my site, however I’m still getting wrong sizes and sometimes I’m getting requests to / root of the website even though all my pages reference .png images from relative path.

I wonder if it is caused by someone bookmarking it on the device?

Anyway thanks for the post.

Is it possible to use data URLs to have the apple-touch-icon encoded as text?

That’s some serious work here. Thank you for doing that.

Is it possible to have different iOS icons for different domains?

i.e.

yourwebsite.com/domain1 = iOS icon 1

yourwebsite.com/domain2 = iOS icon 2

yourwebsite.com/domain3 = iOS icon 1

This adds a good update to your post: http://www.zen.co.uk/blog/setting-a-home-screen-icon-for-your-website-on-ios-and-android-devices/

I guess if you do not care about force-feeding a larger icon to smaller devices, this two line code version might just be all we need now in 2013.

Thanks a lot for that useful tip.

I was wondering if it was ever possible to replace all those PNG files by a single one .svg which would then be called by all the declaration as well.

I.e.

<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-precomposed.svg">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-precomposed.svg">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-precomposed.svg">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.svg">

I must admit that I’m still not familiar enough with all those devices (and with Raphael.js either ^^) to answer this today?

Thanks again and gr33tz from one of your downstairs french neighbour ;)

I noticed that Apple link in your article takes us to an icon that is 129×129px. That’s not the recommended dimension, is it? How come?

Thank you/ Dank je wel/Danke/ Merci, for the informative details.

It seems bonkers that once again, just like Micro$oft always does, another software organisation has broken world standards, and most people have not objected.

Great post! Please add instructions for Windows 8/IE 10 tiles images.

Android browser testing with HTC Thunderbolt on Android 4.0.4:

• Dolphin = failure
• Firefox = success
• Chrome = failure, uses modified favicon
• Default Android browser = failure

Just tried it with a Samsung Galaxy SIII (4.0.4) and default browser. It just shows the favicon inside the red ribbon. Tried it for this site and some other sites like apple, bbd, etc. Anything we can do about that?

On the matter of shorter vs. longer web page titles, it looks like the HTML spec itself allows for this already, without needing anything new added to the spec, and requiring absolutely no proprietary vendor metatags (e.g. Mathias’s <meta name="apple-mobile-web-app-title" content="Short title for home screen"> above).

It’s so simple! According to the HTML 5 spec (and I believe HTML 4 as well), the title="…" attribute is a global attribute that can be used with any HTML tag! That includes the <title> tag itself!

So, hypothetically, you could do this:

<title title="Long SEO-friendly overly verbose page title goes here">Short title here.</title>

Voila! This should even validate nicely, as-is!

Now all that’s needed is for user agents (browsers and spiders) to decide what to do with that. I recommend a “smart” approach: For touch icon titles and the like, always use the shorter title that is the inner content of the <title> tag.

For browser window titles, likewise display the inner content of the <title> tag if the browser window is too narrow to display the longer one in the title="…" attribute (e.g. portrait orientation, manually reduced in size, etc.).

Search engines can simply use both as they see fit for their metadata and rankings.

There’d also be no reason that the two couldn’t be swapped (longer title as the tag’s inner content, shorter as the title="…" attribute, instead of vice versa) and have the user agent simply react intelligently based on which is longer and which is shorter, but traditionally the title="…" attribute is used to provide longer descriptive text for some usually shorter or smaller element via a ToolTip (e.g. for <img>, <a>, <abbr>, <acronym>, etc. tags), so that should be the preferred usage.

Good and revealing writeup — I was interested as sizes was causing my page to be invalid — I’m somewhat picky. It’s interesting to note that there’s no real advantage to having the various icon sizes other than what the user has to download and I have to ask — are we really that bothered about a few KB? The difference between my largest and smallest icons is 5 KB. So I don’t think it’s fair to call resorting to one icon on the server with no HTML as being ‘lazy’; I think it’s extraordinarily practical and certainly the route I’ll be taking from now on!

Does anyone know whether Android or iOS care about the file name (if I’m not using the “Look ma, no HTML!” method)? I.e., can I have something like this

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/toy_rocket-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/toy_rocket-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/toy_rocket-72x72.png">
<link rel="apple-touch-icon-precomposed" href="/toy_rocket-57x57.png">

and expect it to produce the correct icons?

Does anyone know of any site which can preview what a touch icon would look like when displayed on iOS — don’t have access to any iOS/Android device, but want to see what the icon would look like after it has the rounded corners, shadow and reflection added to it by iOS.

Mathias: Thanks. Guess I’ll have to see if I can get the Android Emulator working, but that seems a lot of hoops to jump through just to look at an icon! I’m just wanted to add a simple icon to a website, as I’m getting “404 not found” errors in my log files from devices requesting these icons. Just wanted something quick and easy to be able to see what the end results would look like.

I’m using a Windows system, so can’t use iOS Simulator (unless I also want to start trying to build a virtual system with a hacked version of OS X on it etc).

There are a lot of sites that say they help you create these images, but none seem to offer a preview of what the results would actually look like when viewed on an iPhone etc.

Android browser Firefox testing with HTC Thunderbolt on Android 4.0.4: success.

KM: Slow and choppy but shows your home screen icons for different Android builds/screens: https://www.manymo.com/emulators.

Why doesn’t Apple document this themselves? Is it completely unsupported?

According to the Apple document, the new high resolution sizes are 120×120 for iPhone and 152×152 for iPad with advice about dividing by 2 for the standard resolutions. I assume this means that 60×60, 76×76, 120×120 and 152×152 will all have to be added?

Also, it looks like you are saying that apple-touch-icon-114x114.png has been superseded but shouldn’t this icon size still be provided for older devices that can’t be updated to iOS7 etc?

Thanks for keeping up to date with this stuff as it is very hard to find anything official on the Apple website.

Mathias:

I’d rather not add separate 60×60px and 76×76px icons to that. Also, I seriously doubt iOS 7 will be made available on non-Retina iPhones and iPads (given their age) — in that case, there’s no reason at all to have those extra icons there.

Excellent point! I'm all in favour of keeing things simple! :)

Coast by Opera (our new lean-back iPad browser) prefers images at 228×228px, with the markup <link rel="icon" sizes="228x228" href="icon.png"> in the <head>, but will fall back to Windows 8 tiles, Apple touch icons or favicons if the 228px square isn’t found. See https://dev.opera.com/blog/introducing-coast-by-opera/ for more details.

Thanks for the excellent write-up. :-)

However, one question: just how much of a performance hit does serving one high-resolution icon have, exactly? At a guess, iOS should logically cache the scaled version of an icon if it exceeds the ideal dimensions for the device’s screen resolution. As for bandwidth, well, if you’re careful with image compression (using crisp-quality PNGs, thereby reducing the colour palette), it wouldn’t be too taxing.

There are various <DEL> elements which are not actually incorrect, but still apply to users running iOS < 7 (I for one won’t be upgrading). You should merely add the OS constraints and new sizes, and leave the old sizes as they were.

Thanks for the amazing write up! I'm a big fan :)

I have one question though. You explained the fancy effects that were added to touch icons in iOS 6, how have those effects changed in iOS 7? What does iOS 7 add to non-precomposed icons?

Calley: It just doesn’t do anything, but rounding corners with the new design curves (not precisely rounded).

See Safari Web Content Guide states:

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 “App Store Icons” in the iTunes Connect Developer Guide for details.

And this blog post for the corners explanation.

Since Retina displays came out I’ve been making all my webclip icons a single size, 512×512px. They look great at all sizes and I’ve never had a problem with them loading slowly. And I suspect that Apple is probably hard at work on SuperRetina displays since they’re already making their icons 1024×1024. IconSlate is the best tool I’ve found for creating webclip icons and favicons. Favicons are a little easier to work with because you can embed several sizes (up to 256×256) in a single .ico file.

Should we put all of four links into the website or just one of them accordingly to iPhone or iPad…?

I put all four and test it in iPhone 5s, it looks like the latest icon is always used (152×152px).

<link href="apple-touch-icon.png" rel="apple-touch-icon">
<link href="apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link href="apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76">
<link href="apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120">
<link href="apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152">

For Android, when I ‘add bookmark’ and ‘add to home screen’, the favicon is used instead of the apple-touch-icon-precomposed.png as I was expecting, like this:

Am I missing something?

I’ve made a gist with the (what I think is) the latest syntax. Let me know if it needs updating.

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- For the iPad mini and the first- and second-generation iPad on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<!-- For the iPad mini and the first- and second-generation iPad on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">

<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">

<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">

<!-- Chrome v31+ for Android -->
<link rel="icon" sizes="196x196" href="apple-touch-icon.png">

@Kevin/Mathias: Shouldn't the last Android Icon be 192x192 and not 196x196? (XXXHDPI = 4x MDPI, so 4x48=192) See http://developer.android.com/design/style/iconography.html and http://iconhandbook.co.uk/reference/chart/android/

Clickable links..: http://developer.android.com/design/style/iconography.html and http://iconhandbook.co.uk/reference/chart/android/

To answer my own question: Chrome's recommendation seems to differ from the app one's: https://developer.chrome.com/multidevice/android/installtohomescreen

Even if only one icon will be used, aren’t all of them downloaded? I think that’s the reason why people just add the bigger one: it’s true that then also the less powerful devices will download it, but that’s better than downloading ALL of them to just use one. At least it happens with stylesheets they are all downloaded even if you use media queries in the media attribute, even if only one of them will be used. Would love to hear your opinion.

Should we be using the <!-- Chrome v31+ for Android --> line in our sites? Can you add that line to your version, Mathias?

Will there be updates to icon sizes for the iPhone 6 and iPhone 6 plus?

For Opera Coast on iPad and iPhone as well as the new startpage in Opera 25 Beta, you can assign a lovely icon using <link rel="icon" href="$URL" sizes="228x228">.

With the robust image selection tools now in sizes/srcset it feels like a great opportunity for Apple to clean up this mess. We could use a single <link> element.

Since updating to iOS 8 my icons are no longer working - anyone else seeing this issue?

Ken: Same here. iOS 8 on iPhone 6 and the icons aren’t working for me, although I don’t have all the options described on this page defined in my document. Will try/test tonight.

Here’s some more icon-related mess.

Same here: they failed on my iPhone 5 running iOS 8. Then I got an iPhone 6 and they worked ’til the first reboot and now they’re gone again, it’s a real pain. Does anyone know what change in the code caused this?

This is the code I use, I don’t understand it by the way, it just worked :)

<link rel=apple-touch-icon href=http://www.weebly.com/uploads/1/2/6/3/12633714/9093919_orig.png>

I find this proprietary mess so lame. It would be easier to use one icon file and size, 192×192 now? Just add a few lines in .htaccess or httpd.conf as suggested in the article:

RewriteRule ^apple-touch-icon-144x144-precomposed.png$ icon-192x192.png [L]
…
RewriteRule ^touch-icon-192x192.png$ icon-192x192.png [L]

I use these just to clean my logs from the multiple requests for multiple sizes, no html tags, and can’t tell how it looks in smaller sizes, can someone try that and tell us?

Has anyone here had issues with their old icon being added to home screen after you have updated it? I am about to rename my image files to see if it clears the old ones out.

But what should you do when the page is requested once and the icon is requested 5 times?

xx.xx.xx.xx - - [11/Dec/2014:13:42:52 +0000] "POST /pagename/ HTTP/1.1" 200 3281 "http://www.website.url/pagename/" "Mozilla/5.0
xx.xx.xx.xx - - [11/Dec/2014:13:42:57 +0000] "GET /img/icon/apple-touch-icon.png HTTP/1.1" 200 5441 "-" "Mozilla/5.0
xx.xx.xx.xx - - [11/Dec/2014:13:42:57 +0000] "GET /img/icon/apple-touch-icon.png HTTP/1.1" 200 5441 "-" "Mozilla/5.0
xx.xx.xx.xx - - [11/Dec/2014:13:42:57 +0000] "GET /img/icon/apple-touch-icon.png HTTP/1.1" 200 5441 "-" "Mozilla/5.0
xx.xx.xx.xx - - [11/Dec/2014:13:42:57 +0000] "GET /img/icon/apple-touch-icon.png HTTP/1.1" 200 5441 "-" "Mozilla/5.0
xx.xx.xx.xx - - [11/Dec/2014:13:42:57 +0000] "GET /img/icon/apple-touch-icon.png HTTP/1.1" 200 5441 "-" "Mozilla/5.0

The icon is on the correct path.

Try using this: http://realfavicongenerator.net/.

Thanks for this information, it’s very detailed and useful.

I have been wondering for ages why we keep getting all these apple-touch-icon messages in our server logs (hundreds most days) especially when our sites don’t define any.

I do have to wonder why Apple can’t just be happy with the good old favicon.ico like everything else and has to cause people a lot of extra work.

Mathias,

You appear to have a more general idea about how things should work so I hope you can help me. Suddenly the icons on my iPad Mini changed to black and white they have some type of geometric symbol on them — this is the best way I can describe them. Have you run across anything like this some of them remained with the original icon pics on them but mostly all black and white. They are very hard to work with. My screen is not black and white; everything else is fine.

Thanks, Joy

I find it crazy to impose to desktop browser to make 20 extra HTTP requests to download these useless images!

Hence I leave them in the root without linking them in the HTML, iOS should be fine and hopefully Android (in 2015!) has also smartened up about this!

I just do this:

cd /var/www
touch favicon.png
cd /var/www/example.com
ln -sf ../favicon.png apple-touch-icon.png
ln -sf ../favicon.png apple-touch-icon-precomposed.png 
ln -sf ../favicon.png favicon.ico 
ln -sf ../favicon.png favicon.png