How to have multiple favicon sizes, yet serve only a 16x16 by default?

Question

Generally it is considered good practice to serve favicon.ico in multiple sizes, because that way it looks better when a shortcut is made or the site is pinned (IE9). The size of a favicon easily increases tenfold by doing so though, which results in slower site loading (in my case the 16x16 favicon is 1kb, the 16, 32, 64=30kb).

Sites like Facebook and Yahoo serve a 16x16 favicon by default that is <1kb, but when you pin these sites, the image used is proper size. I assume the larger picture is loaded only when needed, which fixes the dilemma. I have unsuccessfully been trying to figure out how these sites do this. Does anybody know this?

Answer 1

Update:

My original answer is below, however, since writing this post I believe there may be a better way to handle Favicons with HTML 5. I would create a 32x32 favicon (only that size) for Internet Explorer 9 and below but use other methods for creating higher resolution favicons (PNG file type) for other browsers including mobile devices. You can see my answer here for additional information.

---

Original Answer to Question:

Here is how it can be done:

1. Download png2ico. Extract to c:\

2. Create your Icons in your favorite program. Create a 64x64, 32x32, 16x16. (Note: 64x64 is probably not needed and will increase file size. However, use at least 32x32 and 16x16) Save as icon-64.png (for 64x64 size) icon-32.png (32x32) and icon-16.png (16x16) in the same folder as png2ico. Keep the colors to a minimum.

3. Open Command Prompt - Change directories to the png2ico folder. (cd \png2ico)

4. Once in the right directory run this command:

   png2ico.exe favicon.ico --colors 16 icon-64.png icon-32.png icon-16.png
   

   Note: The difference in file size for the addition of a 64x64 size icon increased the file by 2kb. I would just use 32x32 and 16x16. (Run same code as above removing icon-64.png)

5. Grab the favicon.ico file from the png2ico folder. Upload it to the server add <link rel="shortcut icon" href="http://example.com/favicon.ico" /> to the header and you are good to go.

While you are at it go ahead and create Icons for iPad and iPhone. You can find more info on recommended sizes here and how to implement them into your site.

Also more general info on Favicons can be found here.

Note: I do not know if this is how Facebook or Yahoo do theirs but this answers your question of how it can be done.

Answer 2

The Facebook "favicon.ico" contains two sizes: 16x16 and 32x32. I'm sure you know how to combine two ico images into one, however, the "trick" is they're using two extremely optimized images.

I've found that Photoshop creates bloated PNG files, and bloated ICO files. (Note: Photoshop requires a plugin to create ICO files.)

The best way I've found to create tiny, optimized ICO files is to use a well-known free image editor called "Gimp". In short, just follow this tutorial for creating ICO files:
https://www.catalyst.net.nz/news/creating-multi-resolution-favicon-including-transparency-gimp
Important Tip: When you get to the step for saving your .ico image and you can specify the bits-per-pixel (bpp), change it to 4bpp or something similiar (you'll have to experiment to see how low you can go without degrading the image quality).

Using the instructions above, I was able to create a 1kb favicon that contains 16x16 and 32x32 images. In comparison, the smallest I could get the same favicon using Photoshop, plugins, and various other tools was 5kb.

Answer 3

Or you could just log into any linux box with ImageMagick installed, rename your source image (with a resolution of at least 256x256 pixels and a PNG format file) to 'favicon.png', and run the following command:

convert favicon.png -bordercolor white -border 0 \
      \( -clone 0 -resize 16x16 \) \
      \( -clone 0 -resize 32x32 \) \
      \( -clone 0 -resize 48x48 \) \
      \( -clone 0 -resize 57x57 \) \
      \( -clone 0 -resize 64x64 \) \
      \( -clone 0 -resize 72x72 \) \
      \( -clone 0 -resize 110x110 \) \
      \( -clone 0 -resize 114x114 \) \
      \( -clone 0 -resize 120x120 \) \
      \( -clone 0 -resize 128x128 \) \
      \( -clone 0 -resize 144x144 \) \
      \( -clone 0 -resize 152x152 \) \
      \( -clone 0 -resize 180x180 \) \
      \( -clone 0 -resize 228x228 \) \
      -delete 0 -alpha off -colors 256 favicon.ico

And you'll have your favicon.ico with most well-known formats baked right into one file.

Also, be sure to checkout the favicon cheat sheet @ https://github.com/audreyr/favicon-cheat-sheet for more favicon information.

Answer 4

Windows batch file, which creates multiple sized .PNGs and merge them to one .ICO file:

@echo off

set inkScape="C:\SOFTWARE\GRAPHIC\INKSCAPE\inkscape.exe"
set imageMagick="C:\SOFTWARE\DEVELOPER\IMAGEMAGICK\magick.exe"
set fileName=favicon
set importType=svg
set exportType=png
set exportDpi=300
set imageSizes=(16 24 32 48 57 60 64 70 72 76 96 114 120 128 144 150 152 180 192 196 256 300 320 400 450 460 480 512 600)

for %%s in %imageSizes% do (
 %inkScape% -z -f %~dp0%fileName%.%importType% -w %%s -h %%s -e %~dp0%fileName%-%%sx%%s.%exportType% -d %exportDpi%
 echo CREATED: %fileName%-%%sx%%s.%exportType%
 set e=%fileName%-%%sx%%s.%exportType%
 call :concat (e)
)

%imageMagick% %exportFileNames%"%~dp0%fileName%.ico"
echo MERGED IN: %fileName%.ico

pause goto :eof


:concat (e) (
 set exportFileNames=%exportFileNames%"%~dp0%e%" 
)

If you don't need the .PNG files, you can delete (or remove) them by del FILE or you save all PNGs inside a directory you can remove (after %imageMagick% %exportFileNames%"%~dp0%fileName%.ico").

Hope it helps somebody. :)

Answer 5

If you like scripts, I wrote one to convert any image to a multi-resolution favicon using ImageMagick.

http://blog.lavoie.sl/2012/11/multi-resolution-favicon-using-imagemagick.html

For your question about why Facebook and Yahoo are able to have high-res "pinned" images, it is because they also have apple-touch-icon and og:image.