Show HN: Zany – Favicon API

modec · on Oct 3, 2023

Or you can get a emoji as favicon with:

myfonj · on Oct 3, 2023

Yup. My last "golfing" take was to use default font-size and fit viewBox accordingly:

    data:text/html;charset=utf-8,<link rel=icon href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1,-15,19,19"><text>%F0%9F%A6%84</text></svg>'>

But haven't tested outside Windows, so it will be most probably off in some browsers (Safari?).

Or this funky quine document with same unicorn emoji that rotates or fades depending on prefers-reduced-motion:

    data:text/html;charset=utf-8,<!doctype html>%0A<link rel=icon href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="1,-15,19,19"><text transform-origin="10 -3">%F0%9F%A6%84</text><style>@keyframes x{to{transform:rotate(1turn)}}@keyframes y{to{opacity:0}}text{animation:2s x infinite alternate}@media(prefers-reduced-motion){text{animation-name:y}}</style></svg>'>%0A<title>Animated favicon affected by `prefers-reduced-motion` media query, embedded in datauri inside datauri document</title>%0A<style>:not(style,script){display:block; padding:0 .2em; background:darkslategray; color:snow; white-space:pre-wrap} title::after{content:' (in `' var(--prm) '` mode)'}html{--prm:'no-preference'}@media(prefers-reduced-motion:reduce){html{--prm:'reduce'}}</style>%0A<script>document.write('<plaintext>',decodeURIComponent(document.URL))</script>

Etheryte · on Oct 3, 2023

As an alternative approach you can use an empty data URL to get an empty favicon:

  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml," />

melx · on Oct 3, 2023

or just "ignore" the favicon altogether:

  <link rel="icon" href="data:," />

Etheryte · on Oct 3, 2023

That's neat, didn't know something as short as that was valid, thanks for the tip.

smartis2812 · on Oct 3, 2023

And its dependency free - Nice!

Thank you

myfonj · on Oct 3, 2023

You can make folks test it in their browsers by instructing them to copy and paste dataURI into their URL bar, like:

    data:text/html,<link rel="icon" href="https://zany.sh/favicon.svg?text=hi">

This one for example shows nearly invisible text in dark theme for me.

Or maybe add text input to dynamically update current page's favicon to see the outcome instantly.

jchap · on Oct 3, 2023

this is a great idea, going to update the docs. also, regarding dark themes, you can control the text/background color via query params:

    <link rel="icon" href="https://zany.sh/favicon.svg?text=hi&background-color=black&text-color=white">

mthoms · on Oct 3, 2023

Is this open source?

jchap · on Oct 3, 2023

it is not, just a simple hosted service

runnr_az · on Oct 3, 2023

Clever!