Soliloquy Blog

WordPress slider tips, Tutorials and Resources.
WordPress Favicon

How to Add a WordPress Favicon to Your Site

by Waseem Abbas on August 8, 2016
Share This Post

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.

Browser Tab

For the mobile users, a favicon appears as the site icon when a user pins your site to their mobile screen.

Mobile Icon

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.

Logo File

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.

Site Icon

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.

Select Image

Your site’s Media Library will popup. Click on the favicon file and hit the Select button.

Select File

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.

Skip Cropping

Your favicon file has now been added, and you can see it in the Customizer.

Favicon Added

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:


<link rel="icon" href="http://www.mysite.com/favicon.png" type="image/x-icon" />

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.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Share This Post
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.

[i]
[i]