Html5-boilerplate: Is there any need for the 6 different apple-touch icons when just one will work?

This is explained here: http://mathiasbynens.be/notes/touch-icons

"The downside is that these devices will load the large high-quality image, while a much smaller file would have worked just as well."
So, only if someone clicks "Add to home screen", then a slightly heavier png will have to load (larger only by a couple of kilobytes) ... this is perfectly acceptable as far as I'm concerned, and far better than creating 6 different sized icons... and especially better if you're including the HTML on the page to load all six.

Neil,
If you need a simple way to create these icons may I suggest the H5BP Multi-Layer FavIcons repo? I know it's a shameless plug but I used this again today and was finished with all 7 images, including the multi-layered favicon in under 10 minutes.

Hope it helps!

Ok, thanks. But I still don't agree that creating multiple specific graphics to target each individual device is the right approach (not a very 'responsive' approach). Creating one image is still faster/easier and cleaner, and I don't see an issue with delivering it to older devices when it's not adding any weight to the page load (it's only being loaded after the 'request' of adding to the home screen) and we're only talking about a couple of k in the difference between these images.

If it's only downloaded when added to the home screen, then I can see your point. Personally, I go the single-icon route too.

+1 for a single-icon (and a favicon.ico) no html links approach.

@mathiasbynens thank you for the thorough explanation of the touch icons. I had to laugh when I read the summary though. Not because of your suggestions but because of why I hate proprietary BS. Let me summarize your summary.

• In order to fully support Android you must use apple's proprietary html tags.
• If you only care about iOS then you don't need to use apple's proprietary html tags.
• The “lazy” approach is to do exactly what apple.com does.

Just to recap, there are two main reasons why having many different touch icons is the best solution:

• Performance / limiting data plan usage: avoid loading needlessly large images when adding to the homescreen.
• Art direction: in my experience, designers generally dislike relying on automatic resizing, and rather provide the icons in the appropriate dimensions themselves.

That said, I’m lazy and I use the single-icon solution as well. But that doesn’t mean it should be the go-to solution IMHO.

@ryanswedal :D

If the HTML links are included on the page, does anyone know if they get called on page load? If so, that's an even bigger argument for the one icon approach... and for not including the HTML link.

Back when I researched this, IIRC my tests confirmed that the touch icons weren’t requested on page load, not even with the <link>.

Good to know. Thanks!

Yeah, +1 for the single icon approach. The touch icons are not self documenting, so having 6 in the root without the ability to document a tool to sync them up is messy and maintenance heavy.

I agree with the problem of maintainability if you have all icons in the root. I don't really see a good solution but to add the <link> tags (symlinks don't really solve that problem).

But I don't think we should bloat the index.html's markup with these tags at the moment. Mobile Boilerplate does this tho.
Anyway I am pretty sure it is easy to find out how to move the icons to another folder. We even have a short section on this topic in our docs.

As of iOS 7, the recommended touch icon size for Retina-display iPhones went up from 114 × 114 pixels to 120 × 120 pixels. My post has been updated to reflect that.

Can we find a solution here? Do we want to leave it as is or move to the one icon approach?

Well my vote would certainly be for the one icon approach

On Wednesday, July 24, 2013, Hans Christian Reinl wrote:

Can we find a solution here? Do we want to leave it as is or move to the
one icon approach?

—
Reply to this email directly or view it on GitHubhttps://github.com/h5bp/html5-boilerplate/issues/1367#issuecomment-21507073
.

Neil Creagh

Sent from mobile: 087 2174891

http://www.fuel.ie

The less, the simpler, the better. If just one is enough and works why wouldn't we go with it?

+1 for one!

I also would like to take a simple and responsive way, but for icons there used to be one exception: icons in different scale may require redesign to make it clear at that size.

If you have a complex icon of, say 120x120 and want to use it in 32x32, it may become unrecognizable. Scale a small icon to a much larger one is not a problem with vector format, but designer may want to add more details.

http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077#module-67936509

Scroll down several pages from link above to see icons in 32x32 and 16x16 ... maybe it's not so close to this topic, but I think that's what should be considered when talking about icons in various size.

IMO in most situations one icon is sufficient. Providing a single large H5BP icon with a note in the docs about creating smaller icons to optimize for clarity and file size would be a good fix.

That said, H5BP is semi-opinionated so whatever is considered the "correct" method, regardless of simplicity, should be in the repo.

I've made a Pull Request which removes five of the six Apple Touch Icons in #1425.
Feedback much appreciated.

Please keep the main discussion within this issue.

+1

:+1:

+1

Is it okay if I admit I never knew why there were six in the first place and I'm happy that there will be one so I won't feel like I'm lazy not knowing the "why?"

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
— Antoine de Saint-Exupery

:+1:

I didn't have time to make it shorter.
— Blaise Pascal
:thumbsup:

I've been running for a while with just the single image. One downside is that many mobile browsers will request the other files. There is no need to reference them with a link tag in the HTML but I've gone back to including root directory files for all of the sizes in normal and precomposed just to avoid having my log full of 404 errors for those requests.

https://gist.github.com/davidhund/332316f82440ef4377f3 by @davidhund