A favicon, or shortcut icon, is that really small image that shows up next to the website title in a browser. Yes, it’s very tiny, but it helps visitors to your site easily identify your brand. Most people probably never even notice favicons, but if you glance up at the tabs in your web browser right now, this will begin to make more sense. If you are like most folks, you have multiple tabs open at any given time. As the image below illustrates, favicons help you quickly and easily identify what sites you are on within those tabs. Also note that favicons are used when users bookmark your site in their web browser.
Creating a Favicon
This is actually a very simple process. Open your favorite graphics editor and start with a square canvas of 128×128 pixels (we will resize this later). Create your favicon and save it in case you need to make edits later. Remember it is best to keep this image very simple. After all, it is very tiny and there isn’t a lot of room to work with. Once you are ready, resize it to a 16×16 square and save it as a PNG file.
While most modern browsers will display PNGs, older versions of IE will not (wait, you’re not still using Internet Explorer are you? Different article…). To ensure that your favicon will work properly in all browsers, I recommend that you convert it to an ICO file. Need help with that? Check out this Instructables video.
Add Your Favicon To Your WordPress Site
Once you have your completed ICO file, name it “favicon.ico” and upload it to the root directory of your website, and place this code in your WordPress theme’s header.php:
<link rel="icon" href="http://www.yourwordpresswebsite.com/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://www.yourwordpresswebsite.com/favicon.ico" type="image/x-icon" />
That’s it. If your favicon isn’t showing properly, you may need to clear your browser’s cache. If it doesn’t look like you expected, go back to your original 128×128 image and make edits. Just repeat the process until it’s perfect.