A favicon is a small icon you can see in a browser tab next to the website title. In this post, we discuss the main reasons to use favicons and the common methods you can apply to create and add one to your website.
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.
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:
Often, website owners underestimate the significance of this little icon. Let’s consider the benefits of using favicons.
There are many reasons why you should add a favicon to your website. Here is the list of the most important ones.
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.
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.
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.
Let’s consider the basic requirements for a favicon.
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.
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.
Now, it’s time to talk about various methods of creating a favicon. You can choose the most convenient one.
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.
Secondly, you can make favicons by using online generators. These tools allow you to
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 features three types of favicon generators:
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 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.
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.
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’.
If you prefer, you can add favicons with plugins. There are various options, such as
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.
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.
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.
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.
We’ll summarize the information on creating and adding favicons to WordPress websites in these tips and recommendations.
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.
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!
Ready to take your agency to the next level with a reliable white-label WordPress development company, but not sure where to begin? Check out our guide for the key steps to find your perfect partner!
Looking for a perfect gallery plugin for your WordPress website? Check out this helpful review.
Is WordPress multisite a good thing compared to a single WP website? In this post we answer this question, describing all the pros and cons of multisiting.
