When you consider launching a website, especially for the first time, there are some things that come to mind. And they are usually big things, things that genuinely deserve your attention. Factors such as finding a website builder, domain name and registrar and which plugins and features to use on our website.
There are other elements that you may be asked to consider by your hosting provider, such as, the server type you want to use. Yet there are other elements that you may never consider at all, perhaps because of ignorance or inconsequence. Adding a favicon to your website probably falls into this batch for you.
Favicons are not inconsequential, however, and lend credibility to your website. You should consider adding favicons to your website. Today we’ll share three ways to do this. Choose the one that best suits your skill level.
Table of Contents
What is a favicon?
Favicons are those little images that appear left of the title of browser tabs. More than likely you have seen them, but may never have known their names. They serve many purposes, including helping Internet users easily identify websites across various open tabs.
But the most important use was alluded to earlier. Favicons help your website look credible and credibility is what your customers and potential customers need to continue doing business with you. Google uses a grey globe as a space holder for every website without a customized favicon. How does that help your website stand out?
If you don’t yet have a favicon, use one of the following methods to do so. By the way, do you know how to create a favicon?
Creating a favicon
Terminology
The term favicon is mostly universal but if you have a WordPress website, the term site icon is used. For consistency, we will use favicon, even when referring to WordPress websites.
Creating a favicon
Your favicon doesn’t have to be your logo. In fact, if your logo is complex, it shouldn’t be your favicon. The two should be similar, however, for branding purposes. You can use a section of your logo that is without writing or other intricate details. These will easily get lost because of the small size of the favicon.
Size
You need an image that is 512 pixels squared. If your image is larger when it is uploaded, WordPress will allow you to crop it to this dimension before you can add the favicon to your website.
File formats
We recommend .png or .ico. WordPress now (since 4.3) supports other formats and most browsers (Internet Explorer continues to be the exception) also support other formats.
1. Using a plugin to add a favicon to a website
There is always a plugin to help you and adding a favicon to your website is no exception. If you do not know or care which plugin you use, you will need to search for and install one before following the steps below. Favicon by RealFaviconGenerator seems to be a favorite among many, so we will use that in our example.
- Go to ‘Appearance’ from within your dashboard
- Select ‘Plugins’ and choose the Favicon plugin
- Upload an image that is at least 260px2
- Click ‘Generate favicon’ which will temporarily take you outside WordPress
- Click ‘Generate your Favicon and HTML code’ which will return you to your WordPress site
2. Using the WordPress Customizer to add a favicon to a website
The WordPress Customizer allows you to make cosmetic changes to your themes to help your website stand out even more by reflecting your personal creativity. Use this tool to help you add a favicon to your website.
- From within your dashboard, select ‘Appearance’
- Select ‘Customize’
- Select ‘General Settings’ and then ‘Site Identity’
- Scroll down to Site Icon left of screen
- Click ‘Select Image’ and upload the image (at least 512px by 512px) of choice
- WordPress will then invite you to crop the image to fit the dimensions shared at step 5 (ignore if ideally sized image is uploaded)
- Click ‘Publish’ top left of screen to see changes
3. Using HTML code to add a favicon to a website
Usually, one of the previously shared methods would be chosen if you are not a techie, but if you are, maybe the third and final option will be more your thing. To add a favicon to a website manually, you do not need to store the image in your root folder as is often the case.
Within your HTML, insert the following code to your head tag (replace your attributes to fit your individual circumstance). As good practice, always back up your site before any changes to its code… just in case.
Conclusion
Using favicons make sense since they help to build credibility with your users, as well as differentiate your website when many other tabs are open on a browser. No matter your level of expertise in web development, you will find a method of adding a favicon to your website that is right for you.
