To support dark mode for desktop users, I’ve added SVG versions of my favicon.ico with lighter and darker colors and use @media (prefers-color-scheme: dark) to have better contrast against light and dark backgrounds. Firefox now (as of 103.0.1) supports SVG favicons (there was a (bug)[https://bugzilla.mozilla.org/show_bug.cgi?id=1772632], but it's now fixed), but for the History list and the Bookmarks, '''''Firefox is using the apple-touch-icon'''''. '''Testing''' – To confirm how Firefox handles SVG favicons and bookmarks, I used a new profile: * Set Windows to dark mode * Create new Firefox profile and open a new browser window * Navigated to one of my (sites)[https://www.sbwfc.co.kr/ ] * Bookmarked the site * Switch to light mode and repeat the navigation and bookmark * In both cases, the bookmark is the same – it’s the apple-touch-icon (see attached portions of the screen capture and the apple-touch-icon.png). Using the apple-touch-icon on the Bookmarks bar has multiple issues: * Most touch-icons have a solid background color while many favicons use transparency, resulting in the touch-icon not looking exactly like the favicon. * Most touch-icons include a border area around the edge while most favicons go right up to the edge. When the image is shrunk down to 16px (CSS type pixels), because of the border area, the area for the working image is only 12px square. * Shrinking a 180x180 pixel PNG image down to 16px (or 32px for high-resolution displays) does lose quite a bit of detail. Most SVG favicons are designed to work well at 16 and 32px. For sites that only have an ICO favicon, Firefox will use that image for the bookmark and history. (Firefox also seems to continue to use the ICO favicon if a site was previously bookmarked.) Safari only uses ICO favicons (not (SVG)[https://caniuse.com/link-icon-svg]), so designers do need to be sure their ICO designs work with light and dark backgrounds (Apple’s logo is a #888888 gray, so is visible against a light or dark background, although not ideal). Chrome and Edge use SVG favicons for the tab, history, and bookmarks, ''and'', if the user switches their configuration, the icons on the bookmark bar can be switched from light to dark or vis-versa by refreshing the page. (Chrome seems to always use the initial light or dark version when clicking into the address bar). This is probably how Firefox is intended to work, but it does seem to be a less-than-desirable solution. If it’s too complicated to use the SVG favicon for the bookmark icon (the way Chromium based browsers do), then would it be possible to only use the ICO favicon for the tab icon and the bookmark (like Safari and Internet Explorer)? Repurposing the apple-touch-icon doesn’t seem like a good solution. Note: I did try changing the order of the links, putting the apple-touch-icon first instead of last, but it didn’t make any difference. The code for icons for my site is: `<link rel="icon" href="favicon.ico?v=2" sizes="any"><!-- 32×32 -->` `<link rel="icon" href="favicon.svg?v=2" type="image/svg+xml">` `<link rel="apple-touch-icon" href="sbf-apple-touch-icon.png"><!-- 180×180 -->` `<link rel="manifest" href="manifest.json">` Thanks