How to install favicons and mobile icons on your WordPress site

Favicons are those cute 16 x 16 pixels images that make your site easily identifiable when multiple browser tabs are open. More and more WordPress sites are using favicons are as a tool to establish visual identity at first glance. It’s definitely one great way to enforce brand consistency and make sure that your pages or posts stand out from the crowd.

Getting favicons set up should be a priority for every WordPress site owner. The good news is that it takes just a few minutes of your time (sometimes even less), and you don’t even need to hire a graphic designer or spend money to get it done. This post not only points out the importance of favicons for your burgeoning brand, but also lays out elaborate steps that you can follow to get pretty favicons and beautiful mobile icons set up for your site.

Favicons – a little background check

Favicons were first introduced with Microsoft’s Internet Explorer 5 browser back in 1999. To make it work, website owners were required to strictly save the file as favicon.ico, and then put it in the root folder of their domain (e.g. wpdiscounts.com/favicon.ico). Fast forward to today and all major browsers (including Safari, Chrome, Mozilla Firefox, Opera, etc) support favicons in diverse file formats such as PNG, GIF, and JPEG. However, we still recommend that you save your favicons in the standard ICO file format.

Here’s why?

Some of the older browsers do not support GIF or PNG images. Furthermore, browsers have been conditioned to always look for the favicon.ico file inside the root folder of your domain. If this file is not located in the root of your domain, it might return a ‘not found error’ to the browser.

Another key reason why you should stick to the ICO file format is that because it gives you the ability to use multiple file sizes for one image. For instance, you may save your favicon image with 16 x 16, 32 x 32, and 48 x 48 pixel images. This gives browsers a little bit of flexibility to choose the most appropriate favicon. As it happens, different browsers have different preferred sizes.

Note: You don’t really have to follow this old method (placing your favicon in root) today. As you’ll see below, there are easier and more straightforward ways to go about it.

Installing a favicon

There are various methods in which you can install favicons for your WordPress sites. To make it all easy for you to understand, we have basically simplified it all to two options: The hard way, and the easy way. If you want to do a little bit of background learning on how favicons work, read on both options. However, if you just want to get it done and enjoy the results, you can jump over to option 2.

OPTION 1 – THE HARD WAY

Create a favicon image

You may choose to use your site logo as the favicon icon for your site (this works better when you have a simple logo with very limited details). Alternatively, you can find a suitable image and save it as a square PNG file using Photoshop, GIMP, or any other image manipulation program at your disposal. Favicon images work better when they have a transparent background. Just like the ICO file format, PNG supports transparency. However, you’re free to use an image with a background color of your choice and work with any common file format (including JPEG and GIF formats).

Note: if the image you want to use for your favicon is rectangular, make sure to crop it so that it has square dimensions.

Add the favicon to your WordPress theme

Most WordPress themes have a favicon uploading functionality within their customization options. First things first, go to your theme options and customization sections to check whether your theme has a favicon uploader like the one shown on the right.

If one is available, you should simply upload the file you created above, and you’ll be ready to go.

Manually add your favicon

Even if your theme isn’t packaged with this functionality, many other WordPress themes come with a pre-installed favicon that you can just simply replace. This placeholder favicon is usually placed as a favicon.ico file inside the root of the theme or within the images folder. All you need to do is overwrite this file in order to show your custom favicon. Check to see if your site already displays a template favicon that you didn’t install yourself.

If your site has no current support for favicons, you’ll need to upload one and write some code to specify where it’s located. Sounds like much? No worries – it just takes a minute of your time. All you’ve got to do is insert the code below into the <head> section of your website header (i.e. the header.php file).

<link rel=”icon” type=”image/x-icon” href=”/favicon.ico”>

The type field is used to specify your image file format. You have the following options based on the file format of the favicon you uploaded.

• ICO = image/x-icon
• GIF = image/gif
• PNG = image/png
• JPG or JPEG = image/jpeg

If you upload the favicon to the root of your domain, then you’d tweak the code a bit so that it looks like this:

<link rel=”icon” type=”image/x-icon” href=”http://www.yourwebsite.com/favicon.ico”>

Once you’ve done this, simply refresh your browser tab to see if the favicon you just added reflects. If not, try a different browser either on your PC or mobile phone. If it still doesn’t show, you probably did something wrong and need to work with the easy way out explained a few paragraphs below.

What’s wrong with doing it manually?

If you love to make tweaks on your WordPress site, you’ll probably enjoy using this method to install favicons. But there’s just one thing wrong with it – it might not create a responsive favicon. That is, your favicon will only show on web browsers, but might not be available as a mobile icon on Android, iOS or Windows smartphones.

OPTION 2 – THE EASY WAY

If you don’t want to go through the hustle of adding code to get your favicon showing, there’s an easy way out, and it involves using a reliable, effective plugin. Philippe Bernard, the founder of RealFaviconGenerator plugin, says that most favicons don’t look great, and they aren’t mobile friendly by default. Philippe’s popular plugin makes it possible for site owners to create excellent PC favicons, as well as decent mobile icons.

Here’s how to go about it

a) Create a square image that’s at least 260 x 260 pixels in size. You might make it 520 x 520 pixels if you want. The important thing is that it should meet the minimum size requirement, and should be square as well.

b) Install and activate the RealFaviconGenerator plugin to your WordPress site.

c) You should be able to access this plugin from Settings in your WordPress dashboard (Settings>favicon). Alternatively, you can just directly navigate to Appearance>favicon.

d) Upload your favicon image to see a screen that allows you to edit how your image looks as a mobile icon on Android and iOS.

You might notice that transparent images usually don’t look so great on iOS devices. If you deem it necessary, add a background to your favicon. The plugin’s favicon editor allows you to choose a background color and preview how your favicon will look like. Better yet, you can specify different colors and settings for different devices. That means that you can independently optimize the appearance of your favicon on iOS devices, Windows devices, Android, Chrome, etc. Feel free to play with the settings and options on this screen to see what works best for your favicon.

e) Once you have got everything configured to your preferences, simply click on the ‘Generate your Favicons and HTML code’ button located somewhere near the bottom of your screen. This essentially does the hard work on your behalf and generates the HTML code that’s added to the header of your site so that your favicons show on PC and mobile devices. RealFaviconGenerator will give you a notification that the favicon has been installed, and shows you a preview of how it looks on iOS, PC, Windows, Android Chrome, Safari, etc.

What we love about this plugin is that it’s easy to use, and does a great job creating lovely favicons and mobile icons for your WordPress site.

In addition to RealFaviconGenerator, other cool favicon and mobile icon generating plugins for WordPress include Heroic Favicon Generator, All in One favicon, Favicon Rotator, MultiCons, and CBnet.

Conclusion

Just like with many other tasks, WordPress makes adding favicons a piece of cake. Better yet, you don’t need to pay a designer to do anything for you, and most of the cool favicon generator plugins available are 100% free. So there’s no reason why you shouldn’t take advantage of this important tool to boost the visual identity of your website. It just takes a little bit of your time, get it done!