{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreibkfwafy2yqjlgkt3bwa6y6jkcfcoqxns3i4c6yl2ht7h2jeyuj4m",
    "uri": "at://did:plc:cwdkf4xxjpznceembuuspt3d/app.bsky.feed.post/3lej2hjrlnk2d"
  },
  "canonicalUrl": "https://jack.is/posts/fantastic-favicons/",
  "description": "Did you know that CSS in SVGs can use media queries?",
  "path": "/posts/fantastic-favicons/",
  "publishedAt": "2024-12-30T07:31:23.000Z",
  "site": "at://did:plc:cwdkf4xxjpznceembuuspt3d/site.standard.publication/3mdrpafzz7c2m",
  "tags": [
    "blog",
    "tiny"
  ],
  "textContent": "I've finally made my own favicon (inspired by the un-imitable Robb), instead of just using the generic Astro one\nthat everyone gets when you make a website.\n\nI wanted to go the extra mile though and make sure it matched the theme of the\nsite. After a bit of digging I discovered that SVG supports media queries, so\nall the fun light/dark mode detection we can do with CSS on the web, also works\nin your favicon (at least assuming you're using a browser that supports SVG favicons. [^1])\n\nAfter vectorizing my work, I added some classes to the paths, put it all in a\nsingle SVG like so:\n\nAll I have to do is treat it like any other SVG favicon and it just works.\n\nSadly, it doesn't work in Safari, so Safari will always have a light mode\nfavicon. Not the end of the world, just a bit of a bummer.\n\n[^1]: Can I use SVG favicon?",
  "title": "Fantastic Favicons and Where To Find Them"
}