---
title: SVG favicon
date: 2020-12-29
updated_at: 2021-01-12
layout: post
lang: en
ref: svg-favicon
---
I've wanted to change this website's favicon from a plain `.ico` file to a
proper SVG. The problem I was trying to solve was to reuse the same image on
other places, such as avatars.
Generating a PNG from the existing 16x16 icon was possible but bad: the final
image was blurry. Converting the `.ico` to an SVG was possible, but sub-optimal:
tools try to guess some vector paths, and the final SVG didn't match the
original.
Instead I used a tool to draw the "vector pixels" as black squares, and after
getting the final result I manually cleaned-up the generated XML:
```xml
```
The good thing about this new favicon
(at [`/static/lord-favicon.svg`](/static/lord-favicon.svg)) is that
a) it is simple enough that I feel
comfortable editing it manually and b) it is an SVG, which means I can generate
any desired size.
With the new favicon file, I now had to add to the templates' `` a
`` to this icon:
```html
...
```
Still missing is a bitmap image for places that can't handle vector images. I
used Jekyll generator to create an PNG from the existing SVG:
```ruby
module Jekyll
class FaviconGenerator < Generator
safe true
priority :high
SIZE = 420
def generate(site)
svg = 'static/favicon.svg'
png = 'static/favicon.png'
unless File.exist? png then
puts "Missing '#{png}', generating..."
puts `inkscape -o #{png} -w #{SIZE} -h #{SIZE} #{svg}`
end
end
end
end
```
I had to increase the priority of the generator so that it would run before
other places that would use a `{% link /static/lord-favicon.png %}`, otherwise
the file would be considered missing.