parallax background

How to add a favicon to your WordPress website easily

What’s the best podcast WordPress theme out there? Let’s look at the options
April 8, 2019
How to fix the HTTP error when uploading images to WordPress
April 10, 2019
 

Your website can stand out from others with little details that make all the difference. Something like a WordPress favicon.

A favicon is a favorite icon in case you are wondering. Remember all those little icons on your browser’s favorite menu? Those are favicons, small images that represent your website visually.

To be recognizable, your website should have a favicon. This small image will represent your site throughout the web with a powerful message. Favicons are used in a lot of ways: bookmarks, browser’s tabs, and browser tiles.

Adding a WordPress favicon to your site is something very simple and intuitive, and can be done from the customizer. This way of adding a WordPress favicon is usually the recommended one. Even so, this article will teach you other ways you might find more useful.

What is exactly a WordPress favicon?

 

Favicons are an additional way to identify your website. They are used by browsers to make it easier for users to recognize your brand. When you have a favicon correctly installed on your website, it will be used in many different locations by the browsers.

The most common locations are address bars, bookmarks, and browser tabs.

While in WordPress you can identify favicons by “Site Icons”. It's the most correct definition since this icon will represent your website in many ways.

Why bother to add a favicon to your site?

 

The importance of the favicon is the image of your site. This little icon will reflect your message and identity. And users also find it easier for navigation. We’ll get into that.

Make your uniqueness shine

A favicon is the perfect way to make your site stand out. It will be recognized in many web browsers, and help users to know which one is your site. In a sea of open tabs, you can be sure your site gets identified immediately.

Keep a professional look

 

Since a favicon is such a great help for users to identify your site, having an identifiable favicon is crucial. It defines the identity of your business and stands out from competition.

A more pleasant mobile adventure

This is one of the most important aspects nowadays: a great mobile experience. User’s will be able to add your website to their mobile screen directly, and that’s always a plus.

Why favicons are so important

important
 

The favicon is as much important as your company’s logo. It’s part of your branding. When your site doesn’t have one, it’s much easier for people to question its credibility. The reason for that is we are used to seeing them.

A website that has a favicon sends out an image message and makes it more pleasant for the user. When a person wants to find your site among others, spotting your site icon is enough, instead of reading all the text.

Give it a name and save it

two_parts_optionb
 

Back in the old days, adding a favicon would require you to name all files “favicon.ico”. Then you would place them directly on your root directory. Well, not anymore.

The advances to WordPress now allow you to name your file however you wish, save it in different formats, and save it anywhere you want on your website.

A cool tip: If you usually work with WordPress Customizer to create your site icon, you will have multiple images that can be stored on the media folder.

And how do you build your favicon?

Don’t forget your branding. Your logo should be the perfect site icon. Its size should be at least 512 pixels, all sides equal. Since it represents a square, WordPress will also let you crop a larger image, even if it’s a rectangle.

File format for your favicon

owl_favicon
 

In the beginning, favicon files would always be in the ICO format. The biggest advantage of this format is its support, and the capacity to store many versions of the image.

With the advancements in technology, all the modern file formats such as JPG, GIF, PNG, and SVG are now supported by today’s browsers. The most elected format is PNG: great support, easy to develop, and great for transparency.

Choose your software

You have many options to create your first site icon. Software like Photoshop and GIMP (free!) are great image editors for good quality. There’s also an online service to create favicons: The Favicon Generator for example. But there are other favicon generators as well.

To keep your job as simple as possible, you can use the last one to upload an already existing site logo in another format. After uploading, the site will then offer favicons in all sizes and formats. You just have to choose your favorite and add it to your website.

Size matters

size
 

To always display your favicon properly, your site will need a set of image sizes ready to use and adapt to any case. Luckily, WordPress automatically generates the 4 sizes that are most common. Whenever you add a favicon to your WordPress customizer, you won’t have to stress about it.

Never forget that the image you are uploading has to be at least 512 x 512. WordPress will then create all the other 4 formats from the original one. These are their features:

  • Favicon size 32x32px
  • App icon for iOS size 180x180px
  • Android and Chrome app icon size 192x192px
  • Medium size tile for Windows 270x270px

Action: Adding your favicon to WordPress

WordPress offers many solutions to display your favicon. Here’s a brief explanation of each one of them:

Make the customizer your best friend

add-favicon-to-wordpress-site-
 

Available since WordPress 4.3, the customizer is the most helpful tool to add a favicon. If you have it activated in your theme you just have to go to Appearance > Customize in the backend. Once you get there, click on Site Identity.

This is the section that allows you change your site title, its description, and everything else that has to do with your site’s identity. That includes the favicon. Click on the Select File button and upload the chosen site icon file to change your favicon.

Don’t worry if the size is too big: WordPress lets you crop the image to the correct size. If the size is already perfect, just save it. Now you’ll be able to see your favicon alive. Go ahead, save it and publish it!

Favicons for older WordPress (4.2 or below) via Code

You can upload your favicon file to your site’s root directory through FTP. Once you do that, you’ll be able to paste the code directly into your header.php file.

<link rel="icon"  href="https://www.muffingroup.com/favicon.png" type="image/x-icon" />
 <link rel="shortcut icon" href="https://www.muffingroup.com/favicon.png" type="image/x-icon" />

You just have to replace muffingroup.com with the URL to your site and you should be ready. In case you don’t find your header.pho file, or if your theme doesn’t have one, try using this plugin we have for you. First install and turn on the plugin “Insert Headers and Footers”. After you activate it, you should go to Settings > Insert Headers and Footers, so you can paste the code you found before in the header section. Save it and it’s done!

header
 

Discover your theme’s options

If you don’t find a way to change your favicon through the Customizer, maybe it’s hidden in your theme’s settings. Each theme has a big set of options, allowing you to customize beyond standard. In order to know if your theme permits it or not is to check its options.

Adding a site icon via plugin

plugin
 

These plugins support ICO, PNG, GIF files, and Apple Touch Icons. You will aso have the possibility to set different paths for site icons on the frontend and backend.

plugin1
 

To do this, you just need to paste the existing favicon paths in the WordPress media library. Or you can use the buttons and upload your files, and then the plugin automatically defines their paths. After everything is set, be sure you save everything!

Although it’s just a tiny image, a favicon is actually part of your branding and makes you site stand out. It’s the kind of little detail that makes your website more professional. It allows it to be recognized among others, and helps the user to have an improved experience.

With this article you have learned why favicons are good for your website. Now you know how to create them with four different ways to add them to your WordPress website

We can thank the most recent improvements of the WordPress platform that make this process so much easier. If your site doesn’t have the customizer, you can still use a plugin, the settings of your theme, or manually, for that retro feeling!

Albert Ślusarczyk
Albert Ślusarczyk
As the co-creator of Be Theme, I am a strong believer in designing with care and patience. I pour my energy, time & knowledge into perfecting the theme for our 195,000+ customers.

Comments are closed.

Free cheat sheets available

Subscribe to download a set of cheat sheets for CSS, JS, and HTML

You'll receive an email with the cheat sheets in an instant.