Show HN: Emojicons(emojicons.netlify.app)
emojicons.netlify.app
Show HN: Emojicons
https://emojicons.netlify.app/
37 comments
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:
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:
<link rel=icon href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><foreignObject width="48" height="48"><div xmlns="http://www.w3.org/1999/xhtml">Hello,<br/>world!</div></foreignObject></svg>'>Ouch. We have come to the point where rendering a favicon requires a full web browser rendering engine.
I can't help but think this is a huge step backwards.
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.)
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.
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.
Cool, didn't know SVG has this capability but man does it look ugly
Hey HN,
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)
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)
This looks pretty good, straightforward and easy to use. Will probably use this for one of my projects.
Can't edit this comment, but, "SVG emojis" -> "emojis as SVG favicons"
Ok, so I tried it as this would be a useful tool for me. When clicking download all get as plain text in my browser is this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">ðŸ±â€ðŸ‘¤</text></svg>
Is that wrong?
Having no experience in this area, I think it might have to do with text en/decoding - https://en.wikipedia.org/wiki/Mojibake
I'd recommend using another tool for this while I investigate, sorry.
I'd recommend using another tool for this while I investigate, sorry.
If it helps: Chrome Version 89.0.4389.114
On Windows.
On Windows.
Looks like a valid svg to me!
Maybe the server doesn't set the content-type correctly?
Maybe the server doesn't set the content-type correctly?
That's a cat ninja emoji: https://ftfy.vercel.app/?s=%C3%B0%C5%B8%C2%90%C2%B1%C3%A2%E2...
It is :) It's the emoji version of my cat, Starbuck.
[deleted]
[deleted]
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.
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.
Ah OK. That greatly reduces my need for this service then.
Yep! Same here. I'm using emojis as icons on my website (https://remotehunt.com) and I don't like that my icons look different on different platforms.
But I haven't found an icon lib that I like as much as emojis.
What's the idea behind this tool then? Name implies it's for using emojis as icons, but I can do that anyways without the <svg>?
But I haven't found an icon lib that I like as much as emojis.
What's the idea behind this tool then? Name implies it's for using emojis as icons, but I can do that anyways without the <svg>?
it's for using emojis as favicons – these little icons in browser tab headings (where HN has "Y" in an orange square)
For that, simply use https://twemoji.twitter.com/ or a similar service that lets you download SVG emojis. Then you implement it as a regular favicon.
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.
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.
Or you could do something like:
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>EMOJI GOES HERE</text></svg>">
You can replace each %22 with ' if you like. Shorter and clearer.
It would be good to change this:
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.
new Blob([svgText], {type: 'text/svg'});
new File([svgText], 'favicon.svg', {type: 'image/svg+xml; charset=utf-8'})
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.
For a similar service there is https://fav.farm
Great tool.
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:
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99 99'><text y='.9em' font-size='90'>EMOJI</text></svg>">
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:
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99 99'><text y='.9em' font-size='90'>EMOJI</text></svg>">
Surely this seems too hacky to be of real use?
Which element is hacky?
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.
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.
This website has two emojicons in its tab: https://getemoji.com/
the 2nd one is just an emoji character in <title> of course
I also like to use emoji for favicons and made a couple of sites to help with it:
https://emoji-favicon.fileformat.info/ - pre-converted ICOs of the Google and Twitter emoji. I especially like the flag ones.
https://favicon.fileformat.info/ - converts SVG to ICO
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.
https://emoji-favicon.fileformat.info/ - pre-converted ICOs of the Google and Twitter emoji. I especially like the flag ones.
https://favicon.fileformat.info/ - converts SVG to ICO
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.