Generating Favicons from Unicode Glyphs

Today I learned I can easily create favicons on the command line.

But, alas, the Internet giveth and the Internet taketh away. I can’t find the page, where I first found out about `convert`, probably some Stack Exchange site. So, I’m sorry, no attribution.

For the following examples I’ll be using the “Black Star” Unicode glyph (`U+2605`): ★

Convert

`convert` is a command line utility belonging to ImageMagick.

ImageMagick

Here’s how to invoke it to generate a favicon with a centered glyph:

convert \
  -font <path_to_font> \
  -background <color> \
  -fill <color> \
  -gravity center \
  -pointsize <size> \
  -size <...x...> \
  label:'<glyph>' \
  icon.webp

The `pointsize` depends on the font being used. Sometimes the same glyphs are smaller or bigger for the same font size. Here is a working example on macOS Ventura:

convert \
  -font /System/Library/Fonts/STHeiti\ Medium.ttc \
  -background gold \
  -fill black \
  -gravity center \
  -pointsize 160 \
  -size 180x180 \
  label:'★' \
  icon.webp

Icon Centered Heiti

Unfortunately, some glyphs are not in the middle of the ”virtual line” and the centering with `-gravity center` only centers horizontally correctly (notice the different font and point size):

convert \
  -font /System/Library/Fonts/Apple\ Symbols.ttf \
  -background gold \
  -fill black \
  -gravity center \
  -pointsize 256 \
  -size 180x180 \
  label:'★' \
  icon.webp

Icon Off-Center Apple Symbols

There seem to be plenty of ways to move the star a little bit down. All have their caveats, because `convert` is a beast and quite complicated. So I tricked a little.

I moved a newly introduced annotation with the glyph I want to have in the favicon a little bit down, and used the Unicode glyph “No-break Space” (`U+00A0`) as the label, which I have to keep using:¹

convert \
  -font /System/Library/Fonts/Apple\ Symbols.ttf \
  -background gold \
  -fill black \
  -gravity center \
  -pointsize 256 \
  -size 180x180 \
  -annotate +0+16 '★' \
  label:' ' \
  icon.webp

Icon Centered Apple Symbols

This shows that, depending on the fonts, it’s a semi-automatic process and I have to check the result manually. But this is much better than creating a simple web page with CSS to display glyphs on colored backgrounds, in order to screenshot and crop to size.

Unfortunately, emoji instead of glyphs don’t work.

¹ I created the “No-break Space” with `option + space`. Copying and pasting this HTML won’t work. You have to create the space glyph yourself.

-- Response ended

-- Page fetched on Tue May 21 14:50:37 2024