How to Add a Favicon to WordPress
Whether your WordPress site is designed to be a personal blog or a company website, you want people to instantly recognize it and connect it to you. Increasing brand awareness is one of the most basic steps to bringing more people to your site and keeping them coming back. And adding a favicon to your site is one of the simplest ways to do that.
What is a Favicon?
A favicon is that little picture that appears beside the site name on the browser tab of a site. This is especially useful if a user has a lot of tabs open, which forces the site names out of view. Instead of losing your tab, they can identify it by the favicon.
Favicons are an important way that people learn to recognize your site and identify your brand. If they mark your site as one of their favorites, the favicon will appear in their bookmark bar as well. Another important aspect of incorporating a favicon is maintaining consistency. If you use the same image for you favicon as you use for social media sites, business cards, and anywhere else that you can incorporate a logo, it adds a sense of cohesion to your brand. It also helps build customer trust.
That’s a lot to expect from one little image, but studies back up these findings. One of the most common mistakes among WordPress users is overlooking the importance of the favicon. If you are one of those users making that mistake, we’re going to fix that right now. And it’s just going to take a couple minutes and a few easy steps.
Creating a Favicon
Favicons are square images. Because there are so small, simple logos work best. If your site does not have a logo, you can use the first letter of your site’s name. Some of the best recognized favicons are just letters, like Google’s g or Facebook’s F. Just downsizing your logo may not be the best favicon. This often makes the picture look blurry. You may need to edit the image on the pixel level in order to create a sharp image with so few pixels.
Listen to the Latest Episodes Right Now.
16×16 pixels or 32×32 pixel images are the most common sizes for favicons. It is almost impossible to work with an image at this size. Creating a larger version of it will make it much easier for you to work on it. Once you’re all done, resize it to a smaller format.
When they were first developed, favicons had to be saved as .ico files. These days, all browsers except some old versions of Internet Express will display favicons saved as PNG and GIF files. A few browsers will also process JPEG and animated GIFs. To be universally displayed, however, ICO files are still the best. One of the biggest advantages to ICO files is that images can be saved in multiple sizes, allowing browsers to choose the size that will have the best display.
You can use whichever image generator you are most comfortable with to design your favicon. The problem is, very few of them support ICO files. The easiest way to deal with this is to use an online favicon generator. You can take your pick from the many different generators available. Dynamic Drive is quickly becoming the most popular.
Adding a Favicon to WordPress
Once you have your favicon saved in the correct format, upload it to your site using . Then you need to insert this code into your header.php file:
You can insert this code one of two ways. If you know how to find your themes header.php file, you can insert it directly in there. The file should be under your theme editor. Once you have found it, the code can go anywhere between the tags. Some themes do not include access to your header.php file. If your theme is one of these ones, then there is an easy workaround. All you have to do is install the plugin Insert Headers and Footers. Once the plugin is activated, go to Settings>>Insert Headers and Footers and put the above code in the header section. Make sure you replace YOURSITE’SURL with your actual URL, save your settings you’re good to go.
If you don’t like using FTP to upload your favicon image, you can go to your web host to avoid it. Once you have logged into hosting account, find the root directory. Upload the image directly into your root directory. Make sure that it displays as YOURURL.com/favicon.ico or the code won’t work.
If your favicon isn’t visible after you’ve entered the code and refreshed your page, the problem may be with your uploading. It is very important that the file image end up in your root directory. If it isn’t there, you will get an error message and your favicon will not display. If you are having trouble getting it to display, go back and make sure that the image file is in the right place.
Remember, any time you are editing the code files of your site, it is a good idea to copy and paste the entire file into Notepad. This way, if anything goes wrong, you have your old code ready to put back in place to keep your website running smoothly until your figure out what went wrong with the new code.