How to Create a Favicon

You may be asking yourself, what is a favicon? A favicon (short for “favorite icon”) is the small image that is displayed in the top left corner of your browser tab. Favicons are also displayed in the URL bar and in bookmark lists. While a favicon is not a necessity, it  is a small bit of graphic design that can make your website instantly recognizable to your users.

A favicon is really nothing more than a 16 pixel by 16 pixel graphic. The catch is that the file has a .ico extension. This used to make creating a favicon somewhat tricky as standard design programs (Photoshop) didn’t offer .ico as an option when saving a graphic. In the past the solution was to create your 16 x16 pixel graphic and then rename it to favicon.ico.

Favicon ZoomLuckily there is an easier solution – many online services that will help you create a favicon, our favorite is http://www.favicon.cc/. This site will walk you through creating your own favicon from scratch or from an existing image and give you an easy option to download your finished product. One thing to note about using an existing image like your business logo is that the image generation software will sometimes crunch the original file and the end result will be less than desirable. When you only have 16 square pixels to work with, it doesn’t give you much room for things like fades or gradients. A quality favicon is usually comprised of bold solid colors and a simple design.  It usually pays off to design your favicon pixel by pixel rather than relying on image compression software. However, if you are short on time and already have a decent graphic to use then you will probably be fine. It often comes down to trial and error to get a really sharp looking favicon.

Once you have your favicon.ico file and you are happy with the way it looks, you will need to upload the file and call it from your HTML. You can upload the .ico file with an FTP program or through your host’s cpanel. It is best practice to upload the favicon.ico file to your root directory, the same level that your index file is located. If your site is hosted on a subdirectory, just upload the file to the root of the subdirectory.

After you have uploaded the file you will need to call it from your HTML in the header section of your page. This can be done anywhere between the open and closing <head> tags. If you have a static site, this will need to be added to every page. If you have a dynamic site like WordPress or Joomla, then you will only need to update the header file (header.php in WordPress).

Here is the code to call your favicon:

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

Note that this code will only work if the favicon.ico is located in the root directory – you can edit the href if you have the file in another directory.

Finally, you will need to test to make sure everything is looking good. Open a web browser and point to you URL, you should now see your new favicon. If you don’t see it, try refreshing your browser cache or even try a different browser from what you normally use. Favicons often get cached so try a few browsers before trouble shooting further. If you have tried everything and you just aren’t seeing updates you can force refresh the favicon by adding ?v=2 to the end of the file name in the HTML call. Note, do not rename the file, simply add these 4 characters to your HTML.

<link rel="shortcut icon" href="/favicon.ico?v=2" type="image/x-icon" />

If you do see the favicon, but don’t like the way it looks, go back to the design phase and get creative. Once you have a new design, simply overwrite the file on your host.

Congratulations, you now have a great way for your users to instantly recognize your site! Of course, you can always contact the web team at iSupportU if you’d like us to get your site set up on a favicon.

Posted in

Leave a Comment