On a blog’s visual identity

In the past couple of months, I’ve been overthinking and asking myself a lot of questions regarding blog identities, and more specifically visual identities.

When I visit the websites of Nick Heer, Robin Rendle, Carl Barenbrug, or Maggie Appleton, for instance, I experience a strong visual identity: I don’t need to read a single word, know the URL or the name of the site to know the one I am viewing. Same when I see the entries from Michael Tsai, Kev Quirk, or Quanta Magazine in my newsreader: they stand out in the feed and I know from which blog or website it’s from, as I recognise their icon.

I feel like my blog currently lacks this kind of visual identity. Its current icon — or rather its lack of an icon — feels a little like other feeds I am subscribed to, coming from Mastodon or Medium which all share the same favicon: generic, anonymous, and doesn’t stand out visually from the others.

Like I wrote in a previous post, There is no place like home: Why I love my blog, I know what makes my blog mine, what its identity is: bare-bones design, minimal style, tiny footprint, etc. But for the casual reader, for someone stumbling upon one of my posts, it can definitely feel a bit plain, boring, forgettable.

I don’t mind having a plain and boring blog design — it’s part of its identity after all — but I still would like for this casual reader to remember my website, so that the next time they visit, there is a small voice in their head saying “oh I’ve been here before.” Even if I lived in a beautiful and minimal flat, with almost no furniture and barely any colour, I’d still like friends and family visiting to know that it’s my home, and I’d add at least a few frames on the wall to make the place look like mine. It’s basically the same feeling I have with this blog. The name of a blog — and its content — should be enough to be recognisable, of course, but I believe that a visual cue is just as important as a name. Some people are good with names; some are good with faces.

That’s why I recently spent a lot of time wondering about how to improve my blog’s “face.” Right now the favicon I use consists of the main highlight colour, in a tiny 54 bytes 1x1 pixel WebP file — which I’m told is very close to the smallest size possible for an image file — and I don’t use an open graph image, nor an Apple icon thing. Not yet anyway. In your browser, the favicon should appear as a simple yellow-orange square, as browsers will scale up the dimensions of the picture: not an issue when the image is a single colour.

Feedbin blows up the favicon like browsers do, and Safari finds the main colour of a website and colourises the icon for Favourites, on top of the first letter of the site’s title. So what’s the issue, you ask? Well, NetNewsWire however — my RSS reader of choice both on Mac and iPhone — displays only a pixel in the centre of a grey square, which makes the visual identity of my feed pretty bland and forgettable.

**Getting on high horse**

Many would think that the Jolly Teapot calls for having a teapot logo, but they would be wrong. I don’t want another layer on top of this random name. In that regard, I relate to the German publisher Der Spiegel, which means “mirror” in German. Nowhere on their brand identity will you find a mirror. It’s a metaphorical mirror, you see, just like my jolly teapot.

**Coming down off high horse**

So here I am, trying out different looks and designs for a suitable icon, and maybe other changes to the website’s design. Should the icon be a letter, a sign, a shape? Should this icon appear somewhere on the blog? I don’t know.

I’m definitely thinking too hard about this, but that is precisely what may be part of this blog’s identity: a lot of steam coming out of the teapot. Let me know what you think, and of course any suggestion is welcome.

UPDATE: Currently trying a big #d92 yellow “T”, still only 54 bytes somehow. Not sure I like it, but I didn’t like the previous yellow square either. For sites without a favicon, I’d prefer if browsers would just not display anything instead of an ugly empty grey square with the first letter of the website’s title.