There’s not a lot you can do with 16×16 pixels. Yet we need those pixels to differentiate our web pages from other sites in lists and tabs in our web browser. I have been fighting feverishly with my favicon for over a year. Who’d have thought so much blood and sweat would go into such a small thing?

It should have been easy, yet I went through so many iterations. The more I tried to capture the essence of my brand in a tiny square, the more frustrated I became. The task is deceptively horrid, a honey trap for cocky designers. Just when you think it’s all good, you see it in a lineup of competing tabs then you wonder what the hell you were thinking?

kmdfavI thought my signature as initials would work. It looked like a half swatted fly had dragged its mangled legs in a circle.

favicon kmdI tried my initials in lowercase. Rather than the simple chic I was aiming for, I got something a Monty Python foot had stomped in the middle.

kmdfav2Uppercase in a different font then? Nope, too crowded and nothing like my page font.

KWhat about in a single letter, the start of my signature? I actually hand wrote it and digitised the thing. No, it looked untidy, or like some deformed star. A printed letter perhaps? Nope, too much like the Kobo favicon, I didn’t even save it.

new faviconThen I decided to get smart. The favicon was meant to sum up my brand. I decided to stamp browser tabs and favourite lists with a sizzling letter K, complete with the four chunky corners of a branding iron. I liked it for a bit. I even noted it on my website updates and changed it on my WordPress page. But it lasted a week. It didn’t fit with the minimalist clean lines of my site. I wasn’t really being smart at all.

k newI debated round versus square. The letter K is angular, so perhaps a circle would make it stand out in contrast?  K is also heavily weighted on the left side, so the right side looked bare. I added a couple of random dots. It looked alright, but it wasn’t me and the dots were too small.

beppo and beppoWhy couldn’t I have a name starting with a well-balanced letter, like Carlotta, or Hortense, or Octavia? It was too late to blame my parents. Hell, they once told my Godmother I was going to be called Beppo because they hadn’t thought of a name for me yet. B could have worked, even if it was inspired by some odd German clown rather than the DC super monkey.

fav 2 and 3I realised I was being ridiculous. I slept on it and when I woke up this morning I decided to go back to the simplicity of my printed initials, but arrange them in a more icon-friendly way using the colours and font of my page. I played around with contrasting colours, light on dark and dark on light. Some looked good in the design software when viewed at 500×500 pixels but once scaled and on a tab or list, they bled together and looked like something sneezed out onto a tissue.

I noticed in my icon research most websites use a single letter or stylised image for their favicon. Think of Facebook, Amazon, WordPress, Google, Pinterest, Goodreads, Vimeo, Canva, Yahoo, and yes, my arch nemesis, Kobo for the letters. Think Twitter, YouTube, Vellum, Mailchimp, and Hotmail for the logos.

1and1bbc favsI partly worried using more than two letters would tend to look crowded and unprofessional. My website host (1&1), and the BBC suffer from this problem, in my opinion.

k new 4b

However, I bit the bullet and simplified my sneezy design further by killing the background colour. I was happy. I believe I have arranged my initials in such a manner they are more of a logo than read as a set of letters. I’ve varied the colour, the size, and melded the m and the d together down the opposite side to the k, so the left and right edges essentially mirror each other with a vertical line.

After all my trials and tribulations, it was the most basic of designs that worked for me. Time will tell whether I stay happy with it, although I had best be certain relatively soon as I am running out of time to play with my brand and platform before I start launching products. At the moment, I don’t plan on changing a thing.

Have you had problems with your favicon? Did you design it yourself or did you get outside help? Let us know in the comments.


 

Visit my website at www.katiamdavis.com.

Click here to join my mailing list now for updates and bonus material.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s