Use emoji for favicon

[cefoo]

Make the favicon rotate between the "3 hemispheres" emojis.

[zouharvi]

How about this? I can create a PR to replace favicon.ico with this. I can also increase/decrease the speed.

I used Twitter's rendering of this emoji but there are others. I'm not sure about the licensing of this though.

Somewhat unrelated, is machinetranslate.jpg used for anything? It seems like a lower-quality version of machinetranslate.png.

[zouharvi]

Maybe it could be also done via JS to literally change the favicon emoji using something like this. In my opinion, that's very hacky and using a GIF is more stable.

<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>🌏</text></svg>">

[bittlingmayer]

We wanted an emoji so that it's just unicode.

By rotate, we mean it could just pick a random one at page load time. Doesn't need to change while the page is open.

[zouharvi]

Since it's all statically generated with Jekyll, a favicon can be randomly chosen with every build. This is somewhat limiting.

The alternative is to do that with user-side JS (insert random favicon to own head). I'd rather avoid adding JS for a number of reasons.

The GIF approach solves both these issues because it can be easily statically loaded. It may however be distracting to some to see the tab icon change. It would also limit us to one specific rendering.

We wanted an emoji so that it's just unicode.

By this you mean the SVG approach or adding the emoji to the title, i.e. having no favicon?

[bittlingmayer]

I meant the SVG approach. (Note, it's static HTML, not JavaScript.)

https://stackoverflow.com/a/61238584/4486860

Now that all major browsers support SVG favicons, it's possible to refer to an SVG that contains the emoji inside:

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

Link it up like you'd normally do:

<link rel="icon" href="/favicon.svg" />

[zouharvi]

Yes, but the issue is that the rotation needs to be chosen at random with every page load, which is not something tat Jekyll can do, it seems.

GIF would solve this because it's a single favicon that just changes the frame after some fixed amount of time. It may be, however, disturbing to some users and it's not a very elegant solution.

[bittlingmayer]

Not saying this is a good idea, but technically doable:

<link id="fav" rel="icon" href="/favicon-europeafrica.svg" />

<script>
  var favicons = [ '/favicon-americas.svg', '/favicon-europeafrica.svg', '/favicon-asia.svg' ];

  randFav = favicons[ Math.floor(Math.random() * 3) ];

  document.getElementById('fav').href = randFav;
</script>

[zouharvi]

Yes, this is the JS solution (I liked having the fully static site but this is not a big of a deal). It however uses pre-rendered emojis (in SVG). It could be improved with the following, which would render it based on the emoji rendering on the target device.

<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>🌏</text></svg>"
>

Another advantage of this is that there won't be a (possibly) FOUC because the favicon change won't make a request to the server.