Emoji as a Favicon Using SVG (2022)(css-tricks.com)
103 pointsby andrei-akopiana year ago10 comments
  • wonger_a year 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/

    • josephscotta year 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.

    • brysonreecea year ago
      Hey, that’s my site! Thanks for checking it out!
      • codetrottera year 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!

        • netsharca year 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"?

    • rassoa year ago
      Where does Safari even show Emojis?
      • a1oa year 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.
  • jshearda year 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

  • sodimela year 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
  • asba year 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...
    • a year ago
      undefined
    • lloydatkinsona year 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_tsa year ago
      at least for google it does render my svg favicon in their search result page, Bing and DuckDuckGo didn't
      • asba year ago
        Oh that's interesting, I wonder what's different about your SVG favicon vs mine.
  • youssefabdelma year ago
    Hm I wonder if it's possible to animate those svg favicons...
    • tripflaga year 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

      • sensanatya year ago
        Extremely cursed, I love it
    • lifthrasiira year 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_ioa year ago
    I have https://fav.rt.ht for you too! Let's you pick formats and customize layout/size.
    • esta year ago
      Now support animations!
  • jer0mea year ago
    Or if you'd like a PNG of a specific style: https://emojicdn.elk.sh/
  • skeoha year ago
    See also: https://fav.farm/
    • wesbosa year ago
      This is my site! It does some decent traffic for a joke website
    • _puka year ago
      Direct inspiration for https://favmeup.com/

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

  • a year ago
    undefined
  • a year ago
    undefined