I knew I wanted to add a Favicon to my website as the grey and white ‘T’ icon at the top of the tab just stood out in the wrong ways and made my site look unfinished. I knew I wanted something plain and simple as the favicon would be so small anyway, so quickly drew up some ideas that I felt could work:

favicon 102.png

I decided to go for the version with the stretched letter ‘l’ and the gradient in the letters so hopped onto Figma to see how I could make it work. I started off by writing the text I wanted on a plain square (shade #252422):

Untitled

Then, to elongate the L I decided to flatten the text so it would be easier manipulated as vectors rather than text:

Screenshot 2022-01-04 at 22.27.48.png

After this was done, I was able to manipulate the L so it reached the top of the square:

Screenshot 2022-01-04 at 22.28.54.png

From here, I just added a gradient starting with shade #FAA307 (the accent shade used in my website) and this was the finished product:

Untitled

I then changed the colour of this favicon (and changed IXD102 to IXD101) for my Baskerville and Street of Crocodiles sites: