How to Add a WordPress Favicon to Your Site
Do you want to create a favicon for your site? A favicon will help your users to recognize your brand immediately, even with multiple browser tabs open. In this article, we will share how to add a WordPress favicon to your site.
A favicon is a unique logo that represents your site in a web browser tab.
For the mobile users, a favicon appears as the site icon when a user pins your site to their mobile screen.
In just a few simple steps, you can create and upload your own favicon. Are you ready to get started? Let’s go!
How to Create Your Favicon in Photoshop
For the purpose of this tutorial, we will be using Photoshop to create our favicon. However, many different image editing tools will work.
We recommend using the main logo of your site as the favicon, so your users will be able to identify your site easily.
First, create a transparent file in Photoshop that is 512 pixels wide x 513 pixels high. Drag and drop your logo to this new file to place it there.
Go ahead and save it to PNG format, keeping the transparency.
How to Add the Favicon to Your WordPress Site
WordPress has different versions, and the steps for adding a favicon differ between them. If you have the latest version of WordPress (4.3 or higher), then follow the steps below to add your favicon to your site. If you have an older version, skip to the next section.
WordPress 4.3 or Higher Version
First, you need to go to Appearance » Customize at your WordPress backend. Then go to Site Identity.
You’ll see some different options, like logo, site title and more. You need to click on Select Image and then upload your favicon file.
Your site’s Media Library will popup. Click on the favicon file and hit the Select button.
In the next step, you will be asked to crop the icon. Since you created it using the correct dimensions, you can simply click on the Skip Cropping button.
Your favicon file has now been added, and you can see it in the Customizer.
Lastly, you need to click on the Save & Publish button in the Customizer. Your favicon will now appear in the browser tab!
WordPress 4.2 or Older Versions
If you are using an older version of WordPress, you’ll need to upload the favicon file to the root folder of your site. Simply use FTP to upload the image and then add the following code in the header.php file of your theme:
&lt;link rel="icon" href="http://www.mysite.com/favicon.png" type="image/x-icon" /&gt;
Replace www.mysite.com with your site’s URL, and your favicon will appear in the browser tab.
If you are not familiar with the code, then you can use the All In One Favicon WordPress plugin to add your favicon.
(We do, however, recommend keeping your site updated to the latest version of WordPress to avoid any issues!)
We hope this article has helped you to learn how to add a WordPress favicon to your site. You may also want to check out our guide on how to add a slider with thumbnails in WordPress.