Eighth Notes and Vines : Creating a Website Logo and Icon

When I saw the “Website Logo” assignment I knew it was a challenge I wanted to take on! This year I have been working hard on establishing a professional  online identity. I have been updating and editing my main domain. I have added menus to all my subdomains and updated themes. One thing I haven’t done that has interested me was create a site logo and a site icon. 

I think these would be a great addition to my online presence so I wanted to include them.

My Logo

my madeline logo

My icon

my webiste icon “mck”

My site icon can be viewed in the browser tab of this site!

Sketches/ Inspiration

First, I sketched out my ideas on my mini whiteboard.

first sketch of logo


I knew I wanted to have a simple font because I like minimalist designs. I also wanted the dot above the i in my name to be an eighth note because I love music. I play the ukulele and the piano and I also love to sing!

Then, I wanted to add something that shows that I also like nature. I have really gotten into plants/ nature hikes during quarantine so I drew vines around my name. I like vines also because I decorated my room with fake vines and it also relates to the Madeline story (see my Madeline story analysis) “In an old house in Paris that was covered in vines”.

The Process(Logo)

I created my logo using Canva. I had never used this website before so I had to play around with it before creating my logo. It was a really easy platform to use and I really liked it. To create my logo I first checked with my domain specifically, the “customize appearance” feature. I went to the logo feature and saw that the dimensions for my  logo needed to be 200×94 pixels. So in Canva I customize the blank template to be 200×94 pixels. 

Then I added the background color ( I chose a blue/teal to match my domain). I wanted the design of my domain and my logo to be unified. I like the blue/grey/black color pallet. The contrast of the two colors (black/blue) also catches the eyes of the viewers.

I used the “love, peace, and joy” font to write my name in lowercase. Then I searched the stickers for music notes, and changed the color of the music note to black and moved it so it was above the i.

creating the logo with just the music note

Next, I looked for vine stickers that best matched my sketches. The one I found I copied over so that the design was symmetrical and it framed my name. One thing I wasn’t able to do was change the color of the vines. I wanted them to be black, but they only came in green. Eventually I really liked the green because I think it gives it more of a nature feel. The color pallet matches nature (blue sky/ green nature) which I like.

vine sticker options in canva

The Process (Icon)

Originally I wanted to make my icon my initials MK. But realized my design would look too much like the Michael Kors logo . I don’t want to get sued (is that something they could do for my blog?) and wouldn’t want people coming to my blog site expecting to buy designer handbags so, I did lower case all of my initials mck!

The process of making my website icon was the same as the logo. I used Canav. I also used the same font and vine sticker. I wanted to make both designs cohesive and recognizable. I used a white background for the icon because I wanted to create a greater contrast so it is easier to see when in a small tab.

Overall I am very happy with how both designs turned out! I like how they compliment my blog without distracting. They also tell my story because I added design elements that showcase parts of my personality.

You can view the design on my homepage.

5 thoughts on “Eighth Notes and Vines : Creating a Website Logo and Icon”

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php