What’s that logo in the browser tab?
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:
- Uploading a gif file rather than the ico file. The file name must be favicon.ico.
- Not using the binary transfer option on your FTP client. It’s a binary file so don’t transfer it as ascii.
- Putting it in the wrong directory, see notes above.
Great post – I always wondered how to do this. Thank you so much.
You are welcome! Sometimes you just have to dig in and figure it out.
Note that one alternative way to do this is to add the code to your functions.php file and use “add_action” to have the code added to your header code. This is can be desirable because it isolates your customizations and prevents them from being overwritten, especially if you are not using a child theme.