3 ms·

Could not believe we should be considering giving so many different favicon sizes from 195px (Opera Speed Dial) down to 16px. Wider SVG support in favicons woul

Could not believe we should be considering giving so many different favicon sizes from 195px (Opera Speed Dial) down to 16px. Wider SVG support in favicons would be welcome.

masklinn 13y ago
> Wider SVG support in favicons would be welcome. I believe SVG still has no support for hinting (or not enough to be worth talking about). Because of the resolution range, either extremely strong rasterizer hinting (supporting not only pixel-snapping but the complete addition or removal of features and the like) or multiple bitmaps is necessary to avoid getting either blocky output at "high" resolutions or a blurry and unusable mess at low ones. You can see the issue by comparing OSX's actual Pictures folder icons[0] with what you get just by scaling the biggest icon down[1] or the smallest one up[2]. [0] looks good and recognizable at all sizes, [1] is a blurry mess from 32px down and [2] looks terrible above 32px (and not too good at 32px either). And even at constant resolution, different densities (and thus different physical sizes) require different levels of details: Opera puts 195px in up to 4.5~5cm (as far as I can see by opening Opera, maximizing it and looking at the speed dial screen) where an iPad puts 144px (152 in iOS7) in about 1cm (not measured as I don't have one, if somebody can provide the exact dimensions of app icons it would be great). You can't[3] put precise information in an iPad icon as most users will be unable to see it, whereas a huge icon and nothing else would be a waste of space on Speed Dial. [0] http://media.tumblr.com/tumblr_l456vgN8oa1qz50x3.png http://media.tumblr.com/tumblr_l456vgN8oa1qz50x3.png [1] http://media.tumblr.com/tumblr_lurpsf1owX1qz50x3.png http://media.tumblr.com/tumblr_lurpsf1owX1qz50x3.png [2] http://media.tumblr.com/tumblr_lurpyq9FPu1qz50x3.png http://media.tumblr.com/tumblr_lurpyq9FPu1qz50x3.png [3] well you can, and it makes for great easter eggs, Apple's icon designers — amongst others — are known to have great fun with that[4], but I'm sure you get the point [4] http://gigaom.com/2009/07/27/a-closer-look-at-apples-icons-secret-messages-easter-eggs/ http://gigaom.com/2009/07/27/a-closer-look-at-apples-icons-s...
- giovannibajo1 13y ago
  SVG has a "shape-rendering:crispEdges" option that you can use to snap lines to pixels. See this blog post for more details: http://simurai.com/post/19895985870/icon-sharpness-limbo http://simurai.com/post/19895985870/icon-sharpness-limbo

Could not believe we should be considering giving so many different favicon sizes from 195px (Opera Speed Dial) down to 16px. Wider SVG support in favicons would be welcome.

masklinn 13y ago

> Wider SVG support in favicons would be welcome. I believe SVG still has no support for hinting (or not enough to be worth talking about). Because of the resolution range, either extremely strong rasterizer hinting (supporting not only pixel-snapping but the complete addition or removal of features and the like) or multiple bitmaps is necessary to avoid getting either blocky output at "high" resolutions or a blurry and unusable mess at low ones. You can see the issue by comparing OSX's actual Pictures folder icons[0] with what you get just by scaling the biggest icon down[1] or the smallest one up[2]. [0] looks good and recognizable at all sizes, [1] is a blurry mess from 32px down and [2] looks terrible above 32px (and not too good at 32px either). And even at constant resolution, different densities (and thus different physical sizes) require different levels of details: Opera puts 195px in up to 4.5~5cm (as far as I can see by opening Opera, maximizing it and looking at the speed dial screen) where an iPad puts 144px (152 in iOS7) in about 1cm (not measured as I don't have one, if somebody can provide the exact dimensions of app icons it would be great). You can't[3] put precise information in an iPad icon as most users will be unable to see it, whereas a huge icon and nothing else would be a waste of space on Speed Dial. [0] http://media.tumblr.com/tumblr_l456vgN8oa1qz50x3.png http://media.tumblr.com/tumblr_l456vgN8oa1qz50x3.png [1] http://media.tumblr.com/tumblr_lurpsf1owX1qz50x3.png http://media.tumblr.com/tumblr_lurpsf1owX1qz50x3.png [2] http://media.tumblr.com/tumblr_lurpyq9FPu1qz50x3.png http://media.tumblr.com/tumblr_lurpyq9FPu1qz50x3.png [3] well you can, and it makes for great easter eggs, Apple's icon designers — amongst others — are known to have great fun with that[4], but I'm sure you get the point [4] http://gigaom.com/2009/07/27/a-closer-look-at-apples-icons-secret-messages-easter-eggs/ http://gigaom.com/2009/07/27/a-closer-look-at-apples-icons-s...

giovannibajo1 13y ago
SVG has a "shape-rendering:crispEdges" option that you can use to snap lines to pixels. See this blog post for more details: http://simurai.com/post/19895985870/icon-sharpness-limbo http://simurai.com/post/19895985870/icon-sharpness-limbo