How to webpage icon/favicon for all mobiles and desktops?

Following css tricks guest post tut here http://css-tricks.com/favicon-quiz/ which is a plug for this generator here http://realfavicongenerator.net it spits out quite a bit of supposidly needed code (like 12 links including xml pages) and like 15 different graphics. Surely this is over kill a little bit. I’m not about to put 15 server calls in my head for a favicon.

Currently I just have one apple-touch-icon.png (at 152x152) in my root with no link and this works fine for apple devices. Lower res devices just scale it down. Higher res scale it up. Apple too uses one 152x152 icon for its site.

So any one done this successfuly? I would like to account for the majority of devices with 2 or three graphics and 1 or 2 links. Not the but load that is suggested.

Here is all the code suggested. That’s crazy talk.

<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">
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Unless shown otherwise I think Im going to do soemthing like this…

For Apple 
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png">

For Android
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">

And exclude windows

And I need to read up on the precomposed graphic version keyword. I beleive that’s needed for androids. And I need to read up on the sizes attribute. Will it still scale the image if the size is included?

here is what I came up with. Then I read this guys post and it mirrored what I was going to do so I am happy with this method as of now. http://stackoverflow.com/questions/23849377/html-5-favicon-support. I’m letting old IE versions and windows tiles deal with nothing. Old iE still needs .ico and Windows tiles need tons of sizes and xml file. So the simple below code and two images in the root cover prob 75% of browsers.

<!-- Touch Icons - iOS and Android 2.1+ 152x152 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="full-path/apple-touch-icon-precomposed.png">

<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 96x96 pixels in size. -->
<link rel="icon" href="full-path/favicon.png">

By using the one image aren’t you in fact causing more bandwith and performance issues for smaller devices as they load the higher quality image and then resize it. Browsers don’t make 15 server calls for the image they just grab the one that they need.

Quote from Mathias Byens:
"
It’s perfectly possible to just create one high-resolution icon and use that for all devices. In fact, this is how Apple does it. Devices with smaller screens or lower display resolutions automatically resize the icon. The downside is that these devices load the large high-quality image, while a much smaller file would have worked just as well. This wastes bandwidth and affects performance negatively for the end user whenever the site is added to the home screen.
"

If all you care about is ios then you don’t actually need any html at all just have the images in your root folder with the appropriate names.

Hi Paul. Ya that’s true. However supposidly Firefox and chrome have a bug so that they download all the images linked. Can google it. My mindset is trying to cater to the most progressive devices (or at least middle ground) not the slowest of the bunch. With non critical stuff like this at least.

I tested that code and two graphics. Works on all ios and all desktops (IE11+) and my brothers android. And it’s simple. I like simple. I actually went with a 180x180 apple-touch-icon. That’s what the newest iphone 6 use and next ipad prob.

I will prob compress the pngs with tiny ping.

Actually I’m going to feed IE too. This spells out all the faqs http://realfavicongenerator.net/faq#.VGJqHog76rU.

Going to give the xml to ie11 and the 144 png to ie10. And put a ico file in my root with 16,32,48 image with no html. IE9 and less will look for it automatically in the root…

Can’t argue with you there :slight_smile: I don’t know why they have made this so complicated but I guess the problem is trying to please everyone.

I should know better by now than to skip corners as I always go back and fix it. Here is the final conclusion I came to with notes and links as to why. In the end I chose to support 100% of devices. And I just cleaned up the html and fully understand it now. My below code is all that is needed for full browser/OS support.

IN THE HTML:

<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
<link rel="apple-touch-icon-precomposed" href="full-path/apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, Opera, Google Play, ETC. 192x192 pixels in size. -->
<link rel="icon" href="full-path/favicon.png">
<!-- Windows 8/IE10. 144x144 pixels in size. -->
<meta name="msapplication-TileImage" content="full-path/windows8.png">

ICONS AND XML IN THE ROOT:

apple-touch-icon-precomposed.png (180x180 for IOS/Android)
favicon.png (192x192 Firefox, Chrome, Safari, Opera, Google Play, ETC) 
favicon.ico (sizes 16x16/32x32/48x48. IE6 - IE9)
windows8.png (Windows 8/IE10)
browserconfig.xml (Windows 8.1/IE 11+)
tiny.png (Windows 8.1/IE 11+)
square.png (Windows 8.1/IE 11+)
large.png (Windows 8.1/IE 11+)
wide.png (Windows 8.1/IE 11+)

All my explanation here.
http://www.websitecodetutorials.com/forum/viewtopic.php?f=10&t=730&p=1497#p1497

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.