Having a logo for your website is critical for your brand. It helps your readers identify with your brand and recognize who you are. Your logo also carries your overall message to your readers. It is one the first things you’re going to want to nail down when starting your online business.

Logos don’t have to be complicated graphics, they can be very simple, using letters and/or geometric shapes. Amazon and eBay are good examples. In this article, we will discuss not only how to make a logo for your website, but the process of choosing a logo and how to incorporate them into your website.

Things To Consider

Before choosing a logo design it is important that you consider your audience and the overall message you are trying to get across to your users. A logo should be simple, easy to remember, and versatile. I other words, it should be recognizable wherever you might place it, whether it be a website headline or on a simple piece of paper.

Your logo doesn’t have to necessarily represent your business exactly, but it should be something that is appealing to your readers. Once you have a logo in mind, do a quick sketch and ask around for some input. You may get some very valuable feedback that can affect your overall logo design.

What Type Of Logo Should You Choose

Logo designs are like fashion. What’s cool this year, may not be next year. But there are some basic rules you should ways keep in mind.

Your Logo Should Be:

• Simple: Meaning that while it should contain unique elements, it should remain easy to recognize, without too much complex artwork.
• Versatile: A logo should look good no matter what you view it on, even a mobile phone.
• Relevant: You want your logo to be relevant to your brand. In other words, there should be some connection between it and your brand.
• Unique: Obviously, you want your logo to stand out, above others in your market.

Keeping these basic rules in mind, you can use various types of typography. Take Google, for example, their logo is friendly, playful and meaningful. Letters can be arranged in different ways, colors, and fonts, that create a unique, and visually appealing effect.

Here is an example that uses different fonts and colors.

Using geometric shapes is another common way of designing a logo. Different shapes can be arranged and colored to represent your brand.

And another example that uses some geometric shapes.

So you see there are many ways you can design your logo using simple shapes, letters, and colors to create something visually appealing, relevant, simple, and unique.

Creating a Logo With Canva

Canva is one of the more popular tools available when it comes to how to make a logo for your website. With Canva you can create many types of graphics, including logos. The free version allows you to create any type of graphic you want, using free content, elements, backgrounds, etc. You will encounter elements that are free and paid, but you can use any of the free ones, along with any graphic or picture you wish to upload yourself and use.

Here’s a quick example of something created in Canva using one simple element and text.

Canva will allow you to choose from many types of graphics files and backgrounds, and you can save your designs right on their website. When you’re finished, just choose the option to download your design and save straight to your computer.

Of course, many people like to create their own logos with programs such as Photoshop, GIMP, or Adobe, which is fine as long as you can make sure your image is scalable and mobile-friendly.

Making Your Logo Mobile Friendly

There are a few considerations when it comes to making your logo mobile friendly.

Simple and Versatile (Scalability)

You want your logo to look good on both a desktop and a mobile device. Creating a logo with small elements may cause a lot of the details to get lost when it scales down to a mobile device.

On the reverse side, making it small for a mobile device may cause it to look very pixelated on much larger computer screens. So you need to find a happy medium where it looks good and scales nicely for both large and small devices.

File Size

The second thing you need to be aware of is the file size of your logo. The larger the file size the slower your website pages will load. And you have to remember that typically your logo is on the header of every page on your site, so it’s going to affect the load time on any page that your reader lands on.

With WordPress, you will typically have an image optimizer installed such as EWWW Image Optimizer. These plugins will reduce your file size. A good rule of thumb is to try to get your images, including your logo, to something at or below 30k unless it’s a full-page image, which is not recommended unless you have a specific reason for having an image that large.

Compressing Your Logo

Since most tools, including Canva, Windows Paint, GIMP, Photoshop, and most others produce JPEG or PNG images (the most common types of graphics files) the images can become quite large in some cases. These types of files are what we call Raster Images which are pixel-based. This is why you get a pixelated effect whenever you zoom in on a picture or other type of image like you see below. So the greater the number of pixels you have the higher quality the image and the larger it becomes.

High quality is good, but when it comes to website load time, it is bad. If your website loads slowly because of large images, you may be penalized by Google and your page rank may suffer.

If your logo ends up being large, say over 100kb, try to compress or resize it using a free tool such as TinyPNG before you upload to your website. This is good practice for any image that you upload as it ensures your image file size is as small as possible. Just make sure that you haven’t lost any critical details since compressing reduces the number of colors used and/or resizes your image to a smaller version, which will result in loss of detail.

The Best Of Both Worlds

Can you create a logo that encompasses the best of both worlds? Meaning it will scale to any size without losing quality, and still remain small in file size. Yes, you can.

Come to the rescue SVG (Scalable Vector Graphics) format. So what the heck is this you ask? I thought this was supposed to be easy? SVG differs from JPEG and PNG in that it’s a vector image that is created using points, lines, and shapes instead of a bunch of pixels. This affords them small file size and the ability to scale to any size without losing the quality of the image.

SVG is actually pretty ideal for logo’s since most logo’s don’t use pixel-based images like pictures, scanned images, etc. And the great thing is that you can use a nifty free piece of software called Inkscape. Inkscape will allow you to use many of the features you find in many graphics editing programs. It is available for Linux, Windows, and MacOS.

SVG format also allows you to save Meta information which you will find under your document properties. This means you can enter your site title, description, keywords, etc.

Using Inkscape you can create an SVG version of your logo which will scale to any device without losing quality, and impacting your website load time. Inkscape is very versatile and there is no end to what you can do with it, just don’t get too carried away with the fancy features. There are many videos on YouTube on how to use Inkscape as well.

A Little Secret You Should Know

If you really want to make your logo and header on your website scale nicely without things moving around on smaller mobile devices, I’ll let you in on a little secret. Use Inkscape to create an SVG not just for your logo, but also incorporate your Website Title and Tagline in the way you want your header to be displayed. WordPress will allow you to hide your site title and tagline from view, but still, include it in the metadata of your site. You’ll find this option under Appearance – Customize – Site Identity, right above where you set your logo.

Note: This can also be accomplished on any other type of website by different means which I won’t go into here.

Doing this will allow your entire heading to scale nicely to any device without having your title or tagline wrap to the next line.

What To Do If You Need Help

OK, so some of us just aren’t that savvy with programs like Inkscape, Canva, Photoshop, etc. What can you do to get your logo built for you rather easily and cheaply?

My recommendation is that you draw up your logo on paper. Be as detailed as possible, include your site title and tagline as I described above. Then scan your creation and save it on your computer.

Go to Fiverr.com, and search for “logo design”. You can find someone for as little $25 that will do a professional logo for you. You’ll want to specify that you want it in SVG format and upload your scanned sample for them use.

Also, include the following Metadata for your image:

• Title: Usually your site name
• Date: Date created
• Creator: Can be your business name, your own name, or website domain
• Publisher: Usually the same as the creator
• Rights: Your copyright info
• Keywords: Primary keywords associated with your site
• Description: What your website is about

That should just about do it. Once you get the final design back, pop it up on your website (remember to hide your site title and tagline since it should be part of your logo now) and make sure it looks like you want it. If it’s not what you want, have them update the image until it’s just like you want it. Remember, it’s your brand!

In Conclusion

We have seen that there is a lot that are some important factors to consider when learning how to make a logo for your website. Take your time, making sure to consider your audience, your brand, and that you are delivering the right message.

There many options available for creating logos, such as Canva, Photoshop, Adobe, and Inkscape, and we’ve discussed the advantages disadvantages of the different formats of the graphics file that makes up your logo. The best option for a logo tends to be an SVG type file because of its small file size and Scalability.

Lastly, you always have the option of having a professional do a logo for you at a fairly inexpensive rate.

Wishing you much success,

Michael

PS. Please leave a comment below if you have any questions and I’ll be happy to get back to you.