Last updated - July 8, 2021
Have you ever noticed the small icons that are displayed next to website titles in browser tabs? They’re called favicons.
They help your visitors recognise your website easily and establish its identity for regular readers. Therefore, they’re a small yet important part of your branding and should not be overlooked.
In this article, you’ll learn how to create a WordPress favicon, and how to add it to your website with ease.
The Benefits of Using a Favicon on Your WordPress Website
We know that favicons primarily appear in the browser tabs. However, that’s not the only place you’ll see them. Here are all the spaces where your readers can encounter your website’s favicons:
- Desktop browser tabs – The favicons appear next to the website title in the browser tab.
- Search results – Search engines such as Google and Yandex show favicons in their search results.
- iOS Web Clip – When iPhone and iPad users pin your website on their home screen, the link looks like a native app and uses favicons as app icons.
- Android Chrome – Android Chrome users can also add a website to their homescreens, where the favicon is used as the app icon.
- Windows Metro – Windows 8 and 10 users can pin your website in their start menu. The site will appear as a tile, similar to a native Windows app, and use the favicon for the tile icon.
When you add a favicon, your website appears professional and credible on many spaces, thus improving customer perception and trust.
Moreover, when a user has opened a large number of tabs on their browser, your website title may get cut off. In such a case, visitors can navigate back to your website by recognizing the favicon.
How to Create a WordPress Favicon
You can manually create a favicon using your logo. The only requirements are that it must be in PNG or ICO format and should be 512 x 512 pixels.
If you don’t have a logo, you can create one using free online tools like Canva. From the dashboard, head to Create a design > Custom size. Provide the height and width of the project as 512 pixels and click “Create design”.
A blank page will appear in the project on which you can add logos using the elements tab in the left sidebar. Just search for a logo and click on one you like to copy it to the blank page. Though most icons are available for free, some are locked behind a Canva Pro plan.
You can then change the logo’s size and colors according to your website identity and your preferences. When you’re done, Canva lets you download the logo in the PNG format, with or without a background.
If you have an existing logo, you can use image editing software like Adobe Photoshop or even the pre-installed Windows Photos app to crop it into a square shape and save it as a PNG file.
Cloud-based tools
Apart from this, you can also use cloud-based tools like Real Favicon Generator and Favicon Generator to create your favicons from an existing image.
All you need to do is upload the image from your computer and click Generate. The tools create a package of icons to be downloaded that you can use on your website.
The former even lets you customize the favicon’s appearance on iOS, Android, Windows, and macOS devices. It even lets you manipulate factors like compression and scaling algorithms.
After downloading the favicon, we’ll use two methods to add it to our WordPress website.
Adding the Favicon Using the WordPress Customizer
The easiest way to add a favicon to your WordPress website is by using the WordPress customizer. From your WordPress dashboard, head to Appearance > Customize > Site Identity.
Here, click the “Select Site Icon” button to upload or choose your favicon from your library. Before uploading the image, make sure it’s at least 512 x 512 pixels.
If your image is not square, you can even crop it before finalizing. The page shows a live preview on the right side of the cropping page. Click “Crop image” when you’re done. With that, your favicon will be live and you should be able to immediately see the changes.
Adding a Favicon Using a WordPress Plugin
Real Favicon Generator, the tool we used earlier, also has a plugin that provides a few more compatibility options for various devices and app icons. This method is also ideal for websites with WordPress version 4.2 or below.
After installing the plugin, head to the Appearance > Favicon. Here, you’ll need to upload the master picture to generate favicons.
When you click the “Generate Favicon” button, you’ll be redirected to the tool’s website. Just like before, you can customize the favicon and generate the files.
Next, you’ll be automatically sent back to your WordPress admin dashboard. A message will confirm that the favicon has been activated.
If you’d like a video tutorial, you can check out our video below.
Also, if you have any questions or feedback, feel free to leave a comment below.
