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: Or this funky quine document with same unicorn emoji that rotates or fades depending on prefers-reduced-motion: 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. 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: 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: Is this open source? it is not, just a simple hosted service Clever!
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>'>
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>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml," />
<link rel="icon" href="data:," />
This one for example shows nearly invisible text in dark theme for me. data:text/html,<link rel="icon" href="https://zany.sh/favicon.svg?text=hi">
<link rel="icon" href="https://zany.sh/favicon.svg?text=hi&background-color=black&text-color=white">