Favicons, short for favorite icons, are a small but significant part of branding a website. They are used to display a 16×16 or 32×32 pixel image before the page title in your browser. Favicons are also used for bookmarks in browsers and touchscreen devices.
Over the last few years, it has become commonplace for people to browse the internet using multiple tabs. Which is why I believe the favicon has become more important; you need to make your website stand out in a crowded browser.
In this article, I would like to show how to create a favicon image and add it to your WordPress website. The whole process should only take you five to ten minutes.
The ICO Image File Format
Favicons were initially introduced with Internet Explorer 5 in 1999. Website owners had to save the file as favicon.ico and place it in the root of their domain e.g. www.elegantthemes.com/favicon.ico. Today, all major browsers support the use of PNG and GIF images for favicons. JPEG images and animated GIFs are also supported by Firefox, Google Chrome, and Opera. Despite this, it is still better to save your favicon image in the ICO file format.
Firstly, PNG and GIF images are not supported by some older browsers. Secondly, modern browsers will always try and look for a favicon.ico file in the root of your domain; even if the favicon has not been declared using a <link> shortcut (more on that later). If a favicon.ico file is not located at the root of your domain, it may return a not found error to the browser.
Another fantastic feature of the ICO image format is the ability to add multiple sizes to the one file. For example, you could save a favicon image with 16×16, 32×32, and 48×48 images. This allows browsers to choose the appropriate one when displaying your favicon.ico. For example, some browsers will use the 16×16 favicon image, however Internet Explorer 10 uses the 32×32 image.
How to Create a Favicon Image
The best way to create a favicon.ico image is to first create a square PNG image. Like PNGs, the ICO file format supports transparency. Therefore, by saving your favicon in the PNG format initially, you can keep transparency in your converted ICO image.
It is important to keep your favicon image simple as it will be displayed in the 16×16 pixel format in most browsers. Use your website’s logo or main symbol if you can. For example, Apple use their iconic symbol of an apple. If your logo does have a symbol, you could use the first letter of your website name.
Few graphic applications have support for saving images in the ICO file format. There are workarounds to this, however the easiest solution is convert your square image using an online favicon generator.
There are many favicon generators available online, such as Convertico and Favicon.co.uk. Unfortunately, most of these do not support alpha transparency. They will therefore replace any transparent areas with a white background.
The solution that I have use for many years comes from Dynamic Drive. In addition to supporting transparency, their favicon generator tool also allows you to merge 32×32 and 48×48 images into your favicon.ico file. All you have to do is ensure the PNG or GIF image that you upload is larger than 48×48 pixels.
Save the favicon.ico that Dynamic Drive generatrs to your computer. It will look something like this:
How To Add A Favicon To A Website Using Elegant Themes
If you are using an Elegant Theme, then uploading your new favicon image is easy! In the ePanel Theme Options page, look for the Favicon settings box. Here you can input the URL of your favicon image, or click the Upload Image button to upload your favicon.
Once it has been uploaded, click the “Use For Favicon” button to automatically input your favicon URL into the settings box. That’s it, you’re done!
How To Add A Favicon To A Website That Isn’t Using Elegant Themes
If you aren’t using an ET theme, don’t worry, I will still go over how to integrate your favicon images in various situations. Many WordPress themes now come with a favicon uploader that lets you upload your favicon directly through the admin area just like our themes do, so be sure to check your theme options page first.
If there are no favicon settings in your theme options, then your WordPress theme may come packaged with a favicon image. Many theme developers include an example favicon.ico image in the root of the theme, or in the images folder. If your theme does have a favicon.ico file located within the theme files, your theme will already be configured for favicons.
Therefore, all you have to do is overwrite the existing favicon file in order to display your custom favicon. You can do this using a File Transfer Protocol client such as FileZilla, or through your host’s file manager.
If your WordPress theme has no existing support for favicons, you need to specify where your favicon is located. Thankfully, this only takes a minute to do. All you have to do is insert the following code into the <head> area of your website header (e.g. header.php):
<link rel="icon" type="image/x-icon" href="/favicon.ico">
The type attribute specifies the kind of image that you have used for the favicon. You can see how to define the image attribute below:
- ICO = image/x-icon
- PNG = image/png
- GIF = image/gif
- JPEG or JPG = image/jpeg
If you are placing the favicon.ico file in the root of your theme folder (e.g. www.yourwebsite.com/wp-content/themes/twentyfourteen/favicon.ico), you would use:
<link rel="icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">
If you place the favicon.ico within your theme images folder, you would use:
<link rel="icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico">
Use this code if you upload the favicon.ico image to the root of your domain:
<link rel="icon" type="image/x-icon" href="http://www.yourwebsite.com/favicon.ico">
Once you have integrated your favicon on your website, you should see it in the browser tab at the top of the page. If it is not displaying, visit the URL of the favicon image and refresh the page. You may find that it will show correctly when you view your website after doing that. If not, the favicon image location is probably incorrect.
There may be a temptation to just upload a favicon.ico to the root of your domain and not go through the hassle of defining it through your WordPress theme. This is fine for most browsers, however some browsers do not search for a favicon image at http://www.yourwebsite.com/favicon.ico. As such, you need to define it.
I hope you have found this tutorial useful. If so, I encourage you to subscribe to the Elegant Themes Blog for future updates. 🙂
Article thumbnail image by davooda / shutterstock.com