Html5-boilerplate: Is there any need for the 6 different apple-touch icons when just one will work?
Just one apple-touch-icon png, set to 144x144px, will be used on older devices too (automatically scaled down), so I don't see the need for creating 6 different versions.
neilcreagh
All 28 comments
This is explained here: http://mathiasbynens.be/notes/touch-icons
mathiasbynens
on 30 May 2013
"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.
neilcreagh
on 30 May 2013
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!
jonrandahl
on 30 May 2013
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.
neilcreagh
on 30 May 2013
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.
necolas
on 31 May 2013
+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.
ryanswedal
on 31 May 2013
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
mathiasbynens
on 31 May 2013
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.
neilcreagh
on 31 May 2013
Back when I researched this, IIRC my tests confirmed that the touch icons weren’t requested on page load, not even with the <link>.
mathiasbynens
on 31 May 2013
Good to know. Thanks!
neilcreagh
on 31 May 2013
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.
tchalvak
on 31 May 2013
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.
drublic
on 31 May 2013
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.
mathiasbynens
on 11 Jun 2013
Can we find a solution here? Do we want to leave it as is or move to the one icon approach?
drublic
on 24 Jul 2013
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
neilcreagh
on 24 Jul 2013
The less, the simpler, the better. If just one is enough and works why wouldn't we go with it?
sarukuku
on 24 Jul 2013
+1 for one!
Volker-E
on 29 Jul 2013
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.
shunner
on 30 Jul 2013
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.
robwierzbowski
on 3 Aug 2013
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.
drublic
on 30 Aug 2013
+1
sarukuku
on 30 Aug 2013
:+1:
webhat
on 30 Aug 2013
+1
neilcreagh
on 30 Aug 2013
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?"
roblarsen
on 30 Aug 2013
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:
FagnerMartinsBrack
on 30 Aug 2013
I didn't have time to make it shorter.
— Blaise Pascal
:thumbsup:
robwierzbowski
on 30 Aug 2013
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.
douglsmith
on 10 Nov 2013
https://gist.github.com/davidhund/332316f82440ef4377f3 by @davidhund
mathiasbynens
on 16 Apr 2015
Related issues
coliff
·
12Comments
Vincent2015
·
7Comments
roblarsen
·
5Comments
gaurav21r
·
21Comments
coliff
·
14Comments
Most helpful comment
"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.