new File([svgText], 'favicon.svg', {type: 'image/svg+xml; charset=utf-8'})
This gives it a filename, restores the correct MIME type, and resolves possible encoding issues. By restoring the correct MIME type, the browser will now probably actually open it, so you may then want to mess around with an <a download> solution to trigger downloading instead of opening, but I’ll skip the implementation details of that.
In the end I’d actually go with a data: URI rather than a blob. <a download=favicon.svg href=data:image/svg+xml,…> works fine. And then it raises the question of just inlining the whole icon instead of keeping favicon.svg separate, as demonstrated by mfontani.
If you're like me and was unaware you could have SVG emojis, here's a client-side tool to make a simple one. Just open your emoji picker, save the SVG, and use / modify as you please.
(I'm aware there are equivalents of this hanging around, this was just a day project. I'd recommend https://emojifav.com/ for this, but slicker. Only downside with that one is you have to unescape the data/svg it gives you if you want to edit it, e.g.: if you want to use media queries)
I've been doing some tests with Emoji / SVG favicons.
There's a couple of problems.
They don't show up on some old browsers and in google search results.
For old browsers there's a solution, which is to have a raster .ico version of the icon at the root of the domain: e.g. example.com/favicon.ico
But for the google issue, I'm not sure if that's the solution. Whatever google is using to render svg icons in their search results just doesn't like emojis. I haven't tested that yet.
also as others have pointed out there's this bit of code that can save you an http request:
The inlined icon feels hacky maybe. Inlining very small files is a good idea I think though. Sending an entire request for only 108 bytes is a bit wasteful.
Sources for both are available (links in the footer of each).
For my personal sites, I serve both favicon.ico and favicon.svg files in the root directory, though AFAIK I'm the only one that uses the favicon.svg file.
Neat. Makes me wonder why we can't do complex favicon design using html/css. Imagine being able to enter text and style it using layouts, fonts, colors, etc.
You can. You’ve got all of SVG except for scripting (which is disabled when SVG is loaded as an image, which happens if you use <img src=….svg> or favicons or such things), which should handle all of your complex favicon desires.
If you really want HTML, well, SVG has the <foreignObject> tag which you can use to embed HTML (in the XML serialisation, so for once you will need to write <br/> instead of <br>). But pure SVG is likely to be a better idea.
Sample markup to drop in an HTML file to get an HTML-powered “Hello, world!” favicon:
Whatever for? It’s a natural consequence of composition of useful elements. It may lead to functionality that you might not design into such a thing if you were making a whole stack from scratch, but the fact that it all works like this is, given HTML and SVG being what they are, categorically a good thing, and is, more generally and subjectively, at least not a bad thing.
SVG can include foreign objects, which is decidedly useful in some contexts; in browsers, that includes HTML, because it’s easy.
A favicon is an image, so it should allow all the usual types of images, which includes SVG. No reason to exclude SVG or any SVG features other than scripting.
(“But now a non-browser can’t render the favicon properly!” you may say. By using <foreignObject>, you’re opting into non-standard functionality and shouldn’t expect all SVG renderers to be able to render that part. For completeness, I’ll note that you can provide an alternative representation for engines that don’t support XHTML in SVG with <switch> and requiredExtensions.)
I like the idea in principal, but my main qualm is the complexity overhead of forcing the client to render something that is ultimately just a small image.
I personally don't see a good reason not to render server side and save page load time, batteries, cpu cycles, etc.
It's definitely a natural consequence of constant improvement of the tech, but I don't like each step piles on technical bloat.
Yes, CPUs and browsers get faster over time, but all those improvements usually lead to more software bloat and cancel each other out. Which is a shame really.
A majority of people in the world use old, non updated phones to access basic websites. Improvements like this can lock people out of portions of the web just because their browser can't handle rendering the favicon.
For those wondering why you'd use this when you could just use an emoji, emoji look different based on the device or browser manufacturers. If your design requires a consistent look then this can be used to create an SVG that looks the same regardless of device or browser.
As far as I can see, that's not what this does. The SVG this creates simply includes the emoji codepoint as a text element with a large font size. So what the user sees will still be entirely dependent on their local font.
If you want a consistent look across devices and browsers, you need an actual SVG graphic, not an SVG that renders a glyph from your default emoji font.
Nope, it doesn't have a consistent look, because in the end it's still the browser engine rendering the SVG, and asking the OS for the glyph for the particular emoji.
In Windows 7 I get black & white emojis, and the website's favicon is a different shape to the one on Windows 10.
That’s not what this does. This is just a simple generator for <svg><text>[emoji]</text></svg>, so that you can get emoji in a format allowed for favicons.
In the end I’d actually go with a data: URI rather than a blob. <a download=favicon.svg href=data:image/svg+xml,…> works fine. And then it raises the question of just inlining the whole icon instead of keeping favicon.svg separate, as demonstrated by mfontani.