6

So as to waste some more time today, I converted a .jpg file to .ico and put it in favicon.ico. The .jpg is less than 1KB big; the .ico file is ** 60KB ** !!, bigger than the html page I'm putting it on.

I used the online converter at

http://www.coolutils.com/online/image-converter/

60KB cannot be a reasonable size for an icon. Can it?

Thanks!

-- pete

Pete Wilson
  • 8,610
  • 6
  • 39
  • 51
  • 1
    What is the pixel size of your JPEG file? Of the generated icon? – ChrisJ Mar 11 '11 at 20:20
  • The jpg is 16x16 -- shoulda' said it before. Yes, I'll forget about .ico and use the .jpg or .png – Pete Wilson Mar 11 '11 at 20:57
  • 2
    To be fair, I've never gone to a website and said "This place sucks because it's favicon doesn't work." – corsiKa Mar 11 '11 at 21:23
  • Jonathan Neal did a great, comprehensive [blog post](http://www.jonathantneal.com/blog/understand-the-favicon/) about using favicons, in particular so they work well on high-DPI devices. He says that he wound up building a 32px-only .ico favicon for the HTML5 Boilerplate site, since that works well in IE6+, Safari 4+, and the latest Chrome, Firefox, and Opera. There's also a detailed favicon article at http://www.netmagazine.com/features/create-perfect-favicon. – Sam Dutton Mar 09 '13 at 21:01

3 Answers3

6

.ico files are unique because they can contain multiple resolution images and the most appropriate one is used. The site probably created many resolutions and included them in a single file. Windows 7 supports icons up to 512x512 I think. You may have seen this in windows when a different icon is used for thumbnail vs. listview. If you want an icon for a website then just make a png. All the modern browsers support it and the size will be a lot smaller. Hope that helps!

<link rel="icon" type="image/png" href="http://example.com/myicon.png">
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • whew! thanks, yes it does help. I'd read somewhere that ie8 /still/ takes .ico only. I'll just punt that for now. – Pete Wilson Mar 11 '11 at 20:53
  • IE8 should work just great with the above code. Even IE6 as I recall. The .ico in your site root directory is old old school. – mrtsherman Mar 14 '11 at 16:38
  • Erm, the above code wont work great with IE. Versions 5 to 9 only support the .ico image format and must have rel="shortcut icon". – ChrisD Mar 18 '12 at 03:25
  • @ChrisD - I use png's for icons on all the web properties I develop and I can assure you that they work in IE. This page gets more in depth on support. http://stackoverflow.com/questions/1344122/favicon-png-vs-favicon-ico-why-should-i-use-pngs-instead-of-icos – mrtsherman Mar 18 '12 at 03:42
  • @mrtsherman Hmm... have you tested that? IE will ignore that link element and fallback to using favicon.ico in the root of your server. I've just tested this on IE 6-8 using virtual machines and in IE 9 on a real desktop. Also http://en.wikipedia.org/wiki/Favicon says that IE doesn't support png icons and I see nothing on the page you link to that contradicts this. – ChrisD Mar 22 '12 at 23:41
3

By default ICO file format store data as BMP file format which is an uncompressed image format, that is why the favicon.ico file is so big.

You can either save the data as PNG by exporting using GIMP, or send it compressed by gzip. Beware that not all browser support PNG format favicon.ico, and those very old browsers (IE < 6) neither support gzip compression.

Nowadays, most modern browsers support <link> method into the HTML source code to specific favicon of different size and format. You can add something like this into your source code to use PNG and SVG file format favicons.

<head>
    <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
    <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
</head>

You can check more tips to optimize your favicon in this guide.

Scott
  • 4,458
  • 1
  • 19
  • 27
Fong-Wan Chau
  • 2,259
  • 4
  • 26
  • 42
2

I think that the .ico format it proposes is for Windows icons, for example, not specifically geared towards favicos.

Benjamin
  • 11,560
  • 13
  • 70
  • 119