Soliloquy Blog

WordPress slider tips, Tutorials and Resources.
WordPress Favicon

How to Add a WordPress Favicon to Your Site

by Waseem Abbas on January 4, 2018

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.

Logo File

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.

WordPress Login

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.

Site Identity

Now scroll down to site icon option and click on the Select Image button.

Select Image

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.

Select File

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.

Skip Cropping

You can see the preview of site icon on the left sidebar.

Favicon Added

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.

Mobile Icon

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.

Waseem Abbas is a content writer for SoliloquyWP and Envira Gallery.

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.