In web access and in web admin, the favicon becomes blurry in web browser. This did not happen when using HiDPI. (for example smartphone) We provided favicons in 14 different sizes, but still, the browser does not choose the right icon. This is a problematic area for web development right now.
Created attachment 1063 [details] screenshot showing the problem
Problem shows with no HiDPI in: Windows 10: - Firefox - Chrome - Edge Fedora 36: - Firefox - Chrome - Edge macOS 12: - Safari - Firefox - Chrome - Edge
The result from the research in what favicons sizes are used where and how the web browsers handle them in different scenarios. The conclusions that were found are: Android: Tab icons: - Firefox: 152x152 - Chrome: 128x128 - Edge: 128x128 Bookmarks icons: - Firefox: 152x152 - Chrome: 128x128 - Edge: 128x128 Fedora 36: Tab icons: - Firefox: 16x16 - Chrome: 16x16 - Edge: 16x16 Bookmarks icons: - Firefox: 32x32 - Chrome: 16x16 - Edge: 16x16 Bookmark Creation: - Firefox: 32x32 Ipad: - Safari - "Share button": 152x152 macOS: Tab icons: - Firefox: 16x16 - Chrome: 16x16 - Edge: 16x16 - Safari: 16x16 Bookmarks icons: - Firefox: 16x16 - Chrome: 16x16 - Edge: 16x16 - Safari: 16x16 Bookmark Creation: - Firefox: 32x32 Windows: Tab icons: - Firefox: 16x16 - Chrome: 16x16 - Edge: 16x16 Bookmarks icons: - Firefox: 16x16 - Chrome: 16x16 - Edge: 16x16 Bookmark Creation: - Firefox: 32x32 Application Icons (Add to homescreen): - Fedora 36: 152x152 - Windows: 24x24,48x48 - macOS: 128x128 - ChromeOS: 16x16,24x24,48x48,72x72
In the research, the result shows that it only uses 7 different sizes. That makes the current 14 sizes obsolete and could remove sizes that are no longer used in any way. The result shows that 16,24,32,48,72,128 and 152 are used.
To accomplish that the browser uses the right icon size was to add all the different icons sizes to one ICO file that could make the browser less confused what size it needs to choose. The ICO file needed to be created in the largest to the smallest icon, if it was the other way around it did not choose the appropriate icon for the display. The "apple-touch-icon" is used in apple IOS, there with the type set it could make the icon "nice" in their opinion with rounded corners and shades. In this scenario, the icon is what we want.
New Things were found in the iPad segment and that: iPad: Safari - Favicon: 32x32 iPad's icons on the home screen is using a file in root directory for the website and the name of the file need to be "apple-touch-icon.png" and the size need to be 512x512
(In reply to Fredrik from comment #6) > In this scenario, the icon is what we want. This attribute need to be initialized to be callable of safari, and this makes it possible to have the icon in the icon's folder.
Created attachment 1064 [details] Script to easy test icon sizes with color mapping To run the script, add this file to a directory and run ./color.sh Then you have the what-color.txt there the color and sizes are. Test: Tested devices: 1. Samsung tab s7 android 12 2560x1600 2x scaled 2. Ipad mini 4 IOS 15.7 2048x1536 2x scaled 3. Ipad mini 6 IOS 15.7 2266x1488 2x scaled 4. Windows 10 1920x1200 1x scaled 5. Fedora 36 1920x1200 1x scaled 6. Thinkpad ChromeOS 90 1366x768 1x scaled 7. Mac mini macOS 12.6 1920x1200 1x scaled When testing what sizes is relevant is to watch what other companies handle this favicon and make a decision on what sizes are relevant. But also watch what development sites like developers.chrome.com and developer.mozilla.org. The sizes most sizes used in an ICO file is: 16,24,32,48,72,128. For example, Microsoft's use this configuration and also Facebook. When tested is the script used to identify the icon usage, there it shows different color on different sizes and this makes it easy to tell what size is used. If not using the colors, then to tell what size is used. Conclusion We only see that 16,24,32,48,72,128,152 are used. Apple using on IOS: 512 Because of no negative effect of having more sizes and still low file size (~600kb) and when tested, it is not fully tested on all devices that can run Thinlinc in the web. That all sizes will be included. It seems to be a trend to use scale of 2 in the most instances on android tablets and ipad, and all the required icons for those devices are included in the ICO file. Sites for more information: What size used for icons for A2HS or add to home screen (android and IOS): https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen Icons: https://developer.chrome.com/docs/webstore/images/#icon-size https://developer.chrome.com/docs/extensions/mv2/manifest/icons/ https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/icon-theme-color
Safari have a problem in the start page there it does not load the favorite icons and needs to have a root certificate to work and does not work with self-signed certificate. See this Bug https://bugs.webkit.org/show_bug.cgi?id=246327
(In reply to Fredrik from comment #9) > Because of no negative effect of having more sizes and still low file size > (~600kb) and when tested, it is not fully tested on all devices that can run > Thinlinc in the web. That all sizes will be included. New findings show that chrome based platforms can handle an ICO file that have more than 8 icons. When using an ICO file with more than 8 it chooses a random size.
(In reply to Fredrik from comment #9) > Because of no negative effect of having more sizes and still low file size > (~600kb) and when tested, it is not fully tested on all devices that can run > Thinlinc in the web. That all sizes will be included. New findings show that chrome based platforms can not handle an ICO file that have more than 8 icons. When using an ICO file with more than 8 it chooses a random size. Because of this issue, the important 16x16 icon does not get chosen on the desktop version of chrome based browsers. Sadly, this means new testing needed to be done on chrome based browsers.
The new testing with an ICO file with only 8 sizes and the best result that is an ICO with: 16 24 32 48 64 128 152 256 and the different from the above comment #4 is: Android x2 scaled tablet: Tab icons: - Chrome: 256x256 - Edge: 256x256 Bookmarks icons: - Chrome: 256x256 - Edge: 256x256 Android x3.5 scaled phone: Tab icons: - Chrome: 152x152 - Edge: 152x152 Bookmarks icons: - Chrome: 152x152 - Edge: 152x152 Application Icons (Add to home screen): - Fedora 36: 256x256 - Chrome OS: 16x16,24x24,48x48,64x64
Most favicon should be done in this stage. However, there are a few cases where it's still not perfect. When: * Android - Firefox add to home screen icons looks pixilated on the home screen, this happens for all sites, not only Thinlinc. * iPadOS - Safari add to home screen icons require a trusted self-signed cert to work (follow the instructions in https://intranet.lkpg.cendio.se/ThinLinc/Testing/WebAccessOnSafari) * macOS - Safari favorites & reading list icons require a "real" root cert to work (as mentioned in comment #10). * Android tablet - Firefox tab icons get an unwanted white border, this happens for all pages, not only for Web Access. Note that no icons show on Android phone Firefox. * Android - Chrome tab icons get an unwanted white border THE FIRST TIME we load the page. This happens for all pages, not only for Web Access. If we use the page, like browse to a sub-page, or login to Web Access, the tab icon gets updated and the white border disappears.
We've forgotten to update the favicon in tlwebadm. Most of the hard work has been done, however, so this shouldn't be too much.
Web Admin favicon has now been fixed. Some code was also refined after internal discussions. We also took the opportunity to include apple touch icons for “Add to Home Screen”. Note that our test-iPads are very problematic when it comes to cashing these icons. If you want to make testing easier, you can append a version marking to the icon in the HTML. The marking can look like this: > <link rel="icon" type="image/x-icon" href="/images/icons/icon.ico?v=1"> Each time you intend to force the browser to use a new icon, just make sure to change the version marking to a different number. This bug is now ready for testing.
Created attachment 1075 [details] Firefox favicon white border Firefox on android now have a white background. This looks bad in dark mode, see screenshot. This is a regression compared to ThinLinc 4.14.0, where no such white border is shown, this is also seen in the screenshot (see the old icon).
The issue is that Firefox chooses the apple-touch-icon instead of regular icons in the ICO file that is provided and this have been reported to Firefox as a bug and here is the bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1799691 Apple-touch-icon on iPad and iPhone devices puts the icon a background behind the icon and this make it not possible for the apple touch icon to have a padding with transparent or alpha values.
I found an issue when doing "Create shortcut" in Chrome on Linux. It seems to pick a large icon and scale it down, resulting in a blurry or otherwise distorted icon. I get a nice icon in GNOME's launcher for these "shortcuts" though. The issue also seems to be a bit random. Testing on a different machine gave a different icon, although still the wrong one. However, it was Chrome 106 vs Chrome 107, so they might have tweaked something in the latest release.
GNOME's Epiphany also doesn't work well: * The tab icon is blurry * It uses the Apple touch icon when you install things as a web application, giving a nasty white border Tested with version 41.4.
I'm also not getting any tab icon at all for tlwebadm in Epiphany.
(In reply to Pierre Ossman from comment #34) > I'm also not getting any tab icon at all for tlwebadm in Epiphany. Same thing for Safari 16 on macOS, so it seems to be a general WebKit thing. It's not a regression, though, so perhaps best to move it to a separate bug. Created bug 8021 for this specific issue.
The name of the icon is also very generic now, compared to before. It's "icon.ico" now, whilst before it was "tlclient"-something. That was probably a bit misleading, but at least gave some clue to the contents.
(In reply to Pierre Ossman from comment #33) > GNOME's Epiphany also doesn't work well: > > * The tab icon is blurry https://gitlab.gnome.org/GNOME/epiphany/-/issues/1905 > * It uses the Apple touch icon when you install things as a web > application, giving a nasty white border > https://gitlab.gnome.org/GNOME/epiphany/-/issues/1904
I'm seeing some blue fringes on a bunch of the icon sizes, so it seems some were not sufficiently grid fitted. Besides the fringing, it also means those sizes are slightly blurry.
(In reply to Pierre Ossman from comment #32) > > However, it was Chrome 106 vs Chrome 107, so they might have tweaked > something in the latest release. Same issue when upgrading to Chrome 107 here. I checked the installed icons, and Chrome correctly splits apart the .ico file in to the correct individual images. Which is why the launcher icons are all correct. I also don't see any issues on Windows or macOS. However, there is no icon in the caption bar there. Filed this problem with Chrome, to see if we get any suggestions: https://bugs.chromium.org/p/chromium/issues/detail?id=1383495
For posterity, here's the list of icons from Apple's documentation (https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/#app-icon-sizes): > iOS/iPadOS app icon sizes: > > Home Screen iPhone @2x = 120×120, @3x = 180×180 > Home Screen iPad Pro @2x = 167×167 > Home Screen iPad & iPad mini @2x = 152×152 > Spotlight @2x = 80×80, @3x = 120×120 > Settings @2x = 58×58, @3x = 87×87 > Notifications @2x = 76×76, @3x = 114×114 We have included all but the “Settings”-icons, since we assume that an ATHS icon won't end up in iOS settings. This resulted in these icons sizes; 76 80 114 120 152 167 180. However, we have also included a 512×512 apple-touch-icon along the way. We listed in comment #7 and comment #9 that the 512 icon was needed by iOS. I can't find any documentation backing that up. This requires clarification.
(In reply to Pierre Ossman from comment #39) > I'm seeing some blue fringes on a bunch of the icon sizes, so it seems some > were not sufficiently grid fitted. > > Besides the fringing, it also means those sizes are slightly blurry. This issue is resolved in the last commits r39247,r39248
(In reply to Pierre Ossman from comment #36) > The name of the icon is also very generic now, compared to before. It's > "icon.ico" now, whilst before it was "tlclient"-something. That was probably > a bit misleading, but at least gave some clue to the contents. This has been fixed now, the file was renamed to “thinlinc.ico”. (In reply to Samuel Mannehed from comment #41) > We listed in comment #7 and comment #9 that the 512 icon was needed by iOS. I can't find > any documentation backing that up. This requires clarification. This issue remains. The current thesis is that we don't need a 512×512 apple touch icon for iOS. But this needs to be further investigated, since new testing shows that it is being widely used on Android. Previous test protocols list the 512 icon as only being used on iOS. It is unclear if things have changed along the way or if this was simply missed. Another topic that we need to look into is the sizes chosen for Android; 152×152 and 256×256. New testing shows that 256 is never used on Android. Furthermore, we have no documentation backing up these two choices. Since we only have 8 slots in the ICO as things stand right now, we have to be careful what we pick here. Comment #2 on bug 6866 lists several icon sizes. Those sizes could be candidates for these two slots, and 152×152 or 256×256 are not among them.
Created attachment 1079 [details] Makefile patch for adding size labels to icons This bug requires a method to identify which icon is used in different places. The previous method replaced the icons with colors, these colors were then manually mapped to different sizes. This could easily lead to human error when doing a large amount of these mappings. As mentioned in the previous comment, when looking into the Android sizes, we noticed that a few sizes didn't match with the previous results. In order to avoid future mistakes, we created a new method for identifying the icon sizes. The attached patch instead adds size labels on top of our logo in each icon file.
We have decided to verify the different icons used with the new size label method. We need this extra verification before we decide to change any of the icon sizes.
This table shows the icon sizes used in desktop browsers. In each browser, the icons appear in different contexts. In the table, column 'Used image' specifies which icon size was chosen by the browser (as shown by the icon size label). Column 'Displayed size' instead show the actual display size of that icon (measure in gimp using screenshots). ╔═════════╦════════════════╦════════════╦════════════════╗ ║ Browser ║ Icon context ║ Used image ║ Displayed size ║ ╠═════════╩════════════════╩════════════╩════════════════╣ ║ Fedora 36 workstation ║ ╠═════════╦════════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 32 ║ 23x22 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 32 ║ 26 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 256 ║ ~90 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ Webapp ║ 32 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ ~45 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Edge ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 32 ║ 20 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 32 ║ 26 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 256 ║ ~90 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ Webapp ║ 32 ║ 16 ║ ╠═════════╩════════════════╩════════════╩════════════════╣ ║ Windows 10 ║ ╠═════════╦════════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 32 ║ 20 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 48 ║ 48 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ ~48 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Edge ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 32 ║ 24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ pin to taskbar ║ 32 ║ ~18 ║ ╠═════════╩════════════════╩════════════╩════════════════╣ ║ Mac ║ ╠═════════╦════════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 32 ║ ~24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 128 ║ ~66 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ ~48 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Safari ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ ~70 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ share ║ 512 ║ ~40 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ reading list ║ 512 ║ ~52 ║ ╚═════════╩════════════════╩════════════╩════════════════╝
In the previous comment, some of the Icon Contexts were not explained. * Tab sugg - the icons for the suggestions/favorite sites that show in the browser when an empty tab is opened. * A2HS - Add to home screen, the icon shown on the home screen.
Table for mobile platforms and chromebook. ╔════════════╦══════════════╦════════════╦════════════════╗ ║ Browser ║ Item ║ Used image ║ Displayed size ║ ╠════════════╩══════════════╩════════════╩════════════════╣ ║ Android 12 Galaxy Tab S7 (Scaling factor 2x) ║ ╠════════════╦══════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 152 ║ ~34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 152 ║ ~34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 152 ║ ~86 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 512 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 512 ║ 50 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ 72 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 512 ║ ~110 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Edge ║ tab ║ 152 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 152 ║ 72 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 152 ║ ~86 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Sams. Int. ║ tab ║ 152 ║ 32 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 152 ║ 72 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 152 ║ ~56 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 152 ║ ~86 ║ ╠════════════╩══════════════╩════════════╩════════════════╣ ║ Android 13 Galaxy S22 U (Scaling factor 3.5x) ║ ╠════════════╦══════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 152 ║ ~60 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 152 ║ ~55 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 512 ║ ~115 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 512 ║ ~180 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 512 ║ 56 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 512 ║ ~84 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ ~126 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 512 ║ ~180 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Edge ║ tab ║ - ║ - ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 152 ║ ~67 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 512 ║ 116 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 512 ║ ~180 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Sams. Int. ║ tab ║ - ║ - ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 152 ║ ~116 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 152 ║ ~92 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 512 ║ ~180 ║ ╠════════════╩══════════════╩════════════╩════════════════╣ ║ iPadOS 16.1.1 ║ ╠════════════╦══════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 180 ║ 32 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 180 ║ 32 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 512 ║ 80 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 80 ║ 40 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 80 ║ ~56 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 80 ║ ~70 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 512 ║ 80 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Safari ║ tab ║ 32 ║ 32 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ - ║ - ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ 152 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ reading list ║ 512 ║ ~136 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 512 ║ ~121 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 152 ║ ~114 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 152 ║ 128 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ spotlight ║ 152 ║ ~120 ║ ╠════════════╩══════════════╩════════════╩════════════════╣ ║ ChromeOS 107 ║ ╠════════════╦══════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 32 ║ 20 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 32 ║ 20 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 32 ║ 32 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 64 ║ 40 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 128 ║ 42 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 512 ║ 20 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 512 ║ 32 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ 45 ║ ╚════════════╩══════════════╩════════════╩════════════════╝
Created attachment 1080 [details] Makefile patch for adding size labels to icons To avoid guessing, we re-measured most of the icons. This time, we added borders to make the edge of the icon easy to see. Thus, the lists in comment #56 and comment #58 are obsolete. New lists will follow below.
This table shows the icon sizes used in desktop browsers. In each browser, the icons appear in different contexts. In the table, column 'Used image' specifies which icon size was chosen by the browser (as shown by the icon size label). Column 'Displayed size' instead show the actual display size of that icon (measure in gimp using screenshots). The following abbreviations are also used in this table: - Tab sugg - the icons for the suggestions/favorite sites that show in the browser when an empty tab is opened. - A2HS - Add to home screen, the icon shown on the home screen. ╔═════════╦════════════════╦════════════╦════════════════╗ ║ Browser ║ Icon context ║ Used image ║ Displayed size ║ ╠═════════╩════════════════╩════════════╩════════════════╣ ║ Fedora 36 workstation ║ ╠═════════╦════════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 32 ║ 24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 32 ║ 32 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 256 ║ 96 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ Webapp ║ 32 ║ 18 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ 48 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Edge ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 32 ║ 24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 32 ║ 32 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 256 ║ 96 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ Webapp ║ 32 ║ 18 ║ ╠═════════╩════════════════╩════════════╩════════════════╣ ║ Windows 10 ║ ╠═════════╦════════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 32 ║ 24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 32 ║ 32 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 48 ║ 48 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ 48 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Edge ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 32 ║ 24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ pin to taskbar ║ 32 ║ 24 ║ ╠═════════╩════════════════╩════════════╩════════════════╣ ║ Mac ║ ╠═════════╦════════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 32 ║ 24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 32 ║ 32 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 128 ║ 64 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ 48 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Safari ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ 64 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ share ║ 512 ║ 40 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ reading list ║ 512 ║ 52 * ║ ╚═════════╩════════════════╩════════════╩════════════════╝ The icon size marked with an (*) above are cropped on the sides. Many icons are cropped in the corners, these are not marked.
Table for mobile platforms and Chromebook (uses the same markings and abbreviations as above). ╔════════════╦══════════════╦════════════╦════════════════╗ ║ Browser ║ Item ║ Used image ║ Displayed size ║ ╠════════════╩══════════════╩════════════╩════════════════╣ ║ Android 12 Galaxy Tab S7 (Scaling factor 2x) ║ ╠════════════╦══════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 152 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 152 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 152 ║ 50 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 152 ║ 71 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 152 ║ 84 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 512 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 512 ║ 51 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ 77 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 512 ║ 68 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 512 ║ 114 * ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Edge ║ tab ║ 152 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 152 ║ 43 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 152 ║ 51 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 152 ║ 71 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 152 ║ 84 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Sams. Int. ║ tab ║ 152 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 152 ║ 77 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 152 ║ 77 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 152 ║ 84 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 152 ║ 83 ║ ╠════════════╩══════════════╩════════════╩════════════════╣ ║ Android 13 Galaxy S22 U (Scaling factor 3.5x) ║ ╠════════════╦══════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 152 ║ 65 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 152 ║ 56 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 152 ║ 84 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 512 ║ 116 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 512 ║ 194 * ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 512 ║ 56 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 512 ║ 84 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ 126 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 512 ║ 194 * ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Edge ║ tab ║ - ║ - ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 152 ║ 70 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 152 ║ 84 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 512 ║ 116 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 512 ║ 194 * ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Sams. Int. ║ tab ║ - ║ - ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 152 ║ 126 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 152 ║ 130 * ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 512 ║ 192 * ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 512 ║ 194 * ║ ╠════════════╩══════════════╩════════════╩════════════════╣ ║ iPadOS 16.1.1 ║ ╠════════════╦══════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 180 ║ 32 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 180 ║ 32 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 512 ║ 80 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 80 ║ 40 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 256 ║ 56 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 256 ║ 72 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 512 ║ 80 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Safari ║ tab ║ 32 ║ 32 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ - ║ - ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ 152 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ reading list ║ 512 ║ 145 * ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 512 ║ 120 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 152 ║ 120 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 152 ║ 128 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ spotlight ║ 152 ║ 120 ║ ╠════════════╩══════════════╩════════════╩════════════════╣ ║ ChromeOS 107 ║ ╠════════════╦══════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 32 ║ 20 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 32 ║ 20 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 32 ║ 30 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 64 ║ 40 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 128 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 512 ║ 20 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 512 ║ 30 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab sugg ║ 512 ║ 45 ║ ╚════════════╩══════════════╩════════════╩════════════════╝
Note that, the size 152 is available both as an apple-touch-icon and in the ICO file. The test icons we used show the size label in a different color depending on the type of icon. This means that we know that, in the tables above, all the 152 icons used come from the ICO file except for in Safari on the iPad. That the apple-touch-icon variant is used on the iPad is expected here.
We have noticed that Files (nautilus), Thunar, and Image Viewer (eog) display our ICO using the 152×152 icon. This is strange since it's neither first, last, largest, nor smallest icon in the ICO. If we create an ICO file containing only a 256-icon, nautilus and thunar no longer show a thumbnail. Opening that ICO file in eog gives an error that says “Compressed icons are not supported”. On Windows and macOS, generally, the 256×256 icon was shown when viewing the ICO file. On Windows, we noticed that explorer.exe showed different icons from the ICO depending on the zoom level. Paint on Windows seems to show the smallest icon in the ICO. According to the Wikipedia page about the ICO format, it should be supported to have a 256×256 icon inside. The fact that GNOME's activities and Firefox on iPadOS uses the 256-icon also corroborates this. https://en.wikipedia.org/wiki/ICO_(file_format)#History If we change the largest icon in the ICO to 255 instead of 256, nautilus, thunar and eog start showing that icon in the thumbnail. In Chrome, it changes which icon GNOME displays in “activities” after adding the app to the home screen. GNOME displayed the 512 apple-touch-icon, and not the 255-icon. However, this change does not result in browsers on Android choosing different icons, 152×152 is still chosen in every single case like before. Our conclusion is that the thumbnail issue stems from an off-by-one error in GNOME somewhere. It seems the browsers are not affected by the same error.
(In reply to Samuel Mannehed from comment #63) > If we create an ICO file containing only a 256-icon, nautilus and thunar no > longer show a thumbnail. Opening that ICO file in eog gives an error that > says “Compressed icons are not supported”. > ... > Our conclusion is that the thumbnail issue stems from an off-by-one error in > GNOME somewhere. It seems the browsers are not affected by the same error. Pierre had an idea for a different explanation here. The issue with the 256 icon in the ICO is likely due to that it is different from the other 7 icons in the ICO. The 256 icon is compressed as a PNG. This is shown by ImageMagick's identify: thinlinc.ico[0] PNG 256x256 256x256+0+0 8-bit sRGB 8814B 0.000u 0:00.001 thinlinc.ico[1] ICO 152x152 152x152+0+0 8-bit sRGB 0.000u 0:00.001 thinlinc.ico[2] ICO 128x128 128x128+0+0 8-bit sRGB 0.000u 0:00.000 thinlinc.ico[3] ICO 64x64 64x64+0+0 8-bit sRGB 0.000u 0:00.000 thinlinc.ico[4] ICO 48x48 48x48+0+0 8-bit sRGB 0.000u 0:00.000 thinlinc.ico[5] ICO 32x32 32x32+0+0 8-bit sRGB 0.000u 0:00.000 thinlinc.ico[6] ICO 24x24 24x24+0+0 8-bit sRGB 0.000u 0:00.000 thinlinc.ico[7] ICO 16x16 16x16+0+0 8-bit sRGB 206476B 0.000u 0:00.000 If we add “-compress None” to the convert line that generates the ICO, we instead get this output from identify: thinlinc.ico[0] ICO 256x256 256x256+0+0 8-bit sRGB 0.000u 0:00.036 thinlinc.ico[1] ICO 152x152 152x152+0+0 8-bit sRGB 0.000u 0:00.013 thinlinc.ico[2] ICO 128x128 128x128+0+0 8-bit sRGB 0.000u 0:00.002 thinlinc.ico[3] ICO 64x64 64x64+0+0 8-bit sRGB 0.000u 0:00.002 thinlinc.ico[4] ICO 48x48 48x48+0+0 8-bit sRGB 0.000u 0:00.000 thinlinc.ico[5] ICO 32x32 32x32+0+0 8-bit sRGB 0.000u 0:00.000 thinlinc.ico[6] ICO 24x24 24x24+0+0 8-bit sRGB 0.000u 0:00.000 thinlinc.ico[7] ICO 16x16 16x16+0+0 8-bit sRGB 468038B 0.000u 0:00.000 The apps nautilus, thunar and eog display 256 as the thumbnail for this file. Which seems to confirm the theory. As seen by the error in eog, the problem is likely that these apps can't unpack the compressed icon inside the ICO. As seen in the tables in comment #60 and comment #61, the size 152 is used in many places, but 256 is not used a lot. To check if 256 was disqualified due to being a PNG, we tested with an ICO file generated with “-compress None”. * On Android S7 (@2x) we tested Chrome, Edge, and Samsung Internet. * On Android S22 (@3.5x) we tested Chrome, Edge, and Samsung Internet. * On Fedora 36 we tested A2HS in Chrome and Edge. However, this testing showed that the results were not changed – 152 is still preferred in the same cases. The 256 icon used for A2HS in Fedora 36 is unaffected.
(In reply to Samuel Mannehed from comment #63) > If we change the largest icon in the ICO to 255 instead of 256, nautilus, > thunar and eog start showing that icon in the thumbnail. In Chrome, it > changes which icon GNOME displays in “activities” after adding the app to > the home screen. GNOME displayed the 512 apple-touch-icon, and not the > 255-icon. This turned out to be slightly wrong. We made some further testing to investigate this after Pierre pointed something out here. Checking what GNOME does here are quite a few steps away from what we provide in terms of sizes in the ICO. At some point, Chrome (or any browser) has to download icons which GNOME can use for the A2HS apps. These icons are placed in this folder: ./local/share/icons/hicolor This folder then contains subfolders for the sizes 16, 32, 48, 128, 256 and 512. With this information at hand, we tested what the browsers do here: * Replaced the 256 icon with a 255 icon in the ICO and did A2HS in Chrome & Edge — Both browsers download 16×16, 32×32, 48×48 and 128×128 icons from the ICO — Both browsers download the 512×512 apple-touch-icon, place it in the 512 directory AND scales it down to 256×256 and places the scaled-down version in the 256 directory — GNOME displays the scaled down 256 version (with white borders because it was an apple-touch-icon) in “activities” app view * Removed the 152 & 256 icons from the ICO and removed the 512 apple-touch-icon, and then did A2HS in Chrome & Edge — Both browsers download 16×16, 32×32, 48×48 and 128×128 icons from the ICO — Both browsers download the 180×180 apple-touch-icon scaled it up to 256×256 and places the scaled-up version in the 256 directory — The 512 directory was empty — GNOME displays the scaled up 256 version (with white borders because it was an apple-touch-icon) in “activities” app view A conclusion from these tests could be that GNOME expects 16, 32, 48, 128, 256 and 512 to be available. If the 256 size weren't provided by the browser, a scaled version replaced it (either scaled down, or scaled up). However, perhaps the 512 size is an exception to that, since that directory was left empty in the last test. It's important to note that GNOME only displays the A2HS icon as 96×96px (even in 200% scaling). For this reason, a smaller image (smaller than 256) should be fine.
Created attachment 1081 [details] Screenshot of jagged Firefox A2HS icon on Android tablet While doing other testing, we noticed that the A2HS icon from Firefox on Android looked like crap. The corners of the icon that are supposed to look rounded are instead jagged and pixelated. The icon that is chosen is a 512×512 apple-touch-icon. See the attached screenshot. Also note that the fact that Firefox chooses an apple-touch-icon instead of an icon from the ICO was reported here: https://bugzilla.mozilla.org/show_bug.cgi?id=1799691
Created attachment 1082 [details] Screenshot of jagged Firefox A2HS icon on Android phone (In reply to Samuel Mannehed from comment #66) > Created attachment 1081 [details] > Screenshot of jagged Firefox A2HS icon on Android tablet > > While doing other testing, we noticed that the A2HS icon from Firefox on > Android looked like crap. The corners of the icon that are supposed to look > rounded are instead jagged and pixelated. The icon that is chosen is a > 512×512 apple-touch-icon. See the attached screenshot. The same issue exists regarding Firefox on an Android phone. Other browsers also choose the 512 icon for A2HS on this phone, but these icons look good. See the attached screenshot.
As mentioned in comment #41, we don't have any documentation from Apple that says we should need a 512-icon. We would be more comfortable if we only used apple-touch-icons that are listed by Apple. The 512-icon is used (especially by Firefox) in many places, as seen in the tables in comment #60 and comment #61. That means we had to do thorough testing to see what would happen if we remove it. The results of that testing showed: * The largest icon 256×256 doesn't get used any more than before. * Exactly all cases that previously used the 512 apple-touch-icon now instead use the 180 apple-touch icon. — All cases we measured aside from A2HS icons on an Android device with 3.5x scaling display the icon in question in a size that's smaller than 180×180px. — The A2HS icons on the 3.5x scale Android are displayed as 194×194px. This is so close to 180×180 that it's impossible to make out any difference in sharpness, even when comparing pixels in GIMP of screenshots of the two cases. One side effect of this is that we noticed that the issue in attachment #1082 [details] gets fixed if we remove the 512 apple-touch-icon. However, the issue in comment #1081 remains. * The 180 apple-touch-icon gets scaled up and displayed as 194×194 on an Android device with 3.5x scaling. * The 180 apple-touch-icon gets scaled down and displayed as 114×114 on an Android device with 2x scaling. The reason that the issue remains on the 2x scale Android tablet is likely that it still scales the icon to get smaller. Whatever bug is causing this seems to only apply to down-scaling.
Apple doesn't recommend having a 512x512 icon, and we don't get any negative effects from removing this icon size. We can with good conscience remove the 512x512 apple-touch-icon.
(In reply to Samuel Mannehed from comment #53) > (In reply to Samuel Mannehed from comment #41) > > We listed in comment #7 and comment #9 that the 512 icon was needed by iOS. I can't find > > any documentation backing that up. This requires clarification. > > This issue remains. The current thesis is that we don't need a 512×512 apple > touch icon for iOS. But this needs to be further investigated, since new > testing shows that it is being widely used on Android. > > Previous test protocols list the 512 icon as only being used on iOS. It is > unclear if things have changed along the way or if this was simply missed. This is now resolved since we removed the 512 apple-touch-icon.
(In reply to Samuel Mannehed from comment #53) > Another topic that we need to look into is the sizes chosen for Android; > 152×152 and 256×256. New testing shows that 256 is never used on Android. > Furthermore, we have no documentation backing up these two choices. Since we > only have 8 slots in the ICO as things stand right now, we have to be > careful what we pick here. Comment #2 on bug 6866 lists several icon sizes. > Those sizes could be candidates for these two slots, and 152×152 or 256×256 > are not among them. We noticed that another icon size was added without supporting documentation. 128x128 is unjustified in the same way that 152 and 256 is. Before any changes were made in this bug, the icon sizes we had specifically for android were 72, 96, 144 and 192. All of these have been removed through this bug without proper justification. We have decided to test replacing 128, 152 and 256 with three of the removed android sizes.
The four android sizes (72, 96, 144, 192) are also somewhat supported by android documentation, see bug 6866 comment 2.
Since we only have 3 remaining slots in the ICO to work with (see https://bugs.chromium.org/p/chromium/issues/detail?id=1381393), we have to decide which icons to proceed with. Early on, we noticed that 96 and 192 are good candidates. * Size 96 replaces the 180 apple-touch-icon used in Firefox's shortcuts on desktop platforms (Fedora, Windows and Mac). We don't want the white background from apple-touch-icons here. * Size 192 replaced the 180 apple-touch-icon used for A2HS on Android phone (S22 with 3.5x scale) for Chrome, Edge and Samsung Internet. Due to the above reasons, we decided that 96 and 192 should be included in the ICO. For the final slot, we started off by testing with 72. We saw that this icon wasn't used anywhere, and that the icons for A2HS from chrome on Mac and ChromeOS started using apple-touch-icons. When instead testing with 144, both Mac and ChromeOS instead used icon 144 for Chrome's A2HS. This is good since we didn't want the white background.
The following abbreviations are used in this table: - A2HS app overv. The overview shown in GNOME after pressing 'Show applications'. - A2HS dock <size> The GNOME favorites dock shows different sized icons depending on the number of open applications. The more applications open, the smaller the icons. Nore that in this table we have used the terminology that the corresponding browser uses. E.g. Edge uses the word 'favorites' instead of 'bookmark'. ╔═════════╦════════════════╦════════════╦════════════════╗ ║ Browser ║ Icon context ║ Used image ║ Displayed size ║ ╠═════════╩════════════════╩════════════╩════════════════╣ ║ Fedora 36 workstation ║ ╠═════════╦════════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ shortcuts ║ 32 ║ 24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 32 ║ 32 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS app overv.║ 192 ║ 96 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dock XS ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dock S ║ 32 ║ 24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dock M ║ 32 ║ 32 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dock L ║ 48 ║ 48 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dock XL ║ 192 * ║ 64 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ Webapp ║ 32 ║ 18 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ shortcuts ║ 96 ║ 48 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Edge ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ favorites ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ quick links ║ 32 ║ 24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 32 ║ 32 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS app overv.║ 192 ║ 96 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dock XS ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dock S ║ 32 ║ 24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dock M ║ 32 ║ 32 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dock L ║ 48 ║ 48 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dock XL ║ 192 * ║ 64 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ Webapp ║ 32 ║ 18 ║ ╠═════════╩════════════════╩════════════╩════════════════╣ ║ Windows 10 ║ ╠═════════╦════════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ shortcuts ║ 32 ║ 24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 32 ║ 32 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 48 ║ 48 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ shortcuts ║ 96 ║ 48 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Edge ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ favorites ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ quick links ║ 32 ║ 24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ pin to taskbar ║ 32 ║ 24 ║ ╠═════════╩════════════════╩════════════╩════════════════╣ ║ Mac ║ ╠═════════╦════════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ shortcuts ║ 32 ║ 24 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 32 ║ 32 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 144 ║ 64 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ shortcuts ║ 96 ║ 48 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ Safari ║ tab ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 16 ║ 16 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ favorites ║ 180 ║ 64 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ share ║ 180 ║ 40 ║ ╠═════════╬════════════════╬════════════╬════════════════╣ ║ ║ reading list ║ 180 ║ 52 ** ║ ╚═════════╩════════════════╩════════════╩════════════════╝ * This image is stored in .local/share/icons/hicolor/256x256, and the image is generated from our 192 icon, scaled up to 256x256. Note that there is also an image saved in .local/share/icons/hicolor/128x128, which is generated from our 144 icon, scaled down to 128x128. ** This icon is cropped on the sides. Many icons are cropped in the corners, these are not marked.
╔════════════╦══════════════╦════════════╦════════════════╗ ║ Browser ║ Item ║ Used image ║ Displayed size ║ ╠════════════╩══════════════╩════════════╩════════════════╣ ║ Android 12 Galaxy Tab S7 (Scaling factor 2x) ║ ╠════════════╦══════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 192 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab overview ║ 180 ║ 40 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 192 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 192 ║ 50 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 192 ║ 71 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 192 ║ 84 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Firefox ║ tab overview ║ 180 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 180 ║ 51 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ shortcuts ║ 180 ║ 77 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 180 ║ 68 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 180 ║ 114 ** ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Edge ║ tab ║ 192 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ favorites ║ 192 ║ 43 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 192 ║ 51 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 192 ║ 71 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 192 ║ 84 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Sams. Int. ║ tab ║ 192 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 192 ║ 77 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ quick access ║ 192 ║ 77 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 192 ║ 84 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 192 ║ 83 ║ ╠════════════╩══════════════╩════════════╩════════════════╣ ║ Android 13 Galaxy S22 U (Scaling factor 3.5x) ║ ╠════════════╦══════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ - ║ - ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ tab overview ║ 180 ║ 65 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 192 ║ 56 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 192 ║ 84 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 192 ║ 116 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 192 ║ 192 ** ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 180 ║ 56 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 180 ║ 84 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ shortcuts ║ 180 ║ 126 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 180 ║ 192 ** ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 180 ║ 192 ** ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Edge ║ tab ║ - ║ - ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ favorites ║ 192 ║ 70 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 192 ║ 84 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 192 ║ 116 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 192 ║ 192 ** ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Sams. Int. ║ tab ║ - ║ - ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 192 ║ 126 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ quick access ║ 192 ║ 130 ** ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 192 ║ 192 ** ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 192 ║ 192 ** ║ ╠════════════╩══════════════╩════════════╩════════════════╣ ║ iPadOS 16.1.1 ║ ╠════════════╦══════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 180 ║ 32 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 180 ║ 32 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 180 ║ 80 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 80 ║ 40 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 192 ║ 56 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ shortcuts ║ 192 ║ 72 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 180 ║ 80 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Safari ║ tab ║ 32 ║ 32 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ - ║ - ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ favorites ║ 180 ║ 152 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ reading list ║ 180 ║ 145 ** ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ share ║ 180 ║ 120 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 152 ║ 120 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 152 ║ 128 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ spotlight ║ 152 ║ 120 ║ ╠════════════╩══════════════╩════════════╩════════════════╣ ║ ChromeOS 107 ║ ╠════════════╦══════════════╦════════════╦════════════════╣ ║ Chrome ║ tab ║ 32 ║ 20 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 32 ║ 20 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ shortcuts ║ 32 ║ 30 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS dialog ║ 64 ║ 40 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ A2HS ║ 144 ║ 34 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ Firefox ║ tab ║ 180 ║ 20 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ bookmark ║ 180 ║ 30 ║ ╠════════════╬══════════════╬════════════╬════════════════╣ ║ ║ shortcuts ║ 180 ║ 45 ║ ╚════════════╩══════════════╩════════════╩════════════════╝
(In reply to Linn from comment #72) > Before any changes were made in this bug, the icon sizes we had specifically > for android were 72, 96, 144 and 192. All of these have been removed through > this bug without proper justification. > > We have decided to test replacing 128, 152 and 256 with three of the removed > android sizes. This has now been fixed. Sizes 96, 144 and 192 have been restored. That was the last remaining issue, this bug is now ready for testing again.
The issue with unwanted white background has been moved to bug 8036.
The issue with the browser choosing an inappropriate favicon size has been moved to bug 8037.
(In reply to Fredrik from comment #12) > New findings show that chrome based platforms can not handle an ICO file > that have more than 8 icons. When using an ICO file with more than 8 it > chooses a random size. The remaining downsides due to the size limitation have been moved to bug 8038.
(In reply to Pierre Ossman from comment #38) > (In reply to Pierre Ossman from comment #33) > > GNOME's Epiphany also doesn't work well: > > > > * The tab icon is blurry > > https://gitlab.gnome.org/GNOME/epiphany/-/issues/1905 Moved to bug 8037. > > > * It uses the Apple touch icon when you install things as a web > > application, giving a nasty white border > > > > https://gitlab.gnome.org/GNOME/epiphany/-/issues/1904 Moved to bug 8036.
Unfortunately, at least the 144 size is still blurry.
(In reply to Pierre Ossman from comment #89) > Unfortunately, at least the 144 size is still blurry. We noticed that the 96 size was also a bit blurry. Both of these have been fixed now. The 192 size does not have any problems.
First round of testing: * Linux: * Firefox 107 * Tab icon * New bookmark dialog * Bookmark menus * Shortcuts * Recently closed * Synced tabs menu * Tab pickup * Chrome 108 * Tab icon * Bookmark menus * Bookmark toolbar * New tab shortcut¹ * Create shortcut dialog * App/Shortcut window icon¹ * App/Shortcut launcher icon * App/Shortcuts overview¹ * App/Shortcut settings¹ * Edge 107 * Tab icon * History menu * Sidebar¹ * New tab icons¹ * Favourites menu * Favourites bar * Favourites page * Install this site as app * Install app dialog * App window icon¹ * App launcher icon * Installed apps¹ * Installed app details¹ * Epiphany 42.4 * Tab icon¹³ * Bookmark menu¹³ * Create web application icon²³ * Application manager²³ * Application launcher icon²³ ¹ Still blurry ² Uses Apple touch icon ³ No icon for tlwebadm
(In reply to Pierre Ossman from comment #93) > * Linux: > * Chrome 108 > * New tab shortcut¹ This issue has been reported to Chromium as part of bug 8037: https://bugs.chromium.org/p/chromium/issues/detail?id=1395056 > * App/Shortcut window icon¹ This has been reported to Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1383495 > * App/Shortcuts overview¹ This is our fault, Chrome actually behaves correctly here. When testing with a 128x128 icon in the ICO, we have observed that Chrome chooses that one, which results in a sharp icon. Thus, this is an effect of bug 8038 (can only have 8 icons in the ICO). Unfortunately, there's nothing we can do about this right now since all other icons are more important. > * App/Shortcut settings¹ This has been reported to Chromium as part of bug 8037: https://bugs.chromium.org/p/chromium/issues/detail?id=1395318 > * Edge 107 > * Sidebar¹ > * New tab icons¹ > * App window icon¹ > * Installed apps¹ > * Installed app details¹ Ideally, we'd like to report these issues to Edge, but we can't find a place to do it. Many issues have been reported to Chromium, which Edge uses. If those bugs get fixes, hopefully they will affect Edge as well. > * Epiphany 42.4 > * Tab icon¹³ > * Bookmark menu¹³ > * Create web application icon²³ > * Application manager²³ > * Application launcher icon²³ These issues have been reported to Epiphany: https://gitlab.gnome.org/GNOME/epiphany/-/issues/1905
Second round of testing: * Android (Galaxy Tab S7) * Firefox 107 * Tab overview icon²³ * Jump back in²³ * Recently visited²³ * History²³ * Shortcuts²³ * Add to home screen dialog¹²³ * Add to home screen second dialog¹²³^ * Home screen icon¹²³^ * Chrome 108 * Tab icon² * New tab icon * Tab overview icon² * Recently closed² * History * Bookmarks * Share popup * Add to home screen dialog * Add to home screen second dialog^ * Home screen icon^ * Edge 107 * Tab icon² * New tab icon * Recent tabs² * History * Favourites * Share popup * Add to home screen dialog * Add to home screen second dialog^ * Home screen icon^ * Samsung Internet 19 * Tab icon * Quick access * History * Bookmarks * Add to home screen dialog^ * Home screen icon^ ¹ Still blurry ² Uses Apple touch icon ³ No icon for tlwebadm ^ Icon badly cropped
* Chromebook (Acer N19Q2) * Chrome 108 * Tab icon * Address bar suggestion * Bookmark menus * Bookmark toolbar * New tab shortcut¹ * Reading list * Recently closed¹ * History¹ * Task manager¹ * Create shortcut dialog * App/Shortcut launcher icon¹ * Manage your apps¹ * App settings¹ ¹ Still blurry
* Windows 11 * Firefox 107 * Tab icon * Bookmark dialog * Bookmark toolbar * Bookmark sidebar * Shortcuts * Recently closed * History menu * Chrome 108 * Tab icon * Bookmarks bar * Bookmarks menu * Bookmarks manager * New tab shortcut * Recently closed * History * Create shortcut dialog * App/Shortcut window icon¹ * App/Shortcut launcher icon¹ * App/Shortcuts overview¹ * App/Shortcut settings¹ * Edge 107 * Tab icon * History menu * Sidebar¹ * New tab icons¹ * Favourites menu * Favourites bar * Favourites page * Install this site as app * Install app dialog * App window icon¹ * App launcher icon¹ * Installed apps¹ * Installed app details¹ ¹ Still blurry
We have a bit of a regression for the icons Safari uses for the reading list and favourites (on the new tab page). The margins around the logo have been reduced compared to 4.14.0. This makes our icon look a bit out of place as other icons seem to have smaller icons. Need to investigate what happened here and if it's intentional or not.
Created attachment 1090 [details] Safari favourites and reading list My bad. The out-of-place problem is mostly the favourites section. However, there has been other changes to the reading list. See attached screenshot for how things look currently.
* macOS 13 * Firefox 107 * Tab icon * Bookmark dialog * Bookmark toolbar * Bookmark sidebar * Edit bookmark dialog * Shortcuts * Recently closed * History menu * Chrome 107 * Tab icon * Bookmarks bar * Bookmarks menu * Bookmarks manager * New tab shortcut * Recently closed * History * Task manager * Create shortcut dialog * App/Shortcut window icon¹° * App/Shortcut launcher icon¹° * App/Shortcuts overview¹ * App/Shortcut settings¹ * Edge 108 * Tab icon * History menu * Sidebar¹ * New tab icons¹ * Favourites menu * Favourites bar * Favourites page * Task manager * Install this site as app * Install app dialog * App window icon¹° * App launcher icon¹° * Installed apps¹ * Installed app details¹ * Safari 16.1 * Tab icon * Tab overview * Reading list² * Favourites¹² * Share menu² * Bookmark sidebar * Bookmark menu * History menu * History page ¹ Still blurry ² Uses Apple touch icon ° Lacks macOS icon shadow
* iPad * Firefox 107 * Tab icon²³ * Tab overview²³ * Bookmarks³ * History²³ * Jump back in³ * Recently saved³ * Share²³ * Chrome 108 * Tab icon²³ * Tab overview²³ * New tab icons²³ * Recent tabs³ * History³ * Share menu²³ * Bookmarks²³ * Reading list³ * Edge 107 * Tab icon²³ * Recently closed³ * History³ * Share menu³ * Favourites²³ * New tab icons²³ * Safari 16 * Tab icon³ * Tab overview³ * Tab list³ * Share menu * Add to home screen dialog³ * Home screen icon³ * No icon for reading list or favourites ² Uses Apple touch icon ³ No icon for tlwebadm
(In reply to Pierre Ossman from comment #98) > We have a bit of a regression for the icons Safari uses for the reading list > and favourites (on the new tab page). The margins around the logo have been > reduced compared to 4.14.0. This makes our icon look a bit out of place as > other icons seem to have smaller icons. > > Need to investigate what happened here and if it's intentional or not. It is using the "touch icon" in both of those places. That icon is primarily to be used on the home screen on iOS devices. However, the margins don't really fit in with other iOS applications there either. It seems like reusing our standard margins (see bug 7911 for the background for those) doesn't work well on iOS. And Safari seems to be assuming iOS margins as well when poaching those icons.
Unfortunately, Apple doesn't give any guidelines on what margins should be used. And if I look at a number of random iOS applications, I can see a bit of variation. So, it seems we'll just have to pick something that we think looks good. To get some idea of the margin, I looked at several icons that have a round shape. All of Apple's own applications seem to be consistently sized in these cases, but third-party applications vary a bit. I then used GNOME's icon template to get an equivalent margin for square icons so that we can compare with our existing icons. Application Circle margin Square margin ---------------------------------------------------- Clock 8px 16px Settings 8px 16px Find My Phone 8px 16px Photos 8px 16px Clips 8px 16px Safari 8px 16px Chrome 13px 20px Firefox 14px 21px Edge 19px 25px ---------------------------------------------------- This was measured with 128×128 icons. For reference, we currently have a 12px margin for our icon. Another data point is what Safari does for the Favourites icon if it cannot find a touch icon. It then takes the favicon and scales it down so that it gets an extra margin of about 12px. I don't know if they did this assuming favicons would have no margin, a common macOS margin, or a common Windows margin, so it's difficult to say what final margin they were targetting. In the case of ThinLinc 4.14.0 (and for LinkedIn's current favicon), Windows margins were used, which resulted in a final total margin of 18px for a square icon. This puts it in between Apple's own icons, and common third-party ones. Hence, why it seems to look good. We have a few options: * Follow Apple's icons: 16px margin * Follow Chrome: 20px margin * Compromise between the above two: 18px margin * Follow what we used to get in Safari: 18px margin * Do the Safari adjustment: 24px margin
Changing the margins also means we'll have to redo a few of the manually tweaked versions. When look at the used sizes, I noticed that Apple's HIG: https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/ doesn't seem to agree with their design templates: https://developer.apple.com/design/resources/ The design templates are updated each iOS release, so I'm leaning towards trusting those more.
Following Apple's icons looks decent enough, so let's try to stick to that as it is their platform. I also checked that things still look okay where this icon is used incorrectly (bug 8036).
(In reply to Pierre Ossman from comment #95) > Second round of testing: > > * Android (Galaxy Tab S7) > * Firefox 107 > * Tab overview icon²³ > * Jump back in²³ > * Recently visited²³ > * History²³ > * Shortcuts²³ > * Add to home screen dialog¹²³ > * Add to home screen second dialog¹²³^ > * Home screen icon¹²³^ Due to bug 8036, reported to Firefox here: https://bugzilla.mozilla.org/show_bug.cgi?id=1799691 > * Chrome 108 > * Tab icon² > * Tab overview icon² > * Recently closed² Due to bug 8036, reported to Chromium here: https://bugs.chromium.org/p/chromium/issues/detail?id=1381407 https://bugs.chromium.org/p/chromium/issues/detail?id=1394000 > * Add to home screen second dialog^ > * Home screen icon^ The bad cropping might be because a larger icon is choosen and then scaled down. Chrome uses the same size everywhere, issue reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=1395083 > * Edge 107 > * Tab icon² > * Recent tabs² > * Add to home screen second dialog^ > * Home screen icon^ We would like to report these issues to Edge, but we can't find a place to do it. These issue all exists on Chrome too, so hopefully Edge will benefit from any fixes done on Chrome. > * Samsung Internet 19 > * Add to home screen dialog^ > * Home screen icon^ Found no good official way to report to Samsung Internet, but since it is based on Chromium hopefully it will benefit from any fixes there.
(In reply to Pierre Ossman from comment #96) > * Chromebook (Acer N19Q2) > * Chrome 108 > * New tab shortcut¹ > * Recently closed¹ > * History¹ > * Task manager¹ > * App/Shortcut launcher icon¹ > * Manage your apps¹ > * App settings¹ Some of these were initially reported in the issue below, and it has now been updated to include all these locations. https://bugs.chromium.org/p/chromium/issues/detail?id=1395050
The cropping issues for all browsers on Android regarding * Add to home screen second dialog * Home screen icon has been moved to bug 8047.
(In reply to Pierre Ossman from comment #97) > * Windows 11 > * Chrome 108 > * App/Shortcut window icon¹ > * App/Shortcut launcher icon¹ > * App/Shortcuts overview¹ > * App/Shortcut settings¹ Moved to bug 8037, and also reported to Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1383495 > * Edge 107 > * Sidebar¹ Moved to bug 8037. > * New tab icons¹ Moved to bug 8037, hopefully handled by this Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1395056 > * App window icon¹ > * App launcher icon¹ > * Installed apps¹ > * Installed app details¹ Moved to bug 8037, and hopefully handled by this Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1383495
(In reply to Pierre Ossman from comment #100) > * macOS 13 > * Chrome 107 > * App/Shortcut window icon¹° > * App/Shortcut launcher icon¹° > * App/Shortcuts overview¹ > * App/Shortcut settings¹ Moved to bug 8037, and also reported to Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1383495 > * Edge 108 > * Sidebar¹ Moved to bug 8037. > * New tab icons¹ Moved to bug 8037, hopefully handled by this Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1395056 > * App window icon¹° > * App launcher icon¹° > * Installed apps¹ > * Installed app details¹ Moved to bug 8037, and hopefully handled by this Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1383495 > * Safari 16.1 > * Reading list² > * Favourites¹² > * Share menu² Moved to bug 8036, reported to Apple.
(In reply to Pierre Ossman from comment #101) > * iPad > * Firefox 107 > * Tab icon²³ > * Tab overview²³ > * History²³ > * Share²³ > * Chrome 108 > * Tab icon²³ > * Tab overview²³ > * New tab icons²³ > * Share menu²³ > * Bookmarks²³ > * Edge 107 > * Tab icon²³ > * Favourites²³ > * New tab icons²³ Moved to bug 8036, reported to Firefox and Chromium here: https://github.com/mozilla-mobile/firefox-ios/issues/12546 https://bugs.chromium.org/p/chromium/issues/detail?id=1394342 > * Safari 16 > * No icon for reading list or favourites It has been problematic to show these icons, but we have been able to see that these also uses Apple touch icons, so that falls under bug 8036. The issues regarding webadmin not getting any icon has been moved to bug 8021.
All the comments found have been moved to other bugs and documented there. The only thing left before closing is briefly checking the updated iOS icons.
Checked the updated iOS icons in the places where they could be the correct icon choice: * iPadOS - Safari - Chrome - Firefox * macOS - Safari Found nothing that looked out of place. Closing.
The path to all apple-touch-icons is wrong for Web Admin. This was broken by commit r39257.
(In reply to Samuel Mannehed from comment #117) > The path to all apple-touch-icons is wrong for Web Admin. This was broken by > commit r39257. Fixed now.
Can't really test this properly because of bug 8021. But I do get the icon in Chrome on Android, in accordance with what we've seen on bug 8036. Good enough I guess?
