How to Add a WordPress Favicon to Your Site
Do you want to create a site icon in WordPress? A favicon or site icon is a great way to help the users to recognize your website immediately, even with multiple tabs opened in the browser. In this tutorial, we will share how to add a WordPress favicon to your site.
Having a site icon is a unique method to represent your site in the web browsers. It works as an identity for your WordPress website.
To add a WordPress favicon to your site, you’ll need to follow these 4 steps:
- Step 1. Create a favicon for your site in Photoshop
- Step 2. Login into your WordPress website’s admin
- Step 3. Go to custom panel of the theme to add icon
- Step 4. Crop, preview, save and publish the icon
Ready to get started? Let’s go!
Step 1: Create a Favicon for Your Site in Photoshop
There are multiple apps and software available online to create a site icon. However, we will be using Adobe Photoshop which is a widely known image design and editing software.
It is recommended to use your brand’s logo as the favicon of the site. Simply open the logo image in Photoshop.
Before you save the icon file, make sure that the image has a transparent background and its dimensions should be 512px in width and height.
Go ahead and save the favicon in the PNG format. It will keep the transparency of the image file as is when you add the icon in WordPress.
Step 2: Login into Your WordPress Website’s Admin
To add the favicon on your site, you need to login to your WordPress account.
Step 3: Go to Custom Panel of the Theme to Add Icon
Simply go to the custom panel of your theme from Appearance ยป Customize and click on the Site Identity settings.
Now scroll down to site icon option and click on the Select Image button.
It will open the Media Library images for you to select the favicon. If you haven’t add the icon image in WordPress, then simply drag and drop it to the Media Library.
Next you need to edit the site icon before adding it to the website.
Step 4: Crop, Preview, Save and Publish the Icon
Once you select the favicon file, it will ask you to crop it. Since we did the cropping in Photoshop for correct dimensions, simply click on the Skip Cropping button.
You can see the preview of site icon on the left sidebar.
Hit the Save & Publish button on the top of the custom panel. This favicon will also appear as the app icon if someone pins your website on their mobile device.
We hope this tutorial 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 replace your images and media files in WordPress. In case, your site isn’t ranking in the search engines, you should check out this ultimate WordPress SEO guide.
If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress tips, guides and resources.
Related Posts
