Home > Help Center > Applications > WordPress > Add a Favicon to Your WordPress Site

Add a Favicon to Your WordPress Site

A favicon (short for favorite icon) is an icon associated with a website.

Favicon has a proven and positive role for brand recognition, for website identification and for improving user experience.

Browsers that provide favicon support typically display a page's favicon in the browser's address bar, in the history of visited pages, next to the page's name in a list of bookmarks and elsewhere to help identify a website visually.

wordpress favicon

Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, also, favicon is used as application icon on mobile device.

The favicon is usually a 16x16 pixel square graphic and is saved with .ico file extension.

In this article we'll show you two very different ways to add favicon to your WordPress site. Select the one you find it more convenient.

WordPress Site Icon Feature

WordPress offers Site Icon feature that enables favicon in your web site. It is recommended that you use the Site Icon feature, instead of following other favicon enabling methods.

Follow the below steps to set favicon in your site.

Prepare image file. It must be square, and at least 512 pixels wide and tall.

For our example we downloaded WordPress original logo from Google Images and we changed the default color to distinguish it easily between other browser tabs.

Note: When using images on your project always pay attention to the image license. Always!

Go to Administration Screen > Appearance > Customize:

wordpress favicon

Click Site Identify:

wordpress favicon

Click Select Image at Site Icon section:

wordpress favicon

Upload the image file you prepared in the above step from Upload Files tab screen, and click Select button.

wordpress favicon

wordpress favicon

The favicon will appear in the Site Icon section:

wordpress favicon

Click Save & Publish button.

Open the site in new tab – both tabs (administration and website) display the favicon nicely:

wordpress favicon

If you activate the site and open the source code with CRTL+U you'll see these lines of code:

wordpress favicon

The WordPress has done additional work in the background to create appropriate additional copies of the favicon to be used by other services.

Adding WordPress Favicon by modifying PHP files

First we'll destroy the favicon from the previous example by removing it from Site Icon section and deleting from Media library.

Create a Favicon

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

By cropping or adding space around the image, make the image square.

Resize the image to 48x48 pixels (the default size is 16x16 px but browsers will shrink the image accordingly and if a bigger image size is needed let's say in a desktop bookmark the OS will not stretch and thus damage the quality of the 16x16 px image but will use the bigger image instead).

Save the file as favicon.ico.

If you're using an online service to create your favicon follow the instructions provided by the site and then download the favicon.ico image to your computer.

Upload the favicon on the server

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

With an FTP Client, upload the new favicon.ico file into your current theme's main folder.

Upload another copy of your favicon.ico file to the main directory of your site (ex. http://hostpulse-demo.com/favicon.ico). This will display the favicon in your subscribers' feedreaders.

Modify your functions.php file

In CPanel using File Manager navigate to active theme folder:

wordpress favicon

and open functions.php file.

Scroll down to the bottom of the file and add this code:

// Function Add Favicon
function add_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/images/favicon.ico';
  echo '<link rel="shortcut icon" href="' . $favicon_url . '" />';
}
add_action('wp_head', 'add_favicon');
add_action('login_head', 'add_favicon');
add_action('admin_head', 'add_favicon');

Make sure the path to favicon.ico is correct. If you want to use the image from the theme folder the correct path will be:

$favicon_url = get_stylesheet_directory_uri() . '/favicon.ico';

Save the file and refresh both administration and website – favicons should work as expected.

If you check the website source code though you'll find just one line of code:

<link rel="shortcut icon" href="http://hostpulse-demo.com/wp-content/themes/twentyeleven/images/favicon.ico" />

Note that the favicon is enabled only for the active theme.

If you activate another WordPress theme you must enable favicon as well following the same steps outlined here.

Advantages of using .ico over .png or .gif

Compatibility - All browsers, including IE 5.0, support .ico format.

Avoid 404 server errors - All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico so it's best to always have a favicon.ico file, to avoid a 404 not found error.

#wordpress #images

Still not finding what you're looking for?

Contact our support team with any additional questions or concerns.

Contact support