With many of the websites you visit today, you’ve probably noticed that a little image or logo shows next to the URL and in the browser tab. The question is how to get that an icon showing up for your website? That little image is called a favicon and it dates below to early Internet Explorer days when it was used in the IE “favorites” menu. Fast forward to today, and now most modern browsers support it and it, in my humble opinion, has become a “must have”. Having your logo show up as browser tab image and next to your website’s URL reinforces the branding of your website. In fact I get annoyed these days when I can’t instantly identify a browser tab I have open by the picture or the page title, so it was high time I installed one for this site.
Generating a Favicon Reflecting it’s Windows roots, a favicon is displayed for your website if there is a binary file named favicon.ico in the root directory of your website. There are many ways to generate a favicon.ico file. Graphical programs such as GIMP will generate one for you, and if you have a development environment installed you might be able to generate one as well. There are also online generators. I used one called favicon.cc. I just uploaded an the image I wanted to use and it converted it to an favicon.ico file I could download.
WordPress Favicon Installation Once you have the file, you’ll need the ability to FTP binary files (usually a setting in the FTP client) to your webserver. Where you put the file is dependent on the theme you are using. Some themes will explicitly reference the favicon (usually in the header.php file) in a line of code that looks like this:
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico" /> In that case you will want to put the favicon.ico file into the directory specified in the code (usually the images directory as in the above). Explicitly loading the favicon.ico file is considered more “correct” as older versions of browsers may not proactively look for the file. Otherwise you should put it in your current theme’s main directory. For the feedreaders you may also want to put it in the main directory of your website.
Favicon Not Showing Up Once you have added your favicon to your WordPress installation, check that it shows up. You may need to stop and restart your browser (refreshing doesn’t seem to do it). Check that it shows up in a second browser before concluding it’s not working. Common issues:
Kathy Alice Brown is a traffic and conversion expert specializing in SEO, Copywriting and Facebook Ad Campaigns. In her spare time she loves to get outside.