From b3eaeef899ff68b9f0eb9d3902de24f7e9aec1ca Mon Sep 17 00:00:00 2001 From: EuAndreh Date: Tue, 29 Dec 2020 16:27:01 -0300 Subject: Add TIL on SVG favicon --- _tils/2020-12-29-svg-favicon.md | 124 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 _tils/2020-12-29-svg-favicon.md (limited to '_tils') diff --git a/_tils/2020-12-29-svg-favicon.md b/_tils/2020-12-29-svg-favicon.md new file mode 100644 index 0000000..42d17fa --- /dev/null +++ b/_tils/2020-12-29-svg-favicon.md @@ -0,0 +1,124 @@ +--- +title: SVG favicon +date: 2020-12-29 +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 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/favicon.png %}`, otherwise the +file would be considered missing. -- cgit v1.2.3