We did some cleanup of favicons in bug 6132 so now we have icons for all appropriate sizes. However one detail was missing, and that's the fact that these icons will have wildly different physical sizes depending on the DPI of the device. The problem this causes is that an icon will have too much detail on a hidpi device and it can be difficult to recognise (e.g. we exaggerate rounding for small sizes). To make things worse there is also overlap in uses for a single size in pixel dimensions. E.g. 48x48 might be a small icon on a 3x scale hidpi device, but it can also be a large icon on a 1x standard dpi device. This issue is pointed out by the HTML spec[1], but no solution is suggested. We might be able to solve this using media queries, but we'd have to check how well the browsers support that. [1] https://html.spec.whatwg.org/multipage/semantics.html#rel-icon (this issue also exists with upstream noVNC and should probably be fixed there as well)
Issue for improving the spec: https://github.com/whatwg/html/issues/3245
Android's material design talk about 20dp, 40dp, and 48dp (where dp is “Density-independent pixels”): https://m3.material.io/styles/icons/designing-icons This site gives the following formula for converting dp to pixels: https://developer.android.com/training/multiscreen/screendensities Common “density buckets” are defined here: https://material.io/blog/device-metrics Using the formula from above, we get the following icon sizes for each “bucket”: ldpi (~120dpi): 15, 30, 36px mdpi (~160dpi): 20, 40, 48px hdpi (~240dpi): 30, 60, 72px xhdpi (~320dpi): 40, 80, 96px xxhdpi (~480dpi): 60, 120, 144px xxxhdpi (~640dpi): 80, 160, 192px That is 14 different icon sizes.
Some testing was done on Android devices under bug 7998 with an ICO file containing the following sizes; 16 24 32 48 64 128 152 and 256px. Tests showed that all browsers used the same icon size for tabs and bookmarks: * Samsung Tab S7 (~274ppi, @2x scale): 256p×256px * Samsung S21 Ultra (~516ppi, @3.5x scale): 152×152px There appears to be some heuristic on Android that determines the icon that is the closest fit with the density and UI scale of the device.
As part of bug 7998 we did some testing and measurements of icon sizes at different display scales. Those measurements might be interesting here. The displayed size was measured in screenshots using Gimp. ╔═════════╦════════════════╦═══════════╦═══════════╦═══════════╦═══════════╗ ║ Browser ║ Icon context ║ Used ║ Displayed ║ Used ║ Displayed ║ ║ ║ ║ image @1x ║ size @1x ║ image @2x ║ size @2x ║ ╠═════════╩════════════════╩═══════════╩═══════════╩═══════════╩═══════════╣ ║ Windows 10 ║ ╠═════════╦════════════════╦═══════════╦═══════════╦═══════════╦═══════════╣ ║ Chrome ║ tab ║ 16 ║ 16 ║ 32 ║ 32 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ 32 ║ 32 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ shortcuts ║ 32 ║ 24 ║ 32 ║ 48 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ A2HS dialog ║ 32 ║ 32 ║ 64 ║ 64 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ A2HS ║ 48 ║ 48 ║ 192 ║ 92 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ Firefox ║ tab ║ 16 ║ 16 ║ 192 ║ 32 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ 32 ║ 32 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ shortcuts ║ 96 ║ 48 ║ 96 ║ 96 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ A2HS ║ 16 ║ 16 ║ 32 ║ 32 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ Edge ║ tab ║ 16 ║ 16 ║ 32 ║ 32 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ favorites ║ 16 ║ 16 ║ 32 ║ 32 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ quick links ║ 32 ║ 24 ║ 32 ║ 48 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ A2HS dialog ║ 32 ║ 32 ║ 64 ║ 64 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ A2HS installed ║ 32 ║ 28 ║ 32 ║ 56 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ A2HS desktop ║ 48 ║ 46 ║ 192 ║ 92 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ A2HS startmenu ║ 24 ║ 24 ║ 48 ║ 48 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ A2HS taskbar ║ 24 ║ 24 ║ 48 ║ 48 ║ ╠═════════╩════════════════╩═══════════╩═══════════╩═══════════╩═══════════╣ ║ macOS 13 ║ ╠═════════╦════════════════╦═══════════╦═══════════╦═══════════╦═══════════╣ ║ Chrome ║ A2HS icon view ║ 152 ║ 64 ║ 192 ║ 128 ║ ╠═════════╬════════════════╬═══════════╬═══════════╣═══════════╬═══════════╣ ║ ║ A2HS list view ║ 16 ║ 16 ║ 32 ║ 32 ║ ╚═════════╩════════════════╩═══════════╩═══════════╝═══════════╩═══════════╝
