New Year, New Logo

⬡ #blogging, #webdev, #SVG

I've wanted a more recognizable online "brand" for years. I took a stab at creating something myself a few times, but was never satisfied with what I came up with so I finally asked a friend to design a logo for me. The process was delightful and I'm very happy with the results.

My Brand So Far

For the last several years I've used a photograph that I took of the Lion of Mari at the Louvre as my avatar in digital spaces. It has a goofy look about it, its mouth agape as if to suggest mock astonishment. I'm not a dreadfully serious person, so I felt it fit my personality.

A head-on picture of the Lion of Mari, a copper statue of a lion from Syrian antiquity. It is green with wide, white eyes and small pupils. The mouth hangs open in a goofy manner.

This was suitable for many things, but didn't work well in a professional context. It also got me a lot of questions like "What's with the green dog?" that I got tired of answering. Solving the problem myself wasn't something I wanted to spend time on, so I reached out for help.

Working With A Designer

I worked with Nathan Hanna, who I'd gotten to know over the last year. On top of being a delightful human being, I was impressed by his other work in logo design. After we agreed on a fair price for his work, he asked a handful of guiding questions to get a feel for what I might like and got to work.

After some consideration my input parameters were:

Nathan started with pencil and paper drawings, iterated on several designs, and patiently helped me narrow dozens of options to something that felt just right.

A top-down view of someone holding a dot-grid notebook with pencil drawings of logos on the page. The logos are variations on the initials RTS. A top-down view of a plain notebook page adorned with dozens of logo variants made from the initials RTS. A pen and laptop are visible at the top of the frame.
The initials RTS in a graffiti style with a secondary color as a drop shadow.
The initials RTS in a graffiti style are centered in an oblong, lighter-colored hexagon.
The initials RTS form a maze-like hexagon which is at the center of a circular outline.

The Result

Nathan took my initial parameters and found a winning design. Ultimately we ditched the graffiti inspiration and landed on this logo where my intials formed the hexagon itself.

The initials RTS form the shape of a hexagon and also a cube within that hexagon. The R is the left face of the cube, the T the top face, and the S the right face.
The initials RTS form the shape of a hexagon and also a cube within that hexagon. The R is the left face of the cube, the T the top face, and the S the right face. The lettering is dark and surrounded by a light hexagonal outline.

Once I was sold, Nathan delivered a few variations and all of the digital assets including PNGs, SVGs, as well as the original Adobe Illustrator source files.

Adding It To the Blog

Since I redid the style of this blog in 2021 the favicon for this site has been a simple, flat hexagon. Honestly, I didn't love it, but it served its purpose as a placeholder.

A flat, purple hexagon.

The new logo might be a little crowded when shrunk down to the size of a favicon, but I'd rather be consistent so it's now the favicon. However, choosing only a light or dark variant of such a simple logo guarantees that it will be poorly visible in the browser tabs for certain viewers. Thankfully SVG allows for <style> elements.

I took inspiration (once again) from Andrew Kvalheim who alters the color of his favicon based on which color scheme the viewer prefers thanks to the prefers-color-scheme CSS media feature.

:root {
  --outer-fill: #1d2021;
  --inner-fill: #ebdbb2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --outer-fill: #ebdbb2;
    --inner-fill: #1d2021;
  }
}

.cls-1 { fill: var(--outer-fill) }
.cls-2 { fill: var(--inner-fill) }

This would have worked perfectly, but just yesterday I learned about the light-dark CSS color function. This became widely available just this year and makes it even easier to express light vs. dark color schemes.

:root {
  color-scheme: light dark;
}

.cls-1 { fill: light-dark(#1d2021, #ebdbb2) }
.cls-2 { fill: light-dark(#ebdbb2, #1d2021) }

The end result is a single SVG that displays in light or dark mode depending on the preference of the viewer.

The initials RTS form the shape of a hexagon and also a cube within that hexagon. The R is the left face of the cube, the T the top face, and the S the right face. The lettering is dark and surrounded by a light hexagonal outline.
The initials RTS form the shape of a hexagon and also a cube within that hexagon. The R is the left face of the cube, the T the top face, and the S the right face. The lettering is light and surrounded by a dark hexagonal outline which is, itself, bounded by a small light stroke.