Because I’m not a real developer, I never think about testing this site on browsers or operating systems that I don’t use. This means whenever I see something on a different setup, and it looks a little different, it’s jarring.
The other day, I was trying to articulate my thoughts on configuration management. I realized the most expedient thing was to send a link to Configuration Management: Part 2 — A Path Forward. But it’s COVID-times so we were on Zoom and sharing screens, and when I saw my site on their computer I realized I hated my (now old) favicon.
I made this image when I first started the site. I wanted something distinctive that I hadn’t seen associated with another site or company, but I also wanted it to be part of the 8-bit Unicode Transformation Format (UTF-8) so I could use it in text-only contexts (like Daring Fireball does with the ★).
After perusing the UTF-8 tables, I settled on U+203B (a.k.a. “Reference Mark“, a.k.a. ※). After a bit of research, I realized it was perfect. It’s mostly used in Asia, including Japan, which I liked given my (half) Japanese heritage. I also liked that its historical use was to call attention to important footnotes, which was exactly one of the use cases I had in mind.1 For a while, I thought about how to retcon my way into some symbolism for the crosses and dots, but I couldn’t come up with anything—and I realized it was silly quest in the first place. Most importantly, I also just like how it looked.
For straight-text applications, I obviously have no call over how the mark rendered, and frankly that’s part of the charm. But I also needed an image-format version to use as a favicon, Safari pinned-tab icon, etc. I also wanted it to look good at arbitrary resolutions, which meant the canonical image format needed to be a scalable vector graphic (SVG), not a raster. So I decided to draw it myself. The original code:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="94" height="94">
<path fill="none" stroke="black" stroke-width="7.3" d="M8.0 8.0 L86.0,86.0 M8.0,86.0 L84.0,8.0"/>
<circle id="c" cx="47" cy="9.0" r="9.0"/>
<use xlink:href="#c" x="38.0" y="38.0"/>
<use xlink:href="#c" x="-38.0" y="38.0"/>
<use xlink:href="#c" y="76.0"/>
</svg>
One thing that always bothered me about this version were the crossbar’s squared-off corners. I let it go because that implementation was common to the Unicode typefaces I’d seen.
What pushed me over the edge into making an update now was realizing that my original implementation had no border: the dots went right up to the edge of the image because the circle center locations were 9 units from the edge and had a 9-unit radius. I hadn’t noticed because Safari’s pinned tab implementation appeared to insert a bit of whitespace around my icon, while the other person’s browser (Chrome) did not. (Sadly, I don’t have an picture, as it would have been inappropriate to screen cap the Zoom, and I can’t recreate it because I just removed Chrome.)
So now I’m down the rabbit hole of researching various specifications to see how I can modify my image. I didn’t keep good-enough notes to reconstruct all the changes in the order I figured them out (and that would take this post to a entirely new level of tedium), so in no particular order:
- Replace the
<path>element with two<line>elements. It was easier to understand than the obscure path notion. - Add the
stroke-linecap="round"attribute, to give the crossbars nice rounded ends. - Change all dimensions to relative (%) values.
- Add the
viewBox="0 0 16 16"attribute to the<svg>element per Apple’s documentation. This fixed a temporary problem when the image was rendering in the top-level corner of the pinned-tab box.
The new code:
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<line x1="13%" x2="87%" y1="13%" y2="87%" stroke-linecap="round" stroke="black" stroke-width="7%"/>
<line x1="13%" x2="87%" y1="87%" y2="13%" stroke-linecap="round" stroke="black" stroke-width="7%"/>
<circle id="c" cx="50%" cy="12%" r="9%"/>
<use xlink:href="#c" x="38%" y="38%"/>
<use xlink:href="#c" x="-38%" y="38%"/>
<use xlink:href="#c" y="76%"/>
</svg>
| Old | New |
|---|---|
|
 |
I like the result much better.
-
Meta. ↩