From 020c1e77489b772f854bb3288b9c8d2818a6bf9d Mon Sep 17 00:00:00 2001 From: EuAndreh Date: Fri, 18 Apr 2025 02:17:12 -0300 Subject: git mv src/content/* src/content/en/ --- src/content/en/tils/2020/12/29/svg.adoc | 125 ++++++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 src/content/en/tils/2020/12/29/svg.adoc (limited to 'src/content/en/tils/2020/12/29') diff --git a/src/content/en/tils/2020/12/29/svg.adoc b/src/content/en/tils/2020/12/29/svg.adoc new file mode 100644 index 0000000..0e5dec3 --- /dev/null +++ b/src/content/en/tils/2020/12/29/svg.adoc @@ -0,0 +1,125 @@ += SVG favicon +:updatedat: 2021-01-12 + +:favicon: link:../../../../img/favicon.svg + +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: + +[source,xml] +---- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +---- + +The good thing about this new favicon (at {favicon}[`/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: + +[source,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: + +[source,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. -- cgit v1.2.3