Ahmad Imran

A tech-blogger who likes to wear the common-user's hat. Founder of REASONTOUSE, a platform to empower the common technology-user to make better and informed decisions.

In this article, I am not going to tell you about the importance of a good quality logo in creating your brand and growing your blog. Many people have written and spoken about it already.

My aim is to take you to the back-end of WordPress and let you understand the settings and logo options in Avada theme.  In other words, how would you set up your site logo if you are using Avada or planning to buy this theme.

Avada is recently upgraded to version 4.0.2 and this article and included snapshots are taken from Avada 4.0.2 installed on my self-hosted WordPress script.

Avada is the best seller WordPress theme on Envato Themeforest (aff) with over 200,000 customers at the time of writing this article. Let us see what does it offer to showcase our site logo to our audience.

 

6 Header Styles to Fit Your Site

Header is the main part of your website/blog where your logo is displayed and expected to be found.

I have written about the “header design” in Avada theme previously.

The reason to include the following 6 available header styles below is that your site logo will fit in one of these header styles. Have a look below and where you see the Avada logo, this will be replaced with your site logo. You need to upload the logo file in your WordPress installation manually.

Header Type 1 - Avada Theme

 

Header Type 2 - Avada Theme

 

Header Type 3 - Avada Theme

 

Header Type 4 - Avada Theme

 

Header Type 5 - Avada Theme

 

Header Type 6 - Avada Theme

 

Let us dive into the main “Logo” option from the “Avada Theme Options”.

It is divided into two main parts, the logo and the favicon.

 

Logo Settings Tab

As the name suggests, almost everything related to your site logo will be set up using this option.

Logo Settings in Avada Theme

 

The first two options define the position of the logo within the chosen header style. Both in terms of its left/right/center alignment and also its margins on all sides from the boundary of the header.

The next section is where you set your default logo by uploading the file (JPG or PNG etc.) via upload button. Make sure that it is preferred to upload the exact size of the logo which you intend to use on your blog. As an example, I have kept my logo size as 160×30 px exactly. This option also allows you to upload the logo file which is to be used on retina displays (exactly double the size of the main logo).

Then comes the option to set up a logo if you are using the sticky header option (the header which stays/sticks on the top even if the page is scrolled down). As before, it allows you to either upload a new file or select the logo graphic from the media library.

The final set of options allows you to set up a logo (including retina version) for mobile devices and displaying on smaller screens.

Design Tip – the final position and display of your logo significantly depend on your main header height and the font you select for your menu items. Once these two elements are firmed up, use the logo’s dimensions and margins for the best fit and pleasant appearance.

 

Favicon Settings Tab

Favicon is a small icon associated with your website. It is typically displayed in the browser address bar accessing your website or next to the site name in the list of bookmarks.

It is always recommended to upload your favicon so it can be accurately displayed in relevant areas. Here is an article on Hongkiat demonstrating the importance of favicons for websites and blogs.

Avada Favicon Settings

 

You can see that there is nothing complicated attached to defining different favicon files in Avada 4.0.2. You simply upload the different files (if you don’t want to use the same file for all options) and the theme does the rest. You can use online and free tools like Canva etc. to generate a simple but memorable favicon for your blog. Alternatively, you can go for a professional designer to create favicon for your website.

You can see that mine is simply a letter “R” in black circle. Created by me in Canva in less than a couple of hours.

 

Logo Options in Avada Theme – Wrap up

Avada 4.x (aff) offers simple and intuitive options to define, adjust and display your logos and favicons for your blog/website. I have found the overall process to be extremely easy and simple to follow.

The key is to define the right size of the logo file as the right type such as PNG etc. Once you do that, the next step is to define where you want to show it and tweaking the margin values to make it look nice and fitting in its intended position.

If you have any question that you would like me to answer specific to logo settings in Avada theme, let me know via comments below and I will endeavour to help out. 

If there is any particular aspect that I have not covered in this article, let me know and I will consider to include.