Create emoji favicon (PNG from SVG?)

support
1

Hi folks, I’m planning to use Hugo Pipes to create an SVG favicon from an emoji. My SVG currently looks like this:

<!-- favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
  <text y="28" font-size="28">🚧</text>
</svg>

I intend to allow people to configure my theme by inserting their own emoji into their config.toml to replace my default “construction” emoji favicon. (That way people who can’t be bothered with graphics can still have a favicon.) This will work for modern Chrome and Firefox.

Unfortunately, some browsers don’t support SVG favicons (cmon, Safari). To those browsers I want to serve a simple 16x16 PNG favicon. I would like to use Hugo Pipes to produce that PNG from a given emoji, perhaps using the SVG that I’m already generating. Is this possible?

2

No…

3

In case you’re wondering what creating an SVG from a Hugo template looks like, here’s my SVG template:

<!-- favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <text y="13" font-size="13">{{ .Site.Params.faviconText }}</text>
</svg>

and here’s the code for the <head> of my site that calls the SVG template:

{{ $faviconTemplate := resources.Get "images/favicon-template.svg" -}}
{{ $favicon := $faviconTemplate | resources.Minify | resources.ExecuteAsTemplate "images/favicon.svg" . -}}
<link rel=icon type=image/svg+xml href={{ $favicon.Permalink }}>

Putting faviconText = "🚧" in the params in config.toml will then cause the construction sign emoji to be displayed as your favicon in Chrome and Firefox. (Sorry I don’t have a version of this site online yet for a live demo, I’ll work on that.)

I have also not been able to think of a way to do this for a PNG favicon, but I’m still a little disappointed in your one-word answer :wink: I saw a thread discussing tracing SVGs from raster images, am I crazy to think it might also be possible to go the other direction, making raster images from SVG?

If it is indeed impossible, are there any plausible features under consideration that could make it possible in the future?

4

I wonder what is your use case for this ?
Because the inner content stays an emoticon, even if the format is SVG. Does this scale well ??

5

Yeah, I was thinking about that. If you start to consider what inconsistencies can arise when using different browsers, operating systems and etc…

It’s far beyond the Hugo’s realm.