3 ms·

The 42 byte transparent GIF saw ample use in web development a quarter century ago, when it was used to create pixel perfect <table> layouts. Some things have c

The 42 byte transparent GIF saw ample use in web development a quarter century ago, when it was used to create pixel perfect <table> layouts. Some things have changed for the better. https://x42.com/test/gifdot.shtml?abcdef https://x42.com/test/gifdot.shtml?abcdef

JimDabell 1y ago
The smallest GIF is still useful because it is the smallest possible valid favicon. This means you can stuff it into a data: URI to prevent useless requests showing up when you are working on something: <link rel="icon" href="data:image/gif;base64,R0lGODlhAQABAAAAADs=">
- vbezhenar 1y ago
  You can also make an actually useful and readable SVG favicon this way: <link rel="shortcut icon" href='data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">%3ccircle cx="25" cy="50" r="20"/>%3ccircle cx="75" cy="50" r="20"/>%3c/svg>' />
  - JimDabell 1y ago
    Good to know! My goal is simply to stop a 404 popping up during development in the simplest way possible, so the smallest amount of code is best for me.
- zamadatix 1y ago
  If you're just wanting to shut the request up and aren't actually trying to display a certain favicon you can do: <link rel=icon href=data:> With the bonus you've probably already remembered how to reconstruct this on demand just by reading this comment. It is "invalid" data but so is your example on Safari and Firefox instead of Chromium based browsers. It doesn't matter as much because that problem is local and silent in the logs, unlike the request.
  - JimDabell 1y ago
    Thanks! I’m pretty sure I tried this ages ago and it didn’t work at the time, but I tried this again now and it does the job.
    - zamadatix 1y ago
      The key is to keep up through "data:" since any shorter (even just dropping the ":") and it gets treated a relative link instead.
gudzpoz 1y ago
A use case: https://news.ycombinator.com/s.gif https://news.ycombinator.com/s.gif (43 bytes) (use for comment indentation)
- rollcat 1y ago
  It's kinda cool than HN looks OK even in simple browsers like Dillo: <https://imgur.com/a/Seu8rYT https://imgur.com/a/Seu8rYT> However it's pretty bad on narrow screens. I wish there was some progressive enhancement via modern CSS, or at least just dark mode.

JimDabell 1y ago

The smallest GIF is still useful because it is the smallest possible valid favicon. This means you can stuff it into a data: URI to prevent useless requests showing up when you are working on something: <link rel="icon" href="data:image/gif;base64,R0lGODlhAQABAAAAADs=">

vbezhenar 1y ago
You can also make an actually useful and readable SVG favicon this way: <link rel="shortcut icon" href='data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">%3ccircle cx="25" cy="50" r="20"/>%3ccircle cx="75" cy="50" r="20"/>%3c/svg>' />
- JimDabell 1y ago
  Good to know! My goal is simply to stop a 404 popping up during development in the simplest way possible, so the smallest amount of code is best for me.
zamadatix 1y ago
If you're just wanting to shut the request up and aren't actually trying to display a certain favicon you can do: <link rel=icon href=data:> With the bonus you've probably already remembered how to reconstruct this on demand just by reading this comment. It is "invalid" data but so is your example on Safari and Firefox instead of Chromium based browsers. It doesn't matter as much because that problem is local and silent in the logs, unlike the request.
- JimDabell 1y ago
  Thanks! I’m pretty sure I tried this ages ago and it didn’t work at the time, but I tried this again now and it does the job.
  - zamadatix 1y ago
    The key is to keep up through "data:" since any shorter (even just dropping the ":") and it gets treated a relative link instead.

gudzpoz 1y ago

A use case: https://news.ycombinator.com/s.gif https://news.ycombinator.com/s.gif (43 bytes) (use for comment indentation)

rollcat 1y ago
It's kinda cool than HN looks OK even in simple browsers like Dillo: <https://imgur.com/a/Seu8rYT https://imgur.com/a/Seu8rYT> However it's pretty bad on narrow screens. I wish there was some progressive enhancement via modern CSS, or at least just dark mode.