Show HN: Zany – Favicon API
zany.shGot 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.
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 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>FAVORITE EMOJI HERE</text></svg>">
Yup. My last "golfing" take was to use default font-size and fit viewBox accordingly:
But haven't tested outside Windows, so it will be most probably off in some browsers (Safari?).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>'>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>
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," />or just "ignore" the favicon altogether:
<link rel="icon" href="data:," />That's neat, didn't know something as short as that was valid, thanks for the tip.
And its dependency free - Nice!
Thank you
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">
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:
<link rel="icon" href="https://zany.sh/favicon.svg?text=hi&background-color=black&text-color=white">
Is this open source?
it is not, just a simple hosted service
Clever!