How to Add a Favicon

Back in 1999, the favicon was introduced to Internet Explorer to help users tell bookmarked pages apart. Bookmarked pages used to be called “favorites”. And if you join this word with the word “icon”, you get a favicon.

It may seem insignificant at first sight, however, favicons are important for your website’s visibility and usability. And because usability is a ranking factor, there is an indirectly small impact on your site’s ranking.

In this article, we’ll talk about the benefits of adding a favicon, how to do it on your WordPress website, as well a how to do it with HTML.

Why Should I Use a Favicon on My Site?

Suppose you’re guilty of having too many tabs open at once on your computer screen. In that case, you are probably aware that navigating that chaos would be impossible without the tiny images in the corners of your tabs. You probably already have YouTube’s, Netflix’, or Facebook’s favicon in mind without even searching for it.

The main benefit of using a favicon for your website is improving the user experience for your visitors. Navigating a forest of tabs is simpler and more straightforward with favicons, because our brains are fast at processing and recalling images, and once the names of websites become inaccessible, the images help our navigation.

The usability of the website can boost your ranking in the search engine. When the user is able to save time on finding and browsing your website without any difficulties, this can play a small role in your website’s SEO ranking.

Furthermore, a website with a favicon tends to appear more professional to the users. Websites without favicons look as if no one is maintaining them, so they can come off as an unreliable resource. Favicons enhance user trust. 

Finally, the favicon can help with building brand identity, as the users will have more interactions with your logo or other imagery associated with you, and thus, remember you more easily.

How to Add a Favicon For a WordPress Website

Before we jump to the technical part, let’s discuss your favicon image.

It is recommended to choose either:

• • Logo;
  • The first letter of your brand;
  • An image/icon that would symbolize your field (e.g. a coin or graph if you are writing about finance).

• Tip: the symbols you use for your favicon should represent your brand in an appropriate fashion. Using inappropriate symbols (such as for example, a swastika) will result in Google hiding your favicon, and showing a generic image instead.

Then, you need to pick a format:

• ICO;
• PNG
• GIF;
• JPEG/JPG.

If you want to create your own Favicon from scratch, you can do it in Photoshop, Illustrator, favicon.io, Icons Flow, or any other visual editor or icon maker you feel comfortable with. However, if you already have an image you want to use, it will make things much easier, because you can simply plug it into any cloud-based tool, such as Real Favicon Generator, favicon.cc, or Favicon Generator.

In the Real Favicon Generator, you need to start by uploading your image on the “Select Your Favicon Image” blue button and then set up any specifications you want in the following window.

Then, generate your favicons and HTML code by clicking on the button that says so at the left bottom of the following screen, and download your package.

Making a WordPress Favicon

If you’re creating a WordPress Favicon, here are some tips to follow. 

1. Recommended favicon size is 512 by 512 pixels;
2. Use a square image to save yourself from having to crop it in WordPress later
3. The favicon will be displayed as a 16×16 pixels square;
4. Pick an image that will be visible when displayed in such a tiny dimension!
5. Follow the Google Guidelines for best results;
   1. One favicon per site
   2. Favicon URL is Crawlable by Google
   3. Helpful & representative
   4. Favicon URL is stable, i.e. only ever change this infrequently
   5. Be appropriate, i.e. no hate symbols.

Two Ways to Add a Favicon to Your WordPress Website

Once you have your favicon ready, here’s how to upload it to WordPress. There are two methods.

1. WordPress Customizer

Since WordPress version 4.3, you can find a special feature for easy upload and cropping of images that will later be used as favicons. This is the simplest option for the majority of people because they don’t need to look elsewhere, everything is there, in the WordPress Dashboard.

1. Go to WP Dashboard and choose “Appearance” and then “Customize”.
2. On the left side, you will see a list of options. Pick the first one, “Site Identity”.
3. Then look to the bottom left, and click on the “Select Site Icon” button.
4. This will open the same WP Media Library that opens up whenever you search for visual media for your website. Pick an image from the library or choose a new one from your computer memory. Attention: if you have used the RealFaviconGenerator to generate your favicon, the downloaded package needs to be unzipped. Otherwise, you won’t be able to upload it to WP.
5. Once you have chosen and clicked on your image, press the “Select” button in the bottom right corner.
6. If you remember, it is desirable that the image is already saved as the perfect square. If it’s not, WordPress will let you do that on the next screen offered. All you will need to do is crop your image until you get equal sides.
7. Now, if you’re happy with what things look like, you are ready to save and publish your favicon.
8. Any future changes on your favicon should be performed in this same interface.

2. Install a Plugin for Favicons

There are so many WordPress users and developers nowadays, that there is a plugin solution for almost anything you can think of. 

For favicons, there’s a free plugin by Real Favicon Generator, called Favicon by Real Favicon Generator.

It’s simple to use and compatible with a variety of other devices. You can activate it via the WordPress dashboard.

1. Go to the WordPress Dashboard and choose “Plugins”.
2. Search for Faviconn by RealFaviconGenerator.
3. When it appears in your search results, click on “Install Now”.
4. Then, go to “Appearance” (also in the dashboard), and select your favicon from the Media Library. The image needs to be at least 512×512 pixels.
5. Click on the “Generate Favicon” button. It will take you to the Real Favicon Generator website, where at the bottom you will find “Generate your Favicons and HTML code”.
6. As the Favicon Generator is doing its thing, it will send you back to the Dashboard.
7. When your favicon is ready for use, you can take a look at what it will be like when previewed on different devices and screen sizes.

If you’re managing a multisite network, but you want each website to have a unique favicon, the plugin method is the best option, because it makes the process simpler, compared to editing each site’s theme to change each favicon.

Final Word

Depending on your website’s building platform, and your working preferences, adding a favicon to your website can take one form or another. Newer versions of WordPress are built with adding a favicon in mind, so it’s super easy.