Logo & Favicon Positioning in WordPress

Great times we live in — the all important logo, which atomises what your brand stands for, is no longer something you have to pay for. Now, with some guidance like What You Need to Know About Logos in 2020, you can create a professional-looking logo for free with just a few simple clicks.

The next step is to add your stylish new logo creation to your website. And like most people, the stats show you’re probably using WordPress. Then there’s also adding favicons, which are great for brand recognition too.

These are the common confusions we’ll straighten out in this guide:

1. How to add a website logo in Wordpress isn’t set in stone, because the steps depend on the theme you’ve chosen.
2. You can place a logo precisely anywhere on your site, if you know coding or get a developer to do it for you. But there’s a proven place where it works best. And there’s other key areas you’ll want to place it to make the most of your logo.
3. People often confuse logos with favicons (i.e. fave-icon). What’s the difference?

Add or Change Logo: WordPress Options

So, you’ve created a great looking custom logo which tells the world at a single glance that your company is something to watch out for. These are the steps you’ll take to add it to your WordPress site, depending on the design theme you’ve chosen:

Free Theme Steps

Most free themes have this layout, but for others you’ll need to dig around a little in the general area to find the image upload functionality.

1. Login to your WordPress Dashboard. To the left you’ll see the Appearance tab. Click on Header.
2. Find the option that allows Image Upload. Some themes will have suggestions for WordPress logo size, but you’ll usually be fine to simply upload.
3. Click on Choose File to locate the logo on your computer. Double click to add it.
4. Click Preview to see what your logo image will look like when it’s live on your site.
5. Some themes place filler text in the logo area until you complete the upload. To get rid of this, uncheck the Show Header Text With Your Image box, then click Save Changes.

Premium Theme Steps

Developers of premium themes usually try to make as few clicks as possible for you to upload logos and other images. It’s the Upload tab that may take a little digging around. This is the most common method:

1. Login to your WordPress Dashboard. To the left you’ll see the Theme Options tab, or something with a similar title.
2. The General section is the most likely place you’ll find the Upload button, often in a vertically stacked list of options.
3. Once you’ve clicked Upload, click Choose File to locate the logo on your computer. Double click to add it.
4. Click Preview to view what your logo image will look like when it’s live on your site.

Logo Positioning Tips

You may be thinking that you want to do things differently with your website layout to stand out more. But when it comes to ease of use for your customers, this isn’t always the wisest approach. Some things become standard practice because they simply work best. Logo placement is one of them.

Research has shown that positioning a logo in the left top corner of your website is optimal. It helps make navigation (getting around the site) easier because people are used to clicking top left when they want to go back to the Home Page. The study also found that 89% of people are more likely to remember your brand logo if it’s placed top-left compared to top-right.

That’s not to say you can’t be more original and place your logo top-centre. That could work too, providing it’s complimented by a balanced and stripped down menu so it looks clean. But if you have a busy menu or are in doubt about a centred logo fitting your site design, rather go with the proven top-left placement.

Two extra useful tips related to logo positioning are:

• Reinforce your logo by adding the same color themes throughout your website, such as call to action buttons and headlines.
• Don’t forget to add your logo throughout your customer experience: footer, emails, social media, product images, forums, guest blogs, and touchable branding like business cards and stationary.

What’s What with Favicons?

As the name suggests, these are the small icons representing websites that you see in your browser tabs and Bookmarks. The main difference between favicons and logos is technical — pixel size and file type.

The tricky thing about Favicons is that the ideal pixel size varies depending on the platform, and there are also varying opinions on the subject. But most experts agree that the standard pixel size is 16x16, and you’ll also need 128x128 for the Google Chrome Store and other platforms where a larger icon is called for.

Then there’s file type, or format. The most important one is PNG format, which lets you store your favicon as a very small file for fast loading times, and is super easy to export to different platforms. ICO is the only format supported by Internet Explorer, but to bypass this for Apple platforms, developers tend to save the icon as a PNG file and rename it as an ICO. You can even create an ICO icon file from a normal JPG image.

If you have a fairly simple, steamline logo, you can use it as your favicon. To easily convert your logo into an icon or create a modified one, do a search for ‘app icon builder free’. Bear in mind that a favicon needs to be clearly distinguishable in small tabs, so the ideal is to strip down your logo to it’s most essential elements. Think of the Nike ‘swoosh’ symbol, or the Google ‘G’.

Add or Change Favicon: WordPress

As with WordPress logo size considerations, you may need to crop your icon, so bear this in mind during the design. Follow these steps to complete the upload:

1. Login to your WordPress Dashboard. To the left you’ll see the Appearance tab. Click on Appearance > Customize > Site Identity tab.
2. Click on Choose File to locate the favicon on your computer. Double click to add it.
3. If the icon upload exceeds the recommended size, WordPress will allow you to crop it. If it’s the right size, click Save.
4. Click Preview to see what your favicon looks like when it’s live on your site.
5. If you’re happy, go ahead and publish.

Takeaway

Even though things may be a little different depending on the template you’re using, the steps we’ve outlined let you change a logo in WordPress with just a few clicks.

Bear in mind that placing your logo in the top-left of your site may seem unoriginal, but research has proven that it’s best for usability. Also don’t forget to make the most of your logo by adding it throughout your customer touchpoints.

Favicons are used in browser tabs and bookmarks. They need to be simple so they’re distinguishable at small sizes, or the whole point of creating brand identity gets lost. Other than that, the main difference between a logo and favicon is technical considerations. Create or improve your logo first, then strip it down to the essential elements.

From there you can easily convert it to the correct icon format. The process for adding or changing a favicon to your WordPress Dashboard is similar to the logo — follow the simple steps we outlined.