14 Apr How To Add A Favicon To Your WordPress Website

A Favicon is nothing but the tiny favorite icon, popularly known as Favicon that you see in the website’s URL bar right next to the website’s name. They are typically associated with a particular website or a webpage and also displayed when you bookmark that particular webpage. They are also known as web icons, shortcut icons, URL icons and bookmark icons.

Favicons are associated with branding and keeping the default favicon is a sign of an amateur. Favicons establish your website’s identity and help your website gain recognition among the visitors. A favicon is saved favicon.ico in the root directory of your server and is a graphic 16 X 16 pixels square.

Importance of a Favicon

Although favicons are those tiny icons on your blog or website’s URL they hold a lot of importance from the branding point of view.

1. They establish your website’s and brand’s identity, your visitors will recognize your website from your favicon.
2. They improve user-experience, when your visitors have opened a number of tabs on the browser, they click on your website without giving a second thought because they recognize your website from your favicon.
3. It gives a professional feel to your website, and people do not have trouble finding your website in a long list of favorites or bookmarks.

Not adding a favicon to your WordPress website can be a huge mistake as it adds to your brand identity and improves user-experience. Now you don’t need to make the mistake, we show you how to add a favicon to your WordPress website in simple steps.

Creating a Favicon

One can easily create a favicon by using any image or graphics editing software that allows the saving of .ico files such as GIMP. There are various online software as well that help you easily create a favicon of your choice for free. A favicon can also be saved as a PNG file as most modern browsers support PNG files but if your browser doesn’t support PNG then it requires to be changed into a .ico file.

The image/graphic that you’ll create will be your brand identity, special care has to be taken to keep it clear and recognizable. It should match your website’s image or services, you just cannot insert anything over there.

The ICO Image file format

Although most modern browsers accept files saved in formats other than .ico and you can save your file in formats like .png, .jpg or .gif. But it is advisable to save your favicon as .ico file because modern browsers always try to look for .ico file in the root domain and can sometimes show not found an error in the browser. The .ico image file format is compatible with all browsers, and it also holds more than one file, so you don’t need to have multiple files.

Few factors to keep in mind while creating a Favicon:

There are certain factors that you should keep in mind before creating a favicon for your website.

1.It should be clear, visible and square in shape.
2.The size of the image should be 16 X 16 pixels or 32 X 32 pixels.
3.Save the file as Favicon.ico.

You can also save your file as favicon.png or favicon.gif, but like I have mentioned earlier it is advisable to create a favicon in .ico file format. You can also create a favicon with a transparent background, this is your chance to make your website as unique as possible.

Adding a Favicon

There are various methods to add a favicon to your WordPress site, follow any of these methods to add a favicon to your website.

Method 1

Place Favicon in your WordPress directory.

1.Make sure that the file is named favicon.ico.
2.Upload the Favicon to the directory where WordPress is installed using FTP or SSH.
3.WordPress will read the changes and update your favicon automatically to your WordPress website.

Method 2

Use a Plugin to add a favicon

1.First you need to log into the administration panel of your WordPress account.
2.Go to the left side menu and navigate to plugins, select Add new.
3.Search for the plugin titled ‘All in one Favicon’ and install it.
4.All in one Favicon settings will open.
5.According to the format of your file, upload the favicon in the frontend and backend of your site and save changes.
6.Refresh your browser and your favicon should display next to your blog’s URL.

Method 3

Insert Code to your blog’s theme

1.Make sure that your favicon file name is favicon.ico.
2.Use FTP or SSH to upload the Favicon to the directory containing WordPress installation.
3.Log into your WordPress account to open the administration panel.
4.Go to the left side menu and navigate to Appearance, click theme editor.
5.Select the header or header.php file in order to edit the file.
6.Locate or Type the code <link rel=“shortcut icon” href= /favicon.ico />
7.If this code doesn’t exist, add the line within the HTML tags.
8.Refresh your page and your favicon will appear next to your blog’s URL.

Creating a Favicon with Transparent Background

To create a favicon with a transparent background, you need to make sure that your favicon is already with a transparent background. It will be either a PNG file or a GIF, all the steps of adding a favicon will remain the same as in Method 3 except you need to change the code.

Edit the code and change it from the favicon.ico to favicon.gif or favicon.png on the basis of your favicon file format, rel=“shortcut icon” href= /favicon.png />

After you have edited the code, refresh your browser, and you can see the favicon next to blog’s URL.

Wrapping Up

You can follow any of these simple methods to add a favicon to your website. I have included all the points in this tutorial that you need to know about Favicons, hope you found this tutorial useful.