Adding a Favicon to WordPress [Quick Tutorial]

A favicon is the small icon that is displayed in a browser tab when you are looking at a website. It is something that is often forgotten but it is an important part of completing your website, as well as properly branding it.

The steps to adding a favicon involve first making it, and then adding it to your WordPress site. For the latter, you have two main options.

Making a Favicon

Your favicon has to be exactly square. The recommended size is 512 x 512 pixels. You can make the background transparent, or you can fill it in with a color.

You will need to use an image editing program to create your favicon. Something like Photoshop or Gimp will work.

Once complete, you should save it as an ico file if you can. This type of file is recognized by most browsers. You can, however, save it as a png file, and you simply call it "favicon."

·         favicon.ico or favicon.png

Adding to WordPress Option 1 - WordPress Admin

On WordPress 4.3 or above there is an option for adding a favicon in your admin panel.

In the left menu of your Dashboard, you should go to Appearance then Customize.

This will open another menu on the left. One of the options should be Site Identity. Select this option.

Beside Site Icon, click on the Select File button to upload the icon you just created.

The upload process is the same as adding any other image to WordPress, and you have the same cropping tools if required.

Now click Save & Publish and your favicon will appear.

Adding to WordPress Option 2 - WordPress Code

WordPress 4.2 or below won't have the above option in your WordPress Dashboard. Instead, you will have to add some code to your theme's header.php file, and upload the favicon manually.

Follow these steps:

1.      Backup your files before you make any changes.

2.      Upload the favicon you created earlier to your website using FTP. You should put it in the root directory.

3.      In your WordPress Dashboard, go to Appearance > Editor.

4.      Select header.php, add the code below, and then click Update File.

The code you need depends on whether you saved your favicon as an ico file or a png file.

If you saved as an ico file use this code:

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

<link rel="shortcut icon" href="http://www.YOURWEBSITE.com/favicon.ico" type="image/x-icon" />

If you saved as a png file use this code:

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

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

In both cases make sure you change YOURWEBSITE.com to your website URL.

Other Options

There are two final options for adding a favicon to WordPress. These options may be applicable, but note that they are becoming increasingly obsolete.

·         Theme Options - Before WordPress added the functionality to the WordPress core some themes gave you the option to add favicons in their settings

·         Plugins – These exist so that you can add a favicon without having to change the code yourself. These are not as commonly used anymore because the functionality is now part of the WordPress core.

Happymarli
Happymarli Hire Me

Professional Proofreader, Editor and Writer

Do you need a professional editor and writer to proofread your technical document, thesis, novel, statement of purpose, personal statement, resume, cover letter, manuscript, essay, short story, textbook content, article, and marketing material ensuring their content is flawless and appealing to readers? Why Hire Me? 1) I have a 5 star average rating for 2397+ projects completed on freelancer. 2)...

Hire Me

Next Article

Styling Google Maps [Guide]