How to make a proper compressed favicon.ico


#1

This one might seem a bit nit-picky, but to me it’s simply a matter of how I do things anyway, while doing em’ better.

So here we go

Make some regular 16px, 32px and 48px PNGs up-front in your favorite image editor -don’t mind the various sizes here as you end result will still be a magnitude smaller in filesize than the average favicon.ico around the web - just 1.629 bytes (yeah …that’s just 1.6 Kb) for the getkirby.com favicon.ico even holding these various sizes.

  1. Fire up the Free and Open Source, cross-platform image editor available for GNU/Linux, OS X, Windows Gimp and import each PNG into its own layer from the file menu

  2. Export it as an .ico and tick of compression here, i don’t suggest lowering the alpha bitrate as this tend to result in some pretty severe rough edges.

  3. Call your mom and prag about your awesomeness for serving the most beautiful favicon.ico’s way way smaller in filesize than the rest of the web …Goes very well with cake! :heart_eyes:


#2

There are also several (cheap) apps and (free) online tools that you can use, that will generate icon files containing images that can be used for Windows desktop icons, OS X Safari recent icons, and iOS home shortcuts. Some of the ones worth investigating include:

http://tools.dynamicdrive.com/favicon/

http://www.chami.com/html-kit/services/favicon/


#3

Sure, those have been around for decades. Neither of them compress the files.


#4

The reason for this post was because I yesterday brought down a well done getkirby.com favicon.ico from 15.086 bytes to only 1.629 bytes without any visible loss https://github.com/getkirby/getkirby.com/pull/152 with my rather super simple solution which I’ve been using for years now, so I just thought I’d share it in here :blush:


#5

Thank you for the backstory, @JimmyRittenborg - and for the share!


#6

You can also manually optimize the images, which I always do.

This reduces your compressed icons even more by +/- 15%

It’s simply a mather of understanding how compression works, and using properly divided pixels on both the x- and y-axis (lineair algorithm for PNG / GIF, honeycomb for JPG).

BTW. There’s are also some (unneeded) OSX stuff in the zipped-file you provided (mainly aliasses and hidden OSX meta-files). By deleting those before uploading, you can save even more…


And you can integrate a compression API in Kirby if you really want…

https://tinypng.com/developers


#7

Thanks, for trolling me once again here - I’ve been running a SSIM JPEG compressor in production for the past five years, sir :+1:

Since we’re talking about PLEASE READ: favicon.ico as my headline might give away, then you’d at least have to:

# Install imagemagick on a mac(; brew install imagemagick
convert favicon-16x16.png favicon-32x32.png favicon-48x48.png favicon.ico

This will not only visually ruin your favicon.ico completely, but also (even with pre-compressed sources) give it a weight of 15.086 bytes from the 1.629 bytes achieved by my suggested method.

Your comparison of the importance of compressed assets for a potential inclusion on the getkirby.com website, to the importance of DTP in my zip on the actually pull request, just seems ridiculous to me.

But since I apparently don’t know much about compression in your opinion, I’m looking forward to your better and improved contribution at the Pull Request https://github.com/getkirby/getkirby.com/pull/152 plus posting the solution to bundeling these three uncompressed PNGs into a favicon.ico without compromising visual quality while reaching a smaller filesize than the 1.629 bytes my solution achieves:

favicon-48x48.png favicon-32x32.png favicon-16x16.png


For an image delivery service I’d pick https://www.imgix.com which (besides their Artificial Intelligent entropy crop detection) also supports client hints for stupid simple responsive images and correct delivery formats.


#8

Sorry for the misunderstanding;

English is not my native language - but I am really not trying to “troll” here (or “you”).

As far as I know, I never said that, in fact - I think you’re doing a great job!

But I only extracted the icons, compressed them by altering the pixel-order and the three formats are now less than 1kb in size (I also made them a bit sharper).


In fact, the three images are now 931 bytes in total;


Using imagemagick from my command-line merges the three files into one icon with the same size (when I use the -compress parameter).





I hope you will not see this as a “troll” - I just like optimizing images like you do, so keep up your good work!


- edit - Strange, when I download my compressed / optimized icons (see the three icons above) from this forum, the size is +/- 1.4kb together - which is larger than the optimized size before uploading… 'guess the server is doing something with the images as well…


#9

Great to hear, I totally misunderstood you then, no worries my friend - and thank you for the words about my work :blush:

So the way you’ve compressed the standalone PNGs brought em down to 931 bytes in total (I don’t know if the visual quality got compromised by your screenshot)

But I did the exact same thing to the entire set of PNGs in the Pull Request - but let’s keep it to the result for the three PNGs specific to the favicon.ico

As you see, they came out at 726 bytes I got this result from using ImageAlpha for lossy but still not visible compression of transparent PNGs in conjunction with ImageOptim for lossless compression of the PNGs (you can verify this through the sources in the .zip i posted over at the Pull Request.

So minor bytes aside - we’re totally agreeing to the same thing here, with only a slight difference in tooling between windows and OS X.

But the important and interesting part is the .ico bundling

I’m betting that the size of your final ico.ico from your screenshot is ~15.000 bytes (even making the initial compression redundant), and that’s what convert gives me, no matter which -compress type I’m using.

And not only that - it’s visually compromised as its transparency seems to be created against black, you can tell that by looking it the edges of the graphic in the icon.

Here you see the Lossless compressed ~15.000 bytes icon from convert to the left — And the compressed 1.629 bytes icon from Gimp to the right

Even the build-in Image Preview.app that ships with OS X (El Capitan) from Apple screws this part completely up, as it gives the exact same useless result == bigger filesize and worse visible quality.

But with Gimp
The Photoshop alternative which after all is a Free and Open Source, cross-platform image editor available for GNU/Linux, OS X, Windows - I don’t even have to pre-compress the PNGs - I’m only have to tick off “[ X ] Compression” when exporting to .ico to get a proper compressed favicon.ico without noticeable visual compromise at just 1.629 bytes.


Yeah, the CDN for the forum don’t get image compression right like us - that’s why I (in all fairness) uploaded the three uncompressed sources for the favicon through my screenshot share thingy


#10

Outstanding work you have done there!

It seems like there is a bug in Imagemagick, which forces a favicon to be bigger / larger than the sum of it’s component files;

http://stackoverflow.com/questions/22561648/multifile-favicon-ico-much-bigger-than-sum-of-sizes-of-component-files

I’ve tried it, and it looks correct - even when I merge the three icons (less than 1kb each) the favicon becomes 15kb :smile:


-edit- Tried it with GIMP (PC) and command-line Imagemagick on both PC and Linux (Mint, x64).

GIMP does a proper job (like you said) - Photoshop and Imagemagick makes a ‘stupid’ 15kb icon of it…

I’ve also tried to merge three .PNG’s (together less than 1kb) into one favicon, using PNG2ICO…

http://www.winterdrache.de/freeware/png2ico/index.html

…this creates a favicon of +/- 8kb in size (half Imagemagick, but way larger than GIMP).


#11

Thank you :blush:

Exactly, Gimp is currently the way to go - What’s funny though is at this small size, we’re approaching sub- default MTU size (1500 bytes) the size of a single TCP packet, in which case Gzip has no effect. But Gzipping this will still ensure it’ll fit into a single TCP packet :thumbsup:


#12

Favicon size

16 x 16 – Standard size for browsers
24 x 24 – IE9 pinned site size for user interface
32 x 32 – IE new page tab, Windows 7+ taskbar button, Safari Reading List sidebar
48 x 48 – Windows site
57 x 57 – iPod touch, iPhone up to 3G
60 x 60 – iPhone touch up to iOS7
64 x 64 – Windows site, Safari Reader List sidebar in HiDPI/Retina
70 x 70 – Win 8.1 Metro tile
72 x 72 – iPad touch up to iOS6
76 x 76 – iOS7
96 x 96 – GoogleTV
114 x 114 – iPhone retina touch up to iOS6
120 x 120 – iPhone retina touch iOS7
128 x 128 – Chrome Web Store app, Android
144 x 144 – IE10 Metro tile for pinned site, iPad retina up to iOS6
150 x 150 – Win 8.1 Metro tile
152 x 152 – iPad retina touch iOS7
196 x 196 – Android Chrome
310 x 150 – Win 8.1 wide Metro tile
310 x 310 – Win 8.1 Metro tile

Source: favicon

Jomy