Emoji as a Favicon Using SVG (2022)(css-tricks.com)
103 pointsby andrei-akopian9 months ago10 comments
  • wonger_9 months ago
    Note that Safari still does not support SVG favicons.

    This site has a nice one-click copy button for each "emojicon": https://emojicon.dev/

    • josephscott9 months ago
      This has been on my wish list for so long. I think Safari is the last hold out on SVG favicons - https://caniuse.com/link-icon-svg

      I'd love to only have to specify a single SVG image for a site and have it used for all sizes and scales.

    • brysonreece9 months ago
      Hey, that’s my site! Thanks for checking it out!
      • codetrotter9 months ago
        This is superb! I have a small tool with a web frontend, that I use a specific emoji to represent but I didn’t have a favicon yet, because if I used a PNG of an emoji that Apple made I’d be infringing on their copyright.

        Using SVG and having the browser and OS provide the rendering of the emoji is perfect for the favicon of my tool!

        • netsharc9 months ago
          A quick search says it's possible to get the PNG data URL from a canvas. I wonder if it's viable to draw an emoji to a canvas, and extract the PNG out of it for the favicon.

          Would a lawyer go after "client-side copyright infringement"?

    • rasso9 months ago
      Where does Safari even show Emojis?
      • a1o9 months ago
        Emoji, anywhere with text. If you mean favicon, you can see them in different places, but one example is top left of the tabs if you are using the device in landscape. If you mean desktop Safari then I don't remember as I don't use it on desktop.
  • jsheard9 months ago
    OTOH if you want a quick favicon that renders consistently everywhere, Googles emoji set is available as SVGs (and fallback PNGs for Safari) under a permissive license.

    https://github.com/googlefonts/noto-emoji

  • sodimel9 months ago
    Neat! I learned a few years back that you can use an emoji as a cursor using svg too, here's an example: https://codepen.io/lmmm/pen/LYpxzgV
  • asb9 months ago
    I used this trick for a quick favicon on my site https://muxup.com/ - though unfortunately Google/Bing/DuckDuckGo doesn't like svg favicons and so it's not displayed in search results. I should really add a proper favicon...
    • 9 months ago
      undefined
    • lloydatkinson9 months ago
      Favicons have always been weirdly special. I don’t know why.

      SVG support feels like it should be pretty straightforward to implement.

      Last time I looked at how to implement favicons “correctly” I had to make some weird XML file with the word apple in it and it lists all the size of icons I have, and then use a favicon generator to create all the “correct” sizes.

      What a mess.

    • royal_ts9 months ago
      at least for google it does render my svg favicon in their search result page, Bing and DuckDuckGo didn't
      • asb9 months ago
        Oh that's interesting, I wonder what's different about your SVG favicon vs mine.
  • youssefabdelm9 months ago
    Hm I wonder if it's possible to animate those svg favicons...
    • tripflag9 months ago
      Yes; i use this trick to display an upload progressbar (progress-donut?) using a bit of JavaScript: https://github.com/9001/copyparty/blob/c5988a04f/copyparty/w...

      but note that browsers rate-limit you to approx. 1 update per sec

      • sensanaty9 months ago
        Extremely cursed, I love it
    • lifthrasiir9 months ago
      In principle, yes:

          data:text/html;charset=utf-8,<link rel="icon" href="
    data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
    <g>
    <text x='0,0,100,0,200,0,300,0,400,0,500,0,600,0,700,0,800,0,900,0,1000,0,1100,0,1200,0,
             1300,0,1400,0,1500,0,1600,0,1700,0,1800,0,1900,0,2000,0,2100,0,2200,0,2300'
          y='.9em' font-size='90'></text>
    <animateTransform attributeName='transform'
                      values='0,0;-200,0;-400,0;-600,0;-800,0;-1000,0;
                              -1200,0;-1400,0;-1600,0;-1800,0;-2000,0;-2200,0'
                      calcMode='discrete' dur='1s' repeatCount='indefinite'/>
    </g>
    </svg>
    ">
      However it doesn't seem to work on Chrome, even though it does handle the animated SVG correctly.
  • rtcode_io9 months ago
    I have https://fav.rt.ht for you too! Let's you pick formats and customize layout/size.
    • est9 months ago
      Now support animations!
  • jer0me9 months ago
    Or if you'd like a PNG of a specific style: https://emojicdn.elk.sh/
  • skeoh9 months ago
    See also: https://fav.farm/
    • wesbos9 months ago
      This is my site! It does some decent traffic for a joke website
    • _puk9 months ago
      Direct inspiration for https://favmeup.com/

      Used it as a nice intro project to try out cloudflare hosting.

  • 9 months ago
    undefined
  • 9 months ago
    undefined