Adding a Favicon

Adding a favicon to my blog has been on my TODO list for a while. I did it a few years back, by simply adding a favicon.ico file that was a plain 32x32px image that I edited in GIMP pixel per pixel. Now that displays with high pixel density are more common place it felt wrong to add a 32x32px file. I started looking into recommended ways of doing it several times, but only recently came across a guide that finally looked like something I could do in between things: How to Favicon in 2021.

When I last played with the design for my blog, I decided to create a logo of sorts in SVG - mostly to create some SVG content and maybe play with CSS animations 😉 It's super basic, just a simple line with some styling that's immitating a ridge close to home:

And the source to give you and idea of just how basic it is:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100"
     style="fill:none;stroke-width:0.2em;stroke:currentColor;width:300px;height:100px;padding:1em;">
  <g>
    <path d="M 0,100 L 100,7 L 115,20 L 143,9 L 153,3 L 162,8 L 215,12 L 220,17 L 227,16 L 300,100" />
  </g>
</svg>

I wanted to use that logo for the favicon as well. Turns out I'm lucky and most browsers seem to support SVG favicons. Following the guide, I created a SVG file with the line as the main content and added a blue rect as a background. To make it work as an icon, I had to take out some points, as they'd just be blurry noise on a 32x32px version and added rounded corners on the rect:

The guide had some lessons for me, like learning about a JSON manifest that Android would use for creating a shortcut and I got another quick one for Inkscape: Adding rounded corners isn't "just" a border-radius on a rect but instead you control it via the node tool and then selecting a round node rather than a square one... See this answer for more details. Looking at the generated SVG I should have been able to add a ry attribute though:

<rect
   width="250"
   height="250"
   fill="#1565cf"
   id="rect861"
   x="25"
   y="-75"
   ry="45.602539" />

Happy hacking!