# How to make a proper compressed favicon.ico **URL:** \ **Category:** Solutions\ **Tags:** v2\ **Created:** [December 4, 2015, 2:11pm UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725 "2015-12-04T14:11:27Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![JimmyRittenborg](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimmyrittenborg/32/10261_2.png) [@JimmyRittenborg](https://forum.getkirby.com/u/JimmyRittenborg)\ **Post date:** [December 4, 2015, 2:11pm UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/1 "2015-12-04T14:11:27Z")
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](http://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](https://www.gimp.org) 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! 😍 ---
**Author:** ![luxlogica](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/luxlogica/32/437_2.png) [@luxlogica](https://forum.getkirby.com/u/luxlogica)\ **Post date:** [December 5, 2015, 12:11am UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/2 "2015-12-05T00:11:30Z")
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://tools.dynamicdrive.com/favicon/) > **[Favicon Generator for all platforms: iOS, Android, PC/Mac...](https://realfavicongenerator.net/)** > > The ultimate favicon generator. Design your icons platform per platform and make them look great, everywhere [http://www.chami.com/html-kit/services/favicon/](http://www.chami.com/html-kit/services/favicon/) ---
**Author:** ![JimmyRittenborg](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimmyrittenborg/32/10261_2.png) [@JimmyRittenborg](https://forum.getkirby.com/u/JimmyRittenborg)\ **Post date:** [December 5, 2015, 12:26am UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/3 "2015-12-05T00:26:35Z")
Sure, those have been around for decades. Neither of them compress the files. ---
**Author:** ![JimmyRittenborg](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimmyrittenborg/32/10261_2.png) [@JimmyRittenborg](https://forum.getkirby.com/u/JimmyRittenborg)\ **Post date:** [December 5, 2015, 12:34am UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/4 "2015-12-05T00:34:12Z")
The reason for this post was because I yesterday brought down a well done [getkirby.com](http://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](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 😊 ---
**Author:** ![luxlogica](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/luxlogica/32/437_2.png) [@luxlogica](https://forum.getkirby.com/u/luxlogica)\ **Post date:** [December 5, 2015, 10:58am UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/5 "2015-12-05T10:58:50Z")
Thank you for the backstory, @JimmyRittenborg - and for the share! ---
**Author:** ![1n3JgKl9pQ6cUMrW](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/1n3jgkl9pq6cumrw/32/2368_2.png) [@1n3JgKl9pQ6cUMrW](https://forum.getkirby.com/u/1n3JgKl9pQ6cUMrW)\ **Post date:** [December 5, 2015, 11:52am UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/6 "2015-12-05T11:52:13Z")
You can also manually optimize the images, which I always do. This reduces your compressed icons even more by +/- 15% ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/4/434248ee261b4d8ffc8124ec60ff0e9d00ced978.png) 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](https://tinypng.com/developers)** ---
**Author:** ![JimmyRittenborg](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimmyrittenborg/32/10261_2.png) [@JimmyRittenborg](https://forum.getkirby.com/u/JimmyRittenborg)\ **Post date:** [December 5, 2015, 2:30pm UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/7 "2015-12-05T14:30:15Z")
Thanks, for trolling me once again here - I’ve been running a SSIM JPEG compressor in production for the past five years, sir 👍 Since we’re talking about **PLEASE READ: favicon.ico** as my headline might give away, then you’d at least have to: ```bash # 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](http://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](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](http://f.cl.ly/items/0A2V1k0S0h1G393p3C2C/favicon-48x48.png) ![favicon-32x32.png](http://f.cl.ly/items/3A411R2I0O1Z2f0F1s3V/favicon-32x32.png) ![favicon-16x16.png](http://f.cl.ly/items/0m38382F3l150y2M2l0k/favicon-16x16.png) * * * For an image delivery service I’d pick [https://www.imgix.com](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. ---
**Author:** ![1n3JgKl9pQ6cUMrW](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/1n3jgkl9pq6cumrw/32/2368_2.png) [@1n3JgKl9pQ6cUMrW](https://forum.getkirby.com/u/1n3JgKl9pQ6cUMrW)\ **Post date:** [December 5, 2015, 5:16pm UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/8 "2015-12-05T17:16:34Z")
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; ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/1/1a15b228e3fb6c622ef9646b7641ff7931de623f.png) * * * Using **imagemagick** from my command-line merges the three files into one icon with the same size (when I use the `-compress parameter`). ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/b/babb8f930e1d42da90899a29d1ac09ca19864256.png) * * * ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/8/82b05af2c39be80615eab240f5ed355cbb2e0a83.png) ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/5/5706fd5d481805b69c82c0d8832ae9b2b532cc90.png) ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/d/da4a9dc5080621c2dc17a93b8178ba1e9aecd239.png) * * * 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… ![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/8/8f7bd6affa1e8276f5929490a0fb432eaf36afc8.png) ---
**Author:** ![JimmyRittenborg](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimmyrittenborg/32/10261_2.png) [@JimmyRittenborg](https://forum.getkirby.com/u/JimmyRittenborg)\ **Post date:** [December 5, 2015, 7:03pm UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/9 "2015-12-05T19:03:49Z")
Great to hear, I totally misunderstood you then, no worries my friend - and thank you for the words about my work 😊 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 ![Standalone PNGs for favicon.ico compression result](http://cl.ly/image/1d1z2e2n0i1r/Image%202015-12-05%20at%206.39.30%20PM.png) As you see, they came out at **726 bytes** I got this result from using [ImageAlpha](https://pngmini.com) for lossy but still not visible compression of transparent PNGs in conjunction with [ImageOptim](https://imageoptim.com) for lossless compression of the PNGs (you can verify this through [the sources in the .zip i posted over at the Pull Request](https://github.com/getkirby/getkirby.com/pull/152#issuecomment-161808320). 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** ![Poor transparancy](http://cl.ly/image/1a2o0W1C0733/Image%202015-12-05%20at%207.34.43%20PM.png) 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](https://www.getcloudapp.com) ---
**Author:** ![1n3JgKl9pQ6cUMrW](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/1n3jgkl9pq6cumrw/32/2368_2.png) [@1n3JgKl9pQ6cUMrW](https://forum.getkirby.com/u/1n3JgKl9pQ6cUMrW)\ **Post date:** [December 6, 2015, 6:58pm UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/10 "2015-12-06T18:58:14Z")
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](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 😄 * * * **-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](http://www.winterdrache.de/freeware/png2ico/index.html)** …this creates a favicon of +/- 8kb in size (half Imagemagick, but way larger than GIMP). ---
**Author:** ![JimmyRittenborg](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimmyrittenborg/32/10261_2.png) [@JimmyRittenborg](https://forum.getkirby.com/u/JimmyRittenborg)\ **Post date:** [December 6, 2015, 7:37pm UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/11 "2015-12-06T19:37:56Z")
Thank you 😊 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 👍 ---
**Author:** ![jomytago](https://avatars.discourse-cdn.com/v4/letter/j/9fc29f/32.png) [@jomytago](https://forum.getkirby.com/u/jomytago)\ **Post date:** [April 7, 2016, 6:09am UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/12 "2016-04-07T06:09:51Z")
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](http://net-informations.com/faq/asp/favicon.htm) Jomy ---
**Author:** ![Scotchester](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/scotchester/32/7158_2.png) [@Scotchester](https://forum.getkirby.com/u/Scotchester)\ **Post date:** [August 1, 2019, 7:00pm UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/14 "2019-08-01T19:00:54Z")
THANK YOU! Just came across this searching for answers after following someone else’s recommendation to use Image Magick, which took 5 PNGs totaling 2.66 KB and spit out a 14 KB .ico file. Your GIMP method produced a 3.63 KB file from the same PNGs. Very grateful for your post! ---
**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\ **Post date:** [February 6, 2025, 5:23pm UTC](https://forum.getkirby.com/t/how-to-make-a-proper-compressed-favicon-ico/2725/15 "2025-02-06T17:23:11Z")