Login/Register
Use emoji as favicon in websites
Asked Answered
Solved javascripthtmlemojifavicon
R

6

26

Emojis are awesome, so I was thinking how could add one as a favicon using link tag.

One possible solution:

I found one possible way in this blog post here. Based on that it's been achieved what I wanted so far with the following solution.

JavaScript code snippet:

const setFavicon = (emoji) => {
  const canvas = document.createElement('canvas');
  canvas.height = 32;
  canvas.width = 32;

  const ctx = canvas.getContext('2d');
  ctx.font = '28px serif';
  ctx.fillText(emoji, -2, 24);

  const favicon = document.querySelector('link[rel=icon]');
  if (favicon) { favicon.href = canvas.toDataURL(); }
}

setFavicon('🐢');

The link tag in HTML:

<link rel="icon" type="image/png" href="favicon.ico"/>

So my question:

Maybe creating favicon.ico file for this purpose would do the thing also. Is there any better way to achieve this without converting or having extra JavaScript snippets in your code? Thank you!

Rebec answered 20/12, 2019 at 21:10 Comment(0)
H
6

Favicon are images, so just make a static image and use that.

You're not going to change it constantly, so there's no need to make people's computers spend the time running JS to generate an asset that is always the same, better to generate it once, save that as your favicon image file, and point to that. As a bonus, browsers will cache it, so instead of recomputing it every time, or even downloading it every time, as a favicon it'll only be downloaded once and then never again.

Also note that you don't need the .ico extension (it's the extension for an ancient image format), instead just use the extension the image is supposed to have, and set the type to the correct image mime type.

Haber answered 21/12, 2019 at 17:9 Comment(0)
C
33

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" />
Chiccory answered 15/4, 2020 at 21:4 Comment(3)
When I used y="32" and font-sizer="32", the rocket's edges were cut off. I mean, like if the emoji was bigger than the box holding it. Changed to 24 and now it renders fine. – Washwoman
@Chiccory How about adding the SVG directly in the link tag? href="data:image/svg+xml,... – Lordinwaiting
According to the link shared, so support in Safari (Mac or iOS) – Arable
C
22

Another way to do it is:

<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>">

From: https://css-tricks.com/emoji-as-a-favicon/

Caddis answered 14/10, 2021 at 8:1 Comment(3)
This is my preferred way, as you have one less request to make from the browser. – Desmarais
I make small changes of y and font-size in <text> to make it prettier: <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=%221em%22 font-size=%2280%22>🎯</text></svg>"> – Pleasurable
This works fine but when I look my website up on Google it does not show up in the search. It only shows up on the tab. – Lagging
H
6

Favicon are images, so just make a static image and use that.

You're not going to change it constantly, so there's no need to make people's computers spend the time running JS to generate an asset that is always the same, better to generate it once, save that as your favicon image file, and point to that. As a bonus, browsers will cache it, so instead of recomputing it every time, or even downloading it every time, as a favicon it'll only be downloaded once and then never again.

Also note that you don't need the .ico extension (it's the extension for an ancient image format), instead just use the extension the image is supposed to have, and set the type to the correct image mime type.

Haber answered 21/12, 2019 at 17:9 Comment(0)
T
5

Making a screenshot is probably the better and easier solution (as Mike mentioned). And there is one more advantage of this solution:

Emojis can look very different on different platforms.

An example: enter image description here

You won't need to handle that problem, too..

Thetis answered 21/12, 2019 at 17:37 Comment(2)
I think the look of the icon is a property of the font, and not of the system? – Sonyasoo
I totally agree. @piegames: Emojis are often provided via Opentype-SVG fonts. These font files are huge compared to regular alphabetic font families e.g "Noto Sans" (which usually don't contain colored emojis). In theory you could also provide a specific font file e.g Noto Emoji but you would have to load additional data of > 6MB! So usually application use local Emoji-fonts – therefore their appearance differ from application to application as illustrated above. – Toyatoyama
H
0

Unicode chars can have different width, and a favicon.ico should contain multiple images sizes in the same file (eq: 16px, 32px, ..., 256px).

The following Shell script will help for non standard width characters. It output a scalable favicon.ico, as well as the PNG and SVG version.

It accepts most full width Unicode zwj emojis compositions.

Usage examples:

chmod +x genfavicon

./genfavicon 👽

./genfavicon 🧝🏿‍♀️

echo "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><text y='.95em' font-size='205'>$1</text></svg>"  > favicon.svg
convert -density 300 -define icon:auto-resize=256,128,96,64,48,32,16 -background none favicon.svg favicon.ico
convert favicon.svg favicon.png

Require imagemagick: sudo apt install imagemagick

PHP shell script version:

    #!/usr/bin/php
    <?php
    // ./genfavicon 👽
    file_put_contents("favicon.svg" ,
      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><text y='.95em' font-size='205'>".$argv[1]."</text></svg>");
    `convert favicon.svg favicon.png`
    `convert -density 300 -define icon:auto-resize=256,128,96,64,48,32,16 -background none favicon.svg favicon.ico`;

See also How to set a temporary favicon in one-line from JavaScript.

Hurrah answered 18/11, 2023 at 11:45 Comment(0)
R
0

One option is https://fav.farm/:

<link rel="icon" href="https://fav.farm/💩" />

which is basically a wrapper on code similar to this answer:

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 16 16'><text x='0' y='14'>😽</text></svg>" />

I'm not crazy about the dependency, so I'd just copy-paste the raw code into my site.

Refresher answered 13/5 at 23:32 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.