Logos and Favicons in Avada

Published On: March 29th, 2023Categories: Avada, Video Training1712 words8.6 min read

How To Use The Video Element

Transcript:

In this video, we will explore how you can add your logos into Avada and also how to use favicons, the small icon logo that displays in the browser tab. Make sure you subscribe to our YouTube channel to keep up with all the latest videos like this one. If you don’t want to miss any, click the bell icon to get notifications of all new videos on our channel.

Let’s begin with adding logos. You’ll likely want one in your header and possibly a footer as well. There are several ways to add your logo and various formats you can use. Our recommended method for adding a logo into your header or footer is to add it into a custom layout section using Avada layouts. Creating custom layouts gives you full flexibility with the content and display of your header and footer.

I’ve imported the Avada Barber’s pre-built site here, and if we go to Avada layouts, we can see this site is using both a header and footer layout section in the global layer. Adding a logo to the footer is exactly the same as the header, so let’s focus on the header for now.

Let’s edit the header layout section –

Let’s edit the header layout section in a new tab by control-clicking on the link (or command-clicking on Mac) to see how this logo has been added. The header layout section is quite simple and has only two elements in it: the menu and the logo. A logo is essentially just an image, and in this case, the logo is added with the image element in a one-fifth column.

In this instance, if we edit the image, we can see that the designer has used an SVG file. WordPress doesn’t support uploading SVGs out of the box, but with Avada, there is a global option you can turn on to allow the upload of this very useful format without the need for plugins or custom code. This option can be found under the Performance tab, and it’s called SVG Media Upload.

However, not everyone is a designer and can create SVG files. They are a great format to use for a logo as they have a very small file size, which is excellent for performance reasons, and they are a vector file.

SVG files also scale perfectly, which means you don’t have to upload multiple versions, and all modern browsers now support them. However, you can, of course, use the traditional pixel-based transparent PNG file for your logo as well. For more information on SVG, see the linked documentation below. For more information on formats and sizing of images in general, please see our Image Format and Size Guide, also linked below.

The image here has been set to skip lazy load –

The image here has been set to skip lazy load, as it’s at the top of the page, and it’s linked via a dynamic option to the site URL, which means it will go to the home page when clicked. Otherwise, it uses all default options. What’s most interesting with the approach on this site, though, is how the designer has controlled the size of the logo in responsive situations.

If we edit the column and go to the Design tab, we can see the column is a one-fifth column. However, if we toggle the responsive options to medium screen, we can see that it becomes a one-quarter column. On small screens, the column occupies 45 percent of the available space.

Because it is an SVG file –

Because it is an SVG file, it automatically resizes to fill the allotted space. This is a clever way to control logo sizes, but it’s not the only one, of course. Alternatively, you could create separate containers for medium and small screens and create completely different layouts if you wanted, using rendering logic to control the display. You could also have different logos in the same layout and use visibility options. It will all depend on the header design.

As mentioned before, not all users will be comfortable with SVG files, so the more typical image format to use for a logo is the PNG format, as it supports transparent backgrounds, which a JPEG does not. Let’s remove the SVG file and add a PNG file instead. I’ve already uploaded one into my media library, and it’s worth noting that its full size is 400 pixels.

Since this image is 400 pixels, it’s currently being constrained by the size of the column. To ensure it displays as desired, I will go to the Design tab and set an image max width of 200 pixels, which is exactly half the actual width of the logo itself. This now acts as a retina logo: we are loading a 400-pixel file but displaying it at a maximum width of only 200 pixels. This is a bit of a different result than the SVG approach, but it looks good in this case.

As mentioned previously, if you wanted a different logo for medium and small screens, you could create a separate container for those views using rendering logic. Alternatively, you could add another image into this layer and use visibility options to control it.

Another way to add the logo –

Now, another way to add the logo into the header layout is to use dynamic options. With this method, we still use the image element, but now we will be pulling the image from the logos uploaded into the global options. So, let’s remove that image and start again.

Instead of adding an image from the media library, I’ll click on the dynamic content icon at the top here and choose Site Logo. This dynamically pulls the logo or logos added to the global options, depending on your choices here. As you can see, there are seven choices: we can pull all logos or we can pull a specific one. What you would select here will depend on how you’re building your header layout section and what logos you have uploaded.

In this case, I want the same logo for all screen size views and also when the header is sticky. I also have a max width set, so I will choose the default retina logo. If you choose all, the header would display a logo from the range of logos added into your global options, depending on the situation.

At this point, let’s see what logos have been uploaded into the global options of this website. I’ll head to the Global Options panel and Logo, and as I scroll down, we can see that there are four of the possible six logos uploaded, with no mobile logos added. These logos were not being used on the front end at all; they were just added when the site was using the legacy header method.

So, what this means for our layout now and our choice of default retina for the dynamic logo is that on all screen sizes and even in sticky mode, the default retina logo will be used.

If I choose all, the sticky logos here would be used in that situation. You can, of course, use any of the other image element options on your logo and your header, as it’s simply an image in the header. Now, let’s save these options and head to the front end of the site to see what our header looks like.

As for favicons –

As for favicons, which stands for “favorites icon,” we can see the selected default retina logo being displayed on the site. If we scroll so the header becomes sticky, we can see it doesn’t change. Favicons are closely related to the logo and represent the icon you see on the browser tab next to the page title. You can set this in the global options in the Logo Favicon tab.

In fact, you can upload four different size favicons through the global options. Each one should be square, and it’s the favicon from the first option that displays in the browser tab. You can also upload icons for smartphones and tablets, which are much larger. There is an option for an Apple touch icon, one for Android devices, and a Microsoft Edge icon.

When making a favicon, it’s easiest to start with a large size and then resize down for the different versions. I like to make mine at a thousand pixels so I can work on a large image and then resize them down. You can see the required sizes for each version in the option descriptions. Favicons can be saved as an ICO file or as a PNG file.

I use Photoshop –

I use Photoshop to make mine, but you can use any graphics program that you can access. There are also online tools like Favomatic and Favicon Generator, which I will link to in the description. Whichever way you make it, the trick with creating favicons is that they need to be square and look good at a small size. This means that they can be difficult to design, so a good tip is to keep them as simple as possible.

I’ve designed and resized the favicon for this site, saved it in four different sizes, and uploaded them to the media library. The main favicon can be uploaded at either 32×32 pixels or 64×64 pixels. I’ll click on upload and add my 64-pixel version, then finish adding the rest of them.

Now that we have uploaded our favicons, let’s go to the site on the front end. You can see the favicon up here next to the site title, and it looks fine. If the site is saved to a user’s favorites, the icon will go with it.

That’s it for logos and favicons in Avada. Thanks for watching, and let us know in the comments how you approach this topic. This concludes our video on logos and favicons in Avada. Make sure you subscribe to our YouTube channel to keep up with all the latest videos, and if you have any questions or need assistance, please create a support ticket, and our team will gladly assist you. As always, we want to thank you for choosing Avada.

Don’t miss this ...

We don’t spam! Read our privacy policy for more info.

Table of Content

Recent Posts

Don’t miss this
...

We don’t spam! Read our privacy policy for more info.