Designing in public, iteration 4
My previous favicon was a poorly drawn letter H, in orange, with weird antialiasing. We can't have that. So a new icon it is. I still wanted an H. So I tried a bunch of things.
An H, an A, and a Y, stacked. Stacked vertically, stacked oddly against each other, stacked like jumbled puzzle pieces. All black and white. Then some color from the website (which is still only Prot's ef-dream palette). Then I looked at a lowercase H. I wanted it chunky. So I opted for Matthew Butterick's Concourse, and picked the heaviest weight.
Choices, choices
An H itself was uninspiring, and I wanted to add another element, and another color. After toying with building the H out of lines and “stacking” them (why do I do these things?), I thought about writing, and the unit of a sentence, and how that ends with a period (or full stop, as you prefer). So there was they were, a lowercase letter H and a full stop. Originally thinking I’d like green, I tried some combinations from the ef-dream palette and settled on the—for me unlikely—combination of yellow (gold, if you will) and pink. I thought it was weird. So I went with it.
It needed contrast, so I just threw a block behind it and used a dark gray. There is no meaning behind it other than creating a backdrop and some contrast. Making the block smaller than the glyphs left the composition a bit more visually compelling.
This is what I ended up with after the above considerations and arguably way too much time spent for what it is:
But I like it. It’s a chunky, funky little geometric composition. It might seem like I’m overthinking an icon, but I can assure you that I just eyeballed the placement and moved it around until it looked right to me, so not too much overthinking.
The light background isn’t great in dark mode, so where that’s supported I use a dark background, and for the actual favicon (that shows up in browser tabs), I got rid of the block behind the glyphs.
I made this in Inkscape (which I love) and exported and then optimized the files with optipng and svgo.
OpenGraph
This whole exercise was basically because when I write a new post, I don’t want that generic gray box in the preview. When I attack the corporates on LinkedIn with my infinite wisdom, I want to burn the icon into their brains. Something like this:
Needless to say, I had to add a bunch of lines to my base.el, my website’s base template. Here’s one line:
" <meta property=\"og:type\" content=\"" (if (haystack--post-p post-meta) "article" "website") "\">\n"
Since the templates are emacs lisp, I can write elisp code in them. In this case, the predicate haystack--post-p checks to see if the content is a post or a normal page. The escapes are a bit annoying, but the benefits outweigh those annoyances, since I don’t have to change the templates often.
Now, what?
So, nothing changed in the design of the website itself. But I’ll leave my decision to use Concourse as a clue for what’s coming next.