How to Make a Logo For Your Website

One of the quickest and easiest ways to make your website stand out from the crowd is to get yourself a logo. So many websites just have their name in plain text. Yawn.

But logos are expensive aren't they? I can't afford it. 🙁

Dry your eyes my friend, because you can make a custom logo for your website in about 10 minutes – even if your design skills damage the eyeballs of anyone unfortunate enough to see them. I promise.

At the end of the day, the visitors to your website won't be critiquing your logo (unless they are pretentious design snobs) so it doesn't need to look awesome.

Although I did the Site Beginner logo in 5 minutes and I think it looks pretty awesome. Don't you?

Follow my lead and I'll show you how to make a logo just as easily.

What you need to make a logo

Oh by the way, throughout this tutorial you might need a couple of things to follow along when actually creating your logo.

• An image editor.

  There are plenty of free image editors to choose from. Gimp and Paint.net are both good choices. I use Photoshop because a) I like to pretend I'm a professional and b) I just find it easier to use. It IS quite expensive though so might not be the best choice if you're just starting out. Unless you're rich like Oprah.

• Some decent fonts.

  A logo without beautiful typography is like a Ferrari covered in rust. Nobody can see its beauty. Make sure you've got some gorgeous fonts to get your logo started. Smashing Magazine have a huge collection of free fonts that look amazing and will get you started.

Make a logo for your site in 10 minutes

I like to keep things simple. Which is why my logos always follow a similar format that takes me just minutes to replicate on any new site I launch. Here's my winning formula for a simple logo that looks awesome.

1. An image or symbol to represent the site.
2. The site name. (And sometimes a witty little slogan or tagline.)

Groundbreaking stuff, I know.

The logo size is entirely up to you. I've experimented with bold, full width logos that take up half of the page and also gone the opposite way and tried a 50px x 50px symbol only.

Nowadays I go with something around 200-250px wide and 60-100px tall. I just think it fits the page better and gives me more space at the top for content that, you know, my readers will actually enjoy.

Once you've got your size to fit your web page and you're ready to design, you can follow my formula for logo making success. Hopefully the outcome will rock your socks off.

1. Get your image.

   Some folks might recommend you to use a photo as your image. Or draw it yourself using an image editor. They might even say to use a bit of clip art.

   They're wrong.

   Here's my little secret to getting a killer image for your logo: Use vector art.

   Vector art is so easy to find and download. And it looks awesome too. Just copy it into your image editor and you've got your gorgeous symbol ready to rock.

   I use VectorStock because it's dirt cheap and you can search for all sorts of stuff and find it. Best kept secret in the logo making business. Until now.

   So let's say, for example, your site were on green tea and the amazing health benefits it bestows upon you. Here are just a few great vector images I found in a couple of minutes that would be perfect for the logo on a green tea site.

   

   Note: if you want to use vector art then you'll need a different type of editor. Adobe Illustrator is the paid version that I use, but if you're on a budget you can use a free alternative like Inkscape.

2. Add your site name.

   Once you've got your image and positioned it where you'd like it inside your image editor, start testing those awesome fonts you found to see which looks best to you. The gorgeous font I use on Site Beginner? That's Adelle. She's so dreamy.

   Experiment with the size, bold, italic and character spacing until you've got something you're happy with. You can also try to match the colours of the image with the text. If you're feeling fancy.

   Depending on the size of your logo you can also add in your slogan in a slightly different color and/or size to really make the design pop.

   Here's an example of what the green tea example might look like:

   

What? Were you expecting more steps?

Sorry to disappoint, amigo, but this is the best way to make a logo for your website. Now you have more time to spend on the content, generating traffic, and making money. You're welcome.

Making plain text logos using web fonts

Standard plain text logos are awful. They just don't have any personality and they don't stand out. Which is fine if you're a teen blogger talking about how you knew that boy was trouble when he walked in. Not so much if you want an awesome website that sells products or has loyal followers.

If you're against using an image to make your logo then the other option is to use a web font instead.

A web font basically lets you use a font on your site that isn't usually available to choose from. It means you can experiment and use some pretty cool fonts to bring your boring little site to life. This method is totally free and really easy to set up. Here's the 5 minute step-by-step:

1. Head over to Google Fonts and choose a pretty font for your logo.
2. Add the font (or fonts) to your collection and click Done when you're finished.
3. Copy the code Google gives you right after the <head> in your web page. For example:

   <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
   

4. Apply the font to your logo using CSS. So, for example:

   font-family: 'Oswald', sans-serif;
   

5. Revel in your gorgeous new plain text logo.

If you want to get a little more fancy with web fonts you can use an icon font like FontAwesome to add a symbol to your text logo without using any images.

Buying a cheap logo

Don't feel like making your own logo? No problemo.

If you have a little bit of cash available you can buy some really high quality logos at an affordable rate. The premium logo world is competitive, so prices are dirt cheap as they brawl to get your business. Lucky you, eh?

Here are some of the best places to buy a logo online if you really don't want to get your hands dirty.

• Logo Nerds.

  For the princely sum of just $27 you can get a custom logo for your site. Pretty awesome, in my opinion. Some of the examples they have are really high quality and I think this price is an absolute steal.

  They also do Twitter backgrounds and Facebook graphics as well. Which is nice.

• Logo Design Pros.

  These guys are a bit pricier that Logo Nerds. But their portfolio has some really solid designs and at the (currently) $95 price point, I still think it's amazing value for money. If you want a slightly higher quality logo then this might be a good choice.

• 99Designs.

  This is the cream of the crop. If you have a logo made from 99Designs you are guaranteed to be as happy as a puppy with two tails. The downside? It'll cost you between $299 to $799 for a logo.

  The quality far exceeds the other two logo design companies though. No disrespect to those chaps, but 99Designs gives you access to a huge pool of awesome designers and you will get an amazing logo. Definitely.

Or, if you want to be a maverick, you can head back to the top of this article and make a logo like I do. Quick, cheap, and good enough.