Show HN: Zany – Favicon API • Hacker News Board

Show HN: Zany – Favicon API

#1

Post by jchap » Tue, Oct 03, 2023, 6:19 AM UTC

Got mad at this console error the other night: "Failed to load resource: the server responded with a status of 404 (File not found) :8000/favicon.ico:1" and hacked this together. Never have to worry about that 16x16 square again.

Show HN: Zany – Favicon API
zany.sh

Re: Show HN: Zany – Favicon API

#2

Post by Etheryte » Tue, Oct 03, 2023, 10:27 AM UTC

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

Re: Show HN: Zany – Favicon API

#3

Post by smartis2812 » Tue, Oct 03, 2023, 11:34 AM UTC

Etheryte wrote: post #2

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

And its dependency free - Nice!

Thank you

Re: Show HN: Zany – Favicon API

#4

Post by melx » Tue, Oct 03, 2023, 11:57 AM UTC

Etheryte wrote: post #2

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

or just "ignore" the favicon altogether:

Re: Show HN: Zany – Favicon API

#5

Post by myfonj » Tue, Oct 03, 2023, 12:40 PM UTC

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,

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.

Re: Show HN: Zany – Favicon API

#6

Post by Etheryte » Tue, Oct 03, 2023, 12:50 PM UTC

melx wrote: post #4

Etheryte wrote: post #2

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

or just "ignore" the favicon altogether:

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

Re: Show HN: Zany – Favicon API

#7

Post by modec » Tue, Oct 03, 2023, 1:29 PM UTC

Or you can get a emoji as favicon with:

http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>FAVORITE EMOJI HERE">

Re: Show HN: Zany – Favicon API

#8

Post by jchap » Tue, Oct 03, 2023, 1:35 PM UTC

myfonj wrote: post #5

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, 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.

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

Re: Show HN: Zany – Favicon API

#9

Post by runnr_az » Tue, Oct 03, 2023, 2:49 PM UTC

Clever!

Re: Show HN: Zany – Favicon API

#10

Post by myfonj » Tue, Oct 03, 2023, 4:38 PM UTC

modec wrote: post #7

Or you can get a emoji as favicon with: http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22> FAVORITE EMOJI HERE ">

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

    data:text/html;charset=utf-8,%F0%9F%A6%84'>

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,%0A%F0%9F%A6%84@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}}'>%0AAnimated favicon affected by `prefers-reduced-motion` media query, embedded in datauri inside datauri document%0A: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'}}%0Adocument.write('',decodeURIComponent(document.URL))