Menu
Is there a way to set a different favicon for browsers that support theme-color, either via the meta tag or manifest.json? I have a jet black theme bar, but a mostly-black favicon for use on desktop browsers. I'd like to have an alternate white favicon for mobile browsers, but I don't want to make the assumption that mobile browser === theme-color support, as that's not always going to be the case.
Desktop favicon example:
Mobile favicon example:
466
How can I change the favicon background color for a google sites website? I found instructions that say go to "More" and then click "Manage Site", then click themes, colors, fonts, and then "Make changes to the background.
When the favicon color doesn't work well with dark mode, a common fix is to replace the transparent PNG with a JPG that has a white background, but then you end up with a white square in dark mode. Alternatively, you can use an SVG for the favicon and modify the favicon styling based on the color scheme.
To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico".
Favicon images are small in size, only 16 pixels in height by 16 pixels in width, so there is not much space for complex designs. Still, a good favicon that is clean, simple and easily identifiable can provide a good visual indicator for visitors navigating to your site through their tabs or bookmarks.
The browser's theme is accessible through the prefers-color-scheme media query. Unfortunately, as the favicon is not a page element, you cannot use the media query in a CSS file to, say, switch between two images.
The solution is to combine prefers-color-scheme with SVG, which can embed CSS. Declare an SVG favicon:
<link rel="icon" href="my_icon.svg">
And use the media query in the SVG itself:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<style>
circle {
fill: yellow;
stroke: black;
stroke-width: 3px;
}
@media (prefers-color-scheme: dark) {
circle {
fill: black;
stroke: yellow;
}
}
</style>
<circle cx="50" cy="50" r="47"/>
</svg>
Source at tomoyac.com
SVG favicon is still an advanced feature. It is already supported by Firefox and by Chrome, but other browsers do not support it yet.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
