Creating a Favicon for Your Website

Creating a favicon for your website is a small detail, but one that shows your visitors that you care about your website and your organization’s image. A favicon is the icon that shows up next to your website title in a browser tab.

If you haven’t set a favicon for your WordPress website, you will see the default WordPress favicon when you visit your website:

WordPress default favicon

Looking for a quicker method for creating a favicon?

We explain a quicker way to set a favicon for your WordPress site here. The method described there has the advantage of being faster and simpler than the method outlined below. The disadvantage of the quicker method is that your image may not look as sharp on a high resolution / retina display, and you can’t include separate versions of your image to use based on the device chosen.

If you prefer to ensure you have the best quality image for all screens, keep reading to learn how to create a favicon for your website.

Start by choosing your image

The first thing to do to create your favicon is choose the image to use. In most cases, this is your logo, or a part of your logo, if it would be too small to be recognizable.

For example, for Minneapolis School Finder, their logo would not have been clear at a favicon size:
Minneapolis School Finder
So we decided to use the “M” from the logo instead:

Minneapols School Finder favicon

This keeps the site’s identity recognizable because the M is part of their logo, and using a small part of the image makes it easy for the visitor to see in the browser tab.

We used Photoshop to crop out the M, but if you don’t have Photoshop, you might want to try Photoscape X or PicResize. Make sure you choose an image that can be displayed in a square shape rather than a rectangular shape.

Creating a favicon

Once you have chosen your logo, or a part of it, to use as your favicon, upload it to x-icon editor. Follow the numbered instructions on the page to upload your icon.

create favicon with X-Icon editor

When you first upload your image, the program will often select only a small part of it. Use the handles of the box to drag and select the entire image, then click on OK.

select your entire image

Then click on Export to save the favicon to your computer. It will be saved as an .ico file.

export your favicon

Upload your favicon to your website

Using a file transfer program like Filezilla or your web host’s file management program, add your favicon.ico file to the root of your website (often a folder called “public_html”):

Tell your website to use your favicon

In your child theme functions.php file, add the following code to tell WordPress to use your favicon on the front end of your website.

// Favicon for the website
function my_favicon() {
     echo '<link rel="shortcut icon" href="' . get_bloginfo( 'wpurl' ) . '/favicon.ico' . '" />';
}
add_action('wp_head', 'my_favicon');

// Favicon for admin panel
add_action('admin_head', 'my_favicon');

Troubleshooting your favicon

You may notice that you’ve uploaded your favicon and added the code to your functions.php file, but you can’t see your favicon in your browser. You still see the default WordPress icon, or even nothing at all.

  • Be sure to clear your website cache after adding your favicon and adding the function
  • View the source code for your page, and use control-F to search for favicon.ico, to be sure it shows up and the link is correct
  • Verify that your favicon is working properly by going directly to its path: https://yourwebsite.com/favicon.ico
    In some cases, visiting that link will encourage your browser to find the correct favicon.
  • Clear your browser cache, and / or use another browser or an incognito or private window to view your website.

What’s next? Creating your Apple Touch icon

If you’ve successfully added your favicon to your website, see our tutorial about how to create your Apple touch icon.

Looking for a quicker way to add your site icon?

If this sounds too complicated or time-consuming, WordPress includes a quicker way to add your site icon. If you’d rather have us add your favicon so your site’s brand is recognizable in every detail, get in touch.

Like it? Share it!

FacebooktwitterredditlinkedinmailFacebooktwitterredditlinkedinmail

Alisa Cognard

Alisa was one of the first team members to join Red Earth Design, Inc. in early 2004. From data entry, she progressed to MySQL database manipulation and PHP coding. Alisa is responsible for all kinds of odds and ends: installing new websites, adding features to them, programming databases, PHP coding, website troubleshooting, website security, and organizational tasks for Red Earth Design.

Leave a Reply

Your email address will not be published. Required fields are marked *