5 ms·
Interesting that a site that champions for performance has an ungodly favicon [0] that is 10x larger (15KB) than the page itself. [0] https://1mb.club/favicon.
by soheil 6y ago
Interesting that a site that champions for performance has an ungodly favicon [0] that is 10x larger (15KB) than the page itself.
[0] https://1mb.club/favicon.ico https://1mb.club/favicon.ico
- shepherdjerred 6y agoWhat kind of an internet connection are you on that 15kb is significant? Performance is important, but if your site is clocking in at 17kb then you're probably doing okay.
- addedlovely 6y agoMay seem pedantic but those little gains do add up. A missing favicon also has a surprising impact.
- bombela 6y agoBut when you start this way, you quickly endup with the bloat that is modern software. Because each extra bit of waste seems justified at every steps along the way.
- cozzyd 6y agoSpoken like somebody who's never been to Antarctica. Or on a slow train WiFi for that matter...
- KMnO4 6y agoI did a quick Google search and discovered that SVG favicons are valid in most browsers, so for fun I reduced it by 95% down to 886 bytes: https://output.jsbin.com/yudonidujo https://output.jsbin.com/yudonidujo
- tsjq 6y agoexcellent. have you shared this with the website person and asked them to use this ?
- nekopa 6y agoAnd it looks much nicer zoomed in (as in your link) ;)
- e12e 6y agoNicely done. Manual or automatic conversion?
- curben 6y ago[1] generates ico, png and svg. you may want to remove some favicons from the generated HTML snippet; in my brief testing, Firefox loads both png and svg, while Chrome loads ico. [1]: https://realfavicongenerator.net/ https://realfavicongenerator.net/
- zimpenfish 6y agosvgo got it down to 876 bytes without visual difference but svgcleaner couldn't do anything. <svg xmlns="http://www.w3.org/2000/svg http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#662113" d="M27.3 5.7c4.9-3.1 11-3.9 16.8-4.1A162 162 0 0031 10l-3.7-4.5zm4.1 5.6c4.8-3.6 10.1-6.5 15.3-9.6a18 18 0 01-4.3 12.7l-11-3z"/><path fill="#c1694f" d="M44 1.6l3.3-.3-.6.4c-5.2 3.1-10.5 6-15.3 9.6 3.7 1.2 7.3 2.2 11 3l-6 6.2c-3.6-.8-7.4-2.8-11-2.4a70.5 70.5 0 00-17 18.3c2.7.2 5.5.4 8.2.4h.5c-3.3.2-6.6.4-9.9.9 3.6.6 7.2.5 10.8 1-3.7 2.2-8.2 1.7-12.4 1.7-1.6 2.4-2.7 5.3-5 7.1.7-2.8 2.6-5.2 3.8-7.8.1-2-.4-4.1-.5-6.2L6.7 36l.3-.3c5.2-7 10.7-13.7 17-19.7l-1.6-7.7L27 5.4l.3.2 3.6 4.5c4.3-3 8.7-5.9 13.2-8.5z"/><path fill="#d99e82" d="M8 21.2C11.6 16 17 12 22.3 8.3L24 16A178 178 0 007 35.7c-1-4.8-1.3-10 1-14.5zm.5 15.2c4.6-6.8 10-13.4 16.8-18.3 3.7-.4 7.5 1.6 11.1 2.4L33 24.1c-2.5-.2-4.9-.4-7.4-.4l5.4 2.4-3.2 3.5c-3.7-.3-7.4-1-11.2-1l9.7 3a10.7 10.7 0 01-9.5 5.2c-2.7 0-5.4-.2-8.2-.4z"/></svg>
- italiancheese 6y agoI recently noticed something similar, while optimising my e-commerce website. I went with: <link rel="icon" href="data:;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAA AAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"> Renders a black square, everywhere except Safari. The black square actually goes with the brand.
- GoblinSlayer 6y agoDoesn't it support RLE compression?