A Beginner's Guide to Add Favicon to Your Site

When looking at a site there are a lot of little details that make the site that much more professional, and one of the best ones – and ones that does not get as much fanfare as it should – is favicon. Favicon is the simple, easy way to identify your site without having to look on the address bar or other areas of the site that are larger, and more onerous. The favicon is a really simple tool, especially if you have several browser tabs open. That said, big companies can invest in graphic artists to make great favicons, but you the plucky site designer don’t have that luxury. The good news is you can create and add a favicon to your site, and that will give you the benefits that the big sites get in terms of reputation alone thanks to have a favicon present.

Adding a favicon to your site is something you must do if you are looking for your site to have credibility. Your site becomes more usable with a favicon and this leads to a better user experience. Favicons help when you have lots of tabs open, as said earlier, but they are also the tiles on your phone or tablet for you to select the app. However, creating favicons doesn’t just happen. There are a lot of questions you need to answer, including whether you want a jpg vs png, reduced size of your current logo, or a spin off of your logo? Learning the answers to these and more questions is the key to making sure that when you create a favicon, you are doing something that will most definitely add value to your site. Let’s read on to learn more about creating the right favicon for your site.

Creating Your Favicon

The first thing you need to do is decide on what you want as a favicon. There are some sites that have smaller versions of their logo as a favicon while others have done a spinoff. A great example of the spinoff is the Facebook favicon – this is just a white “f” in the Facebook font surrounded by a sea of blue. This favicon does everything needed – the blue connects with Facebook just as much as the font from the letter “f.” These simple details are what you need to figure out, and you need to figure it out in a way that ensures your brand will be instantly recognizable to someone. The Facebook “f” and Google “G” are great examples of this. Another great favicon is the PNC Bank one. This is a favicon of their symbol but reduced in size.

Once you have the idea of what you want, the next step is using the right software to create it. A favicon must be at least 512 pixels, and these dimensions include both the width and the height of the favicon. Therefore, you need some type of software allowing you to control how many pixels an object would be. For simple favicons, Paint 3D would do the job effectively enough, but if you want to go to the next level, Adobe Photoshop is the best method. The bottom line is for WordPress and other site builders, your favicon must be a perfect square.

Once you have figured out the type of favicon that you want and then have created the favicon, the next step is to add a favicon to your site so you can get that high level of professional branding.

Adding Favicon to your WordPress Site

The reality is if you have WordPress 4.3 or higher, it is a little bit easier to add favicon to your wordpress site than it would be for WordPress 4.2 or lower. That said, both will be talked about here and this way you can be sure that you have favicon on your site. As stated earlier, this is a small but essential way to make your site stand out when up against the traditional big brands that do favicons as an afterthought

On WordPress 4.3, life is really easy with the Site Identity tab. The first thing you need to do to access this is head to the admin area of the page. Once there, go to Appearance and then click on Customize. When you get to that part of the admin area, this is where you select the Site Identity tab. Once you are in this area, go to the header and this is where you can customize what appears there, including your favicon. Just upload your favicon file, and if WordPress needs you to crop it, you can take care of that action at this time. After that, just save it and you can preview your site with your favicon where it should be.

Older WordPress sites that run on WordPress 4.2 or lower will have a different procedure. The first way to do so is using FTP. You would have to upload your favicon to the site’s root directory. Then you need to use the following HTML code – just replace www.yoursite.com with whatever your domain is and it is best to name your file “favicon”:

1 < link rel= "icon" href="https://www.yoursite.com/favicon.png" type="image/x-icon" / >

2 < link rel="shortcut icon" href="https://www.yoursite.com/favicon.png" type="image/x-icon" / >

Your theme would need a header.php for this to work, but if you don’t have it, don’t worry. There are lots of plugins that can help, including the Install Headers and Footers plugin. Once the plugin is activated, you would go to Settings, then go to Insert Headers and Footers and there is where you would paste the code from above, though modified for your site.

Of course, not everyone wants to deal with FTP, and that is understandable. There is a plugin that could help, and All In One Favicon will do a good job getting you the favicon you want without all of the fuss needed with the code and everything else associated with it. Of course, WordPress 4.3 is the easiest method, but even if you don’t have it, the 4.2 or lower isn’t that onerous.