Menu
Disclosure: ULTIDA's content is free & reader-supported. We may earn a commission if you click & buy through our links. Your support helps us create the best content & make a difference.
Tutorials

How To Change Favicon In WordPress?

how to change favicon in wordpress

Do you want to learn how to change favicon in WordPress? (Hint: It’s easy!)

As a website owner, you are probably familiar with the importance of a logo in building your brand identity.

However, you might not be as familiar with the importance of a favicon.

In this article, I will explain what a favicon is, why it is important for your brand identity, and how to change your favicon in WordPress to boost your website’s overall appearance and recognition.

This post covers:

And no, you don’t need technical skills to add or change the favicon. (I have a simple solution for you.)

What Is WordPress Favicon?

A favicon is a small icon that appears in the browser tab of a website.

It is also visible in bookmarks and the browser’s address bar.

A favicon is usually a small image, typically 16×16 pixels or 32×32 pixels in size, and is often a simplified version of the website’s logo that represents the brand’s visual identity.

favicon examples

A well-designed favicon can make your website STAND OUT, increase brand recognition, and help you establish a consistent visual identity across various platforms.

When a user bookmarks your website, having a favicon can make your page pop more and be easily identifiable.

Additionally, if your website is open in multiple tabs, having a favicon can help users QUICKLY identify which tab corresponds to your website.

A survey found that 45% of users have 20+ tabs open simultaneously. I currently have 11. What about you?

How To Add/Update Favicon In WordPress

There are several ways to change your favicon in WordPress.

1. Use A WordPress Plugin

One method is to use a plugin like All in One Favicon. (Check my tutorial on installing a WordPress plugin the easy way.)

change favicon with a wordpress plugin

This plugin allows you to upload your favicon and customize its appearance. It also allows adding a favicon for Apple touch icons (retina-ready) and Windows 8 tiles.

But I recommend not using a plugin since adding a favicon is very simple in WordPress.

And it’s always better to have fewer plugins installed. (Avoid adding unnecessary bloat to your website.)

2. Use The Theme’s Built-In Settings

Usually, your WordPress theme or page builder has built-in options for customizing your favicon.

For example, the Divi theme by Elegant Themes allows you to upload your favicon under the Theme Options section.

3. WordPress Live Customizer

add favicon via wordpress customizer
Since WordPress implemented the Live Customizer feature, it is a go-to place for many quick changes to your website. (Without needing to use a page builder or 3rd-party plugins.)

And it is a method I would recommend as it’s the fastest way to change or add your favicon.

Go to Appearance > Customize and click on Site Identity.

Then upload the image, set the title and tagline, and save the settings.

That’s it!

You now have a brand new favicon representing your website.

4. A More Technical Method

Another way to change your favicon is to add the code directly to your theme’s header.php file.

To do this, you will need to access your website’s files through FTP or cPanel and edit the header.php file.

You can add the code for the favicon by following this format:

link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

This is definitely not the method that I recommend and should only be used by advanced users.

How To Create A Favicon (& Tips)

Creating a favicon is a relatively simple process. Many online tools can help you create a favicon from scratch or use an existing image and convert it into a favicon.

One popular tool for creating a favicon is Favicon.io.

This tool lets you upload an image (your logo) and generate a favicon in various sizes and formats. It also allows customization of the favicon by adding text, shapes, and colors.

Another option is to use graphic design software like Adobe Photoshop or Canva to create a favicon.

This will require some more work, but the sky is the limit when it comes to customization options.

Once you have created your favicon, you can use a favicon generator tool like Real Favicon Generator to convert the image into a favicon file.

Why You Must Add A Favicon To Your Site?

Changing your favicon in WordPress can have several benefits for your website and brand identity.

Firstly, it can make your website more visually appealing and professional-looking.

A well-designed favicon will make your website more noticeable and grab your audience’s attention.

Secondly, changing your favicon can help you establish a consistent brand identity across different platforms. (MUST!)

I can not emphasize enough how important that is, especially if you are building your business for the long term.

You can INCREASE brand recognition and establish a cohesive visual identity by using the same favicon on your website, social media profiles, and other online platforms.

Troubleshooting Common Issues When Changing Your Favicon

There are a few possible solutions if you encounter any issues when changing your favicon.

Firstly, clear your browser cache and refresh your website to see if the favicon has been updated.

If the favicon still does not appear, try disabling any caching plugins or clearing your website’s cache (not the same as the browser cache). You may also be interested in learning how to disable WordPress plugins if you’ve never done it before.

If you are still experiencing issues, check that the favicon code has been added correctly (if you added it manually) and that there are no errors in the code.

You can use an online HTML validator tool to check the code for errors.

Final Thoughts On Favicon

In conclusion, a favicon is an important element of your website’s brand identity.

Creating a well-designed favicon and changing it in WordPress can improve your website’s appearance, establish a consistent visual identity, and increase brand recognition.

Use the tips and best practices outlined in this article to create a favicon that represents your brand and enhances your website’s overall aesthetic.

::

Note: This article was originally published on April 28, 2023. But our team regularly reviews it and updates it with necessary improvements for accuracy.

About Author

Ales has been in love with computers ever since he got Amiga 500 almost 30 years ago. He earned his bachelor’s degree in Computer science from Ljubljana University, Slovenia. In 2010 he co-founded PremiumCoding, a website that makes awesome WordPress themes that are also for sale on ThemeForest. In the past few years, he focused mainly on combining web design, code and photography into a seamless experience.