A favicon is that small icon next to your site’s title in the browser tab, helping visitors quickly identify your site. Adding a favicon to your WordPress site is a small but impactful step in building your brand and creating a professional online presence.
In this guide, I’ll explain how to add a favicon in WordPress. Don’t worry, even if you are new to the platform, adding a favicon is easy, you’ll see 🙂
NOTE: All my WordPress tutorials focus on WordPress.org, not WordPress.com. If you’re curious about the differences, here’s everything you need to know ☺️
What is a favicon?
A favicon is a small icon that represents your website. It usually appears in the browser tab next to your site’s title. It can also show up in bookmarks and other places.
Think of a favicon as your site’s little logo. It helps visitors recognize your site quickly. Even when they have many tabs open, your favicon makes it easier for them to spot your site.
If you’re like me, you often have several tabs open in your browser. Thanks to favicons, you can easily identify which tab belongs to which website ☺️
Favicons are usually simple images. They need to be clear and recognizable even at a tiny size.
Having a favicon makes your site look professional. It shows that you pay attention to details. It also helps build your brand. People will start to associate your favicon with your site.
In short, a favicon is a small but important part of your website. It helps with branding and makes your site stand out.
How to create a favicon
Creating a favicon is easy and fun. Don’t worry, you don’t need to be a graphic designer to make a great one 🙂
You can use free tools like Canva to create your perfect favicon.
If you prefer more control, you can use design software. Programs like Adobe Illustrator or Photoshop work well, but you can also use free tools like GIMP.
Choosing the right design
First, think about what design you want. Keep it simple. Remember, a favicon is tiny, so simple designs work best.
Use something that matches your brand, like your logo or a symbol representing your site.
Make sure it’s clear and easy to recognize.
It’s up to you if you prefer a black, white, or transparent background.
Don’t be afraid to try different designs to see which works best.
Choosing the right size and format
A WordPress favicon should be a square image. Start with 512x512px and see if it works for your design.
The image should be in ICO, PNG, or GIF format.
How to convert from a different format
If you already have a logo or design you want to use, but it’s in a different format, you can easily convert it to PNG.
For example, if you have an SVG format, Google SVG to PNG and choose one of the free online converters. You can try this one if you want – https://svgtopng.com/
Creating a new favicon using Canva
If you don’t have a Canva account, create one. It’s totally worth it, I use Canva daily ☺️
Click on Create a Design and choose Custom size.
Type in 512 and 512 px for Width and Height and click Create.
Design your logo or favicon.
You can type “logo” in the left sidebar under Design and get a hundred templates to choose from. But per Canva rules, you must modify your chosen template. You want your design to be yours and unique.
You can add elements to your design by clicking on Elements on the left side panel and typing in what you want.
When you finish your design, click the Sharebutton on the right side and scroll down to Download.
Choose PNG format and toggle on a transparent background if that’s what you want.
Download your design and rename it if you want to.
And that’s it! You’ve created your favicon ☺️
Now, it’s time to add it to your WordPress site.
How to add a favicon to WordPress
There are 2 easy ways you can add your favicon to your site.
Adding a favicon using the WordPress Customizer
Open your WP customizer by navigating to Appearance in your WP dashboard and clicking on Customize.
Once it’s open, click on Site Identity and scroll down to Favicon.
Click Select Site Iconand select Upload to Library.
Upload your favicon, select it, and don’t forget to add an alt tag 🙂
Click Publish on the top of the Customizer.
Clear your cache.
Open an incognito window in your browser and check your site.
Adding a favicon using the WordPress Customizer:
- Create your favicon and save it as a PNG
- Go to Appearance
- Select Customize
- Open the Site Identity tab
- Click Choose Site Icon
- Upload your favicon image file and click Select as Site Icon
- Click Publish
Adding a favicon using WordPress Settings
If, for some reason, you cannot edit your site settings in the Customizer, there’s another easy way to add a favicon to WordPress.
In your WordPress Dashboard, navigate to Settings on the left panel and click General.
Next to the Site Icon click the button Choose a Site Icon and upload your image.
Select the image, add an alt tag, and click Set as Site Icon.
Don’t forget to scroll down and click Save Changes 🙂
Clear your cache and check your site in another browser or an incognito window.
Adding a favicon using WordPress Settings:
- Create your favicon and save it as a PNG
- Go to Settings in your WP Dashboard
- Select General
- Click Choose Site Icon
- Upload your favicon image file and click Select as Site Icon
- Click Save Changes
Adding a favicon using a plugin
There is one way to add a favicon to your site. You can use a plugin, you can find several of them if you search for them in the plugin repository.
However, every plugin adds code to your site and can slow it down a bit. And every plugin you install is a potential security risk. So you have to choose your plugins wisely.
On top of that, once you decide to remove the plugin, your favicon will also be deleted. And you’ll end up going through the first steps anyway 🤷♀️
Adding a favicon to your WordPress site is a simple yet powerful way to enhance your brand and give your site a professional look. By following the steps in this guide, you can easily create and upload a favicon, even if you’re a beginner 🙂
A small detail like this can make a big difference in how your site is perceived.
So go ahead, add your favicon, and make your site stand out! 😻
