No need to use SVGs for an emoji favicon. Just put the emoji and a space at the beginning of your .
SVG favicons have some cool benefits
21–30 of 75 posts
Re: SVG favicons have some cool benefits
#22Earlier quoted context omitted.
Why is that preferable?
Because it’s a valid image.
No it’s not: the root element must exist in the http://www.w3.org/2000/svg namespace, or the file won’t be valid SVG and won’t be rendered.
Alas for my beautiful short form that won’t work after all:
">
(If you’re not sure why I worded the namespaces remark so rather than just talking about an xmlns attribute, here’s some valid SVG: " rel="nofollow">http://www.w3.org/2000/svg"/>.)
Re: SVG favicons have some cool benefits
#23There's a few things to be aware of with svg favicons. 1. If a favicon is missing or in a format that's not compatible with the browser. The browser will look for a /favicon.ico file at the root of the site. It's worth having that as a backup or you end up with no favicon and 404 errors in the console. 2. Google now shows a favicon in some search results. I'm pretty sure it works fine with SVG. But, if you use an emo…
2: Why? Are there even any systems left on the planet that aren't past EOL but don't have emoji fonts preinstalled at the OS level?
Re: SVG favicons have some cool benefits
#24There's a few things to be aware of with svg favicons. 1. If a favicon is missing or in a format that's not compatible with the browser. The browser will look for a /favicon.ico file at the root of the site. It's worth having that as a backup or you end up with no favicon and 404 errors in the console. 2. Google now shows a favicon in some search results. I'm pretty sure it works fine with SVG. But, if you use an emo…
2: Why? Are there even any systems left on the planet that aren't past EOL but don't have emoji fonts preinstalled at the OS level?
Maybe because you can't guarantee that even if an OS has emoji support that it supports the latest version of emojis.
I run into this every time my wife updates her phone. She sends me text messages with "Lookit the cool new emojis!" But since I haven't updated mine, they came through as missing icon glyphs.
Re: SVG favicons have some cool benefits
#25There's a few things to be aware of with svg favicons. 1. If a favicon is missing or in a format that's not compatible with the browser. The browser will look for a /favicon.ico file at the root of the site. It's worth having that as a backup or you end up with no favicon and 404 errors in the console. 2. Google now shows a favicon in some search results. I'm pretty sure it works fine with SVG. But, if you use an emo…
Your favicon.ico can be compressed further to a 171 byte PNG. I confess I find this 271-byte incantation compelling despite increasing each response by that much, since it’ll load faster in the first place and avoid the overhead of another request:
Re: SVG favicons have some cool benefits
#26People keep on talking about (prefers-color-scheme: dark), but it isn’t what they want it to be—never has been, and probably never will be (though I will admit that prefers-color-scheme could theoretically be special-cased for favicon rendering). For example, in Firefox, I use the dark theme for the UI, but that’s completely unrelated to the content, and prefers-color-scheme matches the content, not the chrome. Conte…
> For example, in Firefox, I use the dark theme for the UI, but that’s completely unrelated to the content, and prefers-color-scheme matches the content, not the chrome. Content I keep normal, light.
Of note is https://bugzilla.mozilla.org/show_bug.cgi?id=1529323 which is requesting to change this behaviour to align prefers-color-scheme to the UI theme if there is no overriding behaviour.
I prefer this because now rather than setting dark mode to each site I go to, they can be signalled this already. There's no user friendly way to set firefox's prefer-color-scheme: dark if the OS does not have the capabilities to do that.
Re: SVG favicons have some cool benefits
#27There's a few things to be aware of with svg favicons. 1. If a favicon is missing or in a format that's not compatible with the browser. The browser will look for a /favicon.ico file at the root of the site. It's worth having that as a backup or you end up with no favicon and 404 errors in the console. 2. Google now shows a favicon in some search results. I'm pretty sure it works fine with SVG. But, if you use an emo…
2: Why? Are there even any systems left on the planet that aren't past EOL but don't have emoji fonts preinstalled at the OS level?
I think google renders them in a raster format. Whatever they use to do that doesn't support emojis.
It could be by design, by rendering any text in the svg icon google is making a design decision for you. They're choosing a font, or a specific emoji type. Maybe they want to avoid the problems that would ensue.
Re: SVG favicons have some cool benefits
#28I agree they are great, especially for simple icons that work as SVG. Support for SVG favicons, however, keeps me from using them: https://caniuse.com/link-icon-svg
When you look at it compared to actual browser usage, you end up with 89.62% support, which is not bad at all. WebP & CSS Grid are at about 95%.
Re: SVG favicons have some cool benefits
#29People keep on talking about (prefers-color-scheme: dark), but it isn’t what they want it to be—never has been, and probably never will be (though I will admit that prefers-color-scheme could theoretically be special-cased for favicon rendering). For example, in Firefox, I use the dark theme for the UI, but that’s completely unrelated to the content, and prefers-color-scheme matches the content, not the chrome. Conte…
> For example, in Firefox, I use the dark theme for the UI, but that’s completely unrelated to the content, and prefers-color-scheme matches the content, not the chrome. Content I keep normal, light. Of note is https://bugzilla.mozilla.org/show_bug.cgi?id=1529323 which is requesting to change this behaviour to align prefers-color-scheme to the UI theme if there is no overriding behaviour. I prefer this because now ra…
Yeah, I’ve been waiting for that to inevitably happen so that I can revert it. Speaking overly broadly, dark mode everything is normally an at-least-slightly bad idea, but there’s good cause for aesthetic (low-contrast) dark mode of chrome in order to get it mostly out of the way, so that you can focus on the content. This is essentially what most graphics programs default to nowadays, and the same reasoning can be applied to browsers. (Though it only really works if your windows are maximised, otherwise dark between two lights could become a distraction.) No one says “you have a dark desktop background, you must want everything on your system to be dark”. Comment 47’s “When using the "Dark" theme, "prefers-color-scheme" should be dark, because that's what the user requested.” is simply not right. Choosing a dark browser theme is honestly quite a weak hint about whether you want content to be dark. The conflation of this that recent forays into OS-wide dark modes has encouraged is not good.
Re: SVG favicons have some cool benefits
#30I agree they are great, especially for simple icons that work as SVG. Support for SVG favicons, however, keeps me from using them: https://caniuse.com/link-icon-svg
Oh wow, Safari still doesn’t do regular SVG favicons? Huh. Somehow I thought that got sorted out a couple of years back in 12 or something.