What Is a Favicon and How You Can Add One to Your WordPress Site

This post provides a comprehensive guide on favicons. Find out what a favicon is, why it is significant, and how to create and add one to your website.

What Is a Favicon?

A favicon is a small icon that you can see in a browser tab next to the website title.

You can also find favicons in:

• browser bookmarks
• iOS and Android home screen buttons
• app icons
• search engine results.

Often, website owners underestimate the significance of this little icon. Let’s consider the benefits of using favicons.

Why Should You Use a Favicon?

There are many reasons why you should add a favicon to your website. Here is the list of the most important ones.

Brand Identity and Authenticity

Usually, a favicon has the same color scheme and style as other brand identification marks (website colors, logos, business cards, etc.). Favicons can be very similar to the company’s logo. Thus, this icon is another means of showing your brand’s identity. Undoubtedly, a unique, authentic favicon will look better on the tab with your website than a standard WordPress favicon used by default.

The screenshots below show that world-famous brands Nike and Adidas use favicons resembling their logos.

Improving User Experience

Favicons serve as catchy visual cues. Firstly, internet users can easily identify your website by its favicon when they have numerous open tabs and websites’ names are not visible. Scanning a multitude of tabs for a familiar icon is much easier than clicking on each browser tab to find the necessary website.

Secondly, if visitors want to come back to your website, they can use bookmarks or search history. They’ll find your site faster when they see the favicon.

Thirdly, favicons help websites to stand out in search engine results. As Google Search Central’s documentation states, your site’s favicon can be visible in Google Search results.

In short, favicons add professionalism, uniqueness, and brand consistency to websites. They also improve UX, helping people quickly get to the necessary tab or bookmark.

How You Can Make a Favicon

Creating a favicon is quite simple, and there are various ways to do it. Also, you should know the essential characteristics that favicons should have.

Favicon Requirements

Let’s consider the basic requirements for a favicon.

Size and Format

Your favicon must be square. It should also be a multiple of 48px, such as 48x48px, 96x96px, 144x144px and so on. In Google search results, the favicon images are rescaled to 16x16px, so you should check that your icon looks good under that resolution, too.

As WordPress states, site icons should be at least 512x512px, so make sure that you get a file of this size.

File Format

You can create favicons and save them in different image formats: ICO, PNG, GIF, animated GIFs, JPEG, APNG, and SVG. Yet, remember that not all browsers support all formats. To be on the safe side, you should create favicons in ICO, PNG, or GIF formats, as all browsers support them.

Ways to Create a Favicon

Now, it’s time to talk about various methods of creating a favicon. You can choose the most convenient one.

Use Image-Editing Software

Firstly, you can create your favicon manually using any software for editing images, such as Photoshop. You may adjust your brand logo to make a favicon from it. It’s advisable to crop your image to 512×512 px.

Create Favicons with Online Generators

Secondly, you can make favicons by using online generators. These tools allow you to 

• adjust your image (such as a logo) 
• create an image from scratch 
• generate a favicon from text
• choose from suggested graphics (such as emojis).

You can find numerous online generators for icons and favicons. favicon.io, favicon.cc, Favicon & App Icon Generator, realfavicongenerator.net are just a few examples of the tools to make a favicon. Here, we’ll speak about the functionality of the first two generators. 

Favicon.io

Favicon.io features three types of favicon generators:

1. PNG – favicon (to convert an existing image to the proper favicon format)
2. Text – favicon (to generate a favicon from the text)
3. Emoji – favicon (to create a favicon with emojis).

The first type lets you upload your image and get various favicon files fast. 

Secondly, with favicon.io you can generate your favicon from the text. After you type in the text, you can adjust the font style, color, size, as well as the background color and style (rounded, square, or circle). Additionally, you’ll see the preview of your favicon both in a specialized field and on the tab.

Thirdly, favicon.io lets you select and use emoji graphics as favicons. You may choose from various categories, such as smileys and emotions, activities, animals and nature, food and drinks, flags, symbols, objects, etc.

When you proceed to download the desired emoji, you’ll also see it on the tab as a preview.

Whatever method you prefer, you’ll get multiple favicon files compatible with desktop and mobile devices. You’ll also see the instructions where you should place the files and link tags that you should use. If you choose to add favicon files to your website manually, you’ll have to add the code into your HTML’s <head> section. In this case, remember to save the provided coding.

Favicon.cc

Favicon.cc lets you create your favicon from scratch. You have to pick a color, paint your image using the squares, and download it when you are finished. A significant advantage of this generator is the possibility to preview the favicon on the tab while you are still creating it.

When you download the image you’ve created, you’ll get an ICO file. Then, you’ll need to put this image into your server directory.

How to Add a Favicon to Your WordPress Site

After creating and downloading your favicon, it’s necessary to add it to your WordPress website. We’ll show you three easy ways to do this.

1. Use the WordPress Customizer

WordPress add favicon functions are inherent in the CMS itself. So, you can upload and crop an image that will be used as a favicon directly in WordPress. On your dashboard, choose the Customize submenu in Appearance.

Then, go to the Site Identity tab.

Next, find the ‘Select site icon’ at the bottom of the tab and click it.

You will get to the WordPress Media Library. Here, you can select an existing file or add a new one. After you’ve added your favicon to the library and chosen it, remember to save the settings by pressing ‘Select’.

If the file is not 512x512px, WordPress will let you crop the image, adjusting it to the necessary size.

After you save the settings and publish the website, your favicon will appear next to the site’s name on the tab. If you need to change the favicon WordPress image, you should follow the same steps (get to the Site Identity settings) and press ‘Change image’.

2. Add a Favicon to WordPress with Plugins

If you prefer, you can add favicons with plugins. There are various options, such as

• RealFaviconGenerator
• Favicon Rotator
• Heroic Favicon Generator

Favicon (RealFaviconGenerator) by Philippe Bernard is compatible with WordPress 3.5 or higher. This plugin has a free version that lets you customize your site’s favicon. After installing and activating the plugin, you’ll find the option ‘Favicon’ in the Appearance menu on your dashboard. Then, you can choose a picture to use as your icon from the WordPress Media Library and click ‘Generate Favicon’.

You will be redirected to the Real Favicon Generator website, where you can adjust the settings (change the background color and radius and set the image size). When you have finished with settings, press ‘Generate your Favicon and HTML code’ at the bottom of the page. 

The generator will create the favicon, and you’ll get back to the WordPress dashboard. Here, you’ll see a message that the favicon is installed and previews on different devices.

Favicon Rotator by Archetyped is another plugin that you can use to upload a favicon. It works with WordPress 5.4 or newer and has been recently updated and tested with WordPress 5.9. You’ll find the plugin in the Appearance menu.

When you choose ‘Add Icon’ in Browser Icon, you’ll be able to select files from your Media Library or to upload a new file from your computer. Moreover, you can edit the image, if necessary, setting the image ratio, scaling, or cropping it.

Next, you have to scroll to the bottom and press ‘Add Browser Icon’. Then, remember to save the changes and check your website.

Heroic Favicon Generator by HeroThemes is one more easy-to-use plugin that facilitates adding a favicon. It’s compatible with WordPress 5.5 or newer and has been tested up to 5.8.3. You’ll find it in the Settings menu on the dashboard after installing and activating it.

All you have to do is press ‘Select Favicon’ and choose the necessary file. Your favicon will be updated instantly.

What’s more, this plugin adjusts favicons to various devices and lets you enable or disable modified images. Particularly, you can switch on/off iPad home screen icon, iPhone retina touch icon, Chrome Web Store icon, Windows site icons, etc.

3. Add Your Favicon Manually

Another way to add a favicon is to use an FTP (File Transfer Protocol) or a File Manager. You should create a favicon file and save it on your computer in advance. As we’ve already discussed, online generators also provide you with the code that you should use when adding your favicon manually. Make sure you copy the coding (or keep it open on the generator website). Then, you should follow the steps below.

1. Open an FTP client or your hosting cPanel to see your website’s files.
2. Find your website’s root directory.
3. Copy the necessary favicon image files to the root directory. You should place the favicon files in the same folder as your wp-admin and wp-content folders.
4. Add the coding created by the online generator to your website. You should add it to the theme’s header (by using the Insert Headers and Footers plugin, for instance, or by adding the code to your theme’s header.php file).

You can modify the theme’s header.php file by opening the Theme File Editor (in the Appearance menu of your dashboard) and finding the header.php file on the list on the right.

After adding the code, remember to scroll down and press ‘Update File’ to save the changes.

How to Add a Favicon to Outdated WordPress Versions

If you are using WordPress 4.6 or older, you’ll need to add a favicon manually. Follow the procedure described above (copy the files into the root folder and add the necessary code to the header). 

If you don’t feel like editing theme files manually, we advise using the Insert Headers and Footers plugin. This simple tool by WPBeginner allows you to add the necessary code fast without editing your theme’s file. After installing and activating the plugin, go to the Insert Headers and Footers in the Setting menu on your dashboard. Then, place the coding in the Header section and save the changes.

Advice on Adding a Favicon

We’ll summarize the information on creating and adding favicons to WordPress websites in these tips and recommendations.

1. Your favicon image should be a square of at least 512x512px.
2. You should create files in ICO, PNG, or GIF formats to ensure that all browsers support the favicon.
3. Online generators can provide you with multiple files for different devices, so you can get a favicon that looks good on all gadgets and in all browsers.
4. Current WordPress functionality lets you add a favicon hassle-free via your dashboard, using the Customizer in the Appearance menu.
5. You can use plugins to upload your favicon if your prefer.
6. For older WordPress versions, it’s advisable to add the favicon manually by uploading files to the root directory and modifying the header.php file.

You can experiment with your favicon design to get an ideal combination of colors and other elements. Remember that people will see it across various platforms and in different sizes. So, the favicon should look good and add to your brand’s identity.

---

Exceptional WordPress Development Services from GetDevDone

Does adding a favicon to your site still seem a daunting task? Let our WordPress developers help you. With 16+ years of industry experience and thousands of successfully completed WP projects, we know everything about the world’s most popular CMS.

Get in touch with us with any WordPress-related task, from developing a custom theme or customizing your current one to improving your website’s Core Web Vitals scores for better user experience.

Helping your business succeed is our primary goal!