4 ms·

Show HN: Zany – Favicon API

30 points by jchap 3y ago

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.

Etheryte 3y ago
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," />
- smartis2812 3y ago
  And its dependency free - Nice! Thank you
- melx 3y ago
  or just "ignore" the favicon altogether: <link rel="icon" href="data:," />
  - Etheryte 3y ago
    That's neat, didn't know something as short as that was valid, thanks for the tip.
myfonj 3y ago
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 3y ago
  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">
modec 3y ago
Or you can get a emoji as favicon with: <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>FAVORITE EMOJI HERE</text></svg>">
- myfonj 3y ago
  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>
runnr_az 3y ago
Clever!
mthoms 3y ago
Is this open source?
- jchap 3y ago
  it is not, just a simple hosted service

30 points by jchap 3y ago

Etheryte 3y ago

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

smartis2812 3y ago
And its dependency free - Nice! Thank you
melx 3y ago
or just "ignore" the favicon altogether: <link rel="icon" href="data:," />
- Etheryte 3y ago
  That's neat, didn't know something as short as that was valid, thanks for the tip.

myfonj 3y ago

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 3y ago
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">

modec 3y ago

Or you can get a emoji as favicon with: <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>FAVORITE EMOJI HERE</text></svg>">

myfonj 3y ago
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>

runnr_az 3y ago

Clever!

mthoms 3y ago

Is this open source?

jchap 3y ago
it is not, just a simple hosted service