Create a Favicon

A favicon (short for “favorite icon”) is an icon associated with a particular website or web page. It is generally intended to be used when you bookmark a web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually. Favicons are also used as application icons on mobile devices.

A favicon is typically a graphic 16 x 16 pixels square, and is saved as favicon.ico in the root directory of your server. You can use a favicon with any WordPress site on a web server that allows access to the root directories.

WordPress Version 4.3 or later

WordPress Version 4.3 implemented a Site Icon feature that enables favicons on your web site.

When you use the Site Icon feature, you don’t need to prepare the favicon.ico file by yourself, or modify your template file. All you have to do is navigate to the Customize screen and specify a square image that has a height and width of at least 512 px.

Later paragraphs in this article contain instructions for manually setting up your own favicon. However, it is highly recommended that you use the Site Icon feature (a feature that is built-in to WordPress) instead.

Follow the steps below to use Site Icon to set up a favicon for your site.

1. Prepare the image file. (It must be square, having a height and width of at least 512 px.)
2. Navigate to Administration Screen > Appearance > Customize
3. Click Site Identity
4. Click Select Image (located under the Site Icon subheading).
5. Click on the Upload Files tab, then click Select Files to upload the image file that you prepared in the previous step.

Creating a Favicon

A favicon can be created by using any graphics/image editing software that allows the saving of .ico files. There are also online services that will allow you to create a favicon for free.

The image should be clear and visually appealing. Ideally it should be designed to match your site’s brand image and/or content.

To prepare the image to be saved as favicon.ico:

1. Make the image square by cropping or adding space around it.
2. Resize the image to 16 x 16 pixels.
3. Save the file as favicon.ico.

If you’re using an online service to create your favicon (such as Faviconer.com or Dynamic Drive) follow the instructions provided by the site, and then download the favicon.ico image to your computer.

Installing a Favicon in WordPress

If your theme or your WordPress version does not support the Site Icon option described above, you can use this method to manually add a Favicon.

If there is already an old favicon.ico file in your current theme’s main folder, delete it using an FTP Client.

1. Use an FTP Client to upload the new favicon.ico file into your current theme’s main folder.
2. Upload another copy of your favicon.ico file to the main directory of your site (ex. http://example.com/favicon.ico). This will display the favicon in your subscribers’ feed readers.

In order for your favicon to show up in some older browsers, you will need to edit your page header. (Remember, the best way to edit your theme’s files is via a Child Theme. As you follow along with the following instructions, it is highly recommended that you create and modify the copy of header.php that is located in your child theme.)

1. Go to your WordPress Administration Screen.
2. Click on Appearance.
3. Click on Theme Editor.
4. Select the file called Header or header.php to edit the file.
5. Search for the line of code that begins with <link rel="shortcut icon" and ends with /favicon.ico" />. Overwrite it, if it exists, or add the following code below the HTML tag:

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

Save the changes.

How to create a favicon with a transparent background

Before implementing this method, please make sure that your source image already has a transparent background, which means it should be a GIF or a PNG. The rest of the steps are as mentioned above. The one difference in the code is that, instead of using a favicon.ico file, use favicon.png or favicon.gif instead.

Search for the line of code that begins with <link rel="shortcut icon" and ends with /favicon.ico" />. Overwrite it, if it exists, or add the following code below the HTML tag:

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />

To see your new favicon, clear your browser’s cache. You may need to restart your browser in order to see the new favicon.

Advantages of using .ico over .png or .gif

1. Compatibility – As of this writing, most modern browsers–except for iOS Safari and Opera Mini–support the .ico format.
2. Avoid 404 server errors – Virtually all modern browsers will request a favicon.ico, so it’s best to always have a favicon.ico file, to avoid a “404 not found” error.
3. An .ico file can hold more than one icon, so there is no need to include multiple files for 16×16 and 48×48 icons.