What is a Favicon and How do I Add One to my Website?

by Brittany Horton on February 29, 2012

Content Solutions Favicon in Firefox

Content Solutions Favicon in Firefox

We get this question a lot “How do I get that little icon next to my URL in the browser?” It is commonly called the favicon, the URL icon, or bookmark icon.

What is a Favicon?

If you are not familiar with what we are talking about, take a look at the image to the right; the small icon next to our web address URL is called the favicon. It is a small icon, usually 16 pixels square, that displays next to your URL in a browser, as well as when a bookmark is made of your URL. Most websites will use this opportunity to expand their brand visibility and will include a small version of their logo or a popular icon that they commonly use.

How do I create a Favicon?

Creating a favicon can be a very simple process. First create a png or jpg of the basic of your logo, if you have a large or complicated logo, try to parse it down just to the simple elements. For example, for the Content Solutions logo, we removed the words “Content  Solutions” (since they would not be visible at 16 pixels by 16 pixels) and chose to use just the asterisk element of our logo, which we also use in various other locations. Once we saved just the astisk in our logo as a jpg, we like to use a nifty website that will convert your jpg or png into a favicon.ico file, http://favicon.htmlkit.com/favicon/. You can choose your file, and then download your favicon.ico. If your image is not already square, this converter will automatically stretch your image to fit the dimensions, if this stretches your icon, you can click the blue link “Don’t stretch image to fit favicon.” Once you have gone through some of the options you can click on “Download Favicon Package.” This provides a compressed zip file that you will need to be able to un-compress. When you un-zip the file, you will see the different versions of the favicon that you now have. Make sure to save these in a folder on your computer so that you are able to upload it to your website, or in the future, if you need it again, you will have it available. We suggest to always use the .ico file format, as other formats are not compatible with all browsers or versions.

How do I add a Favicon to my website?

If you are using our favorite Content Management System, WordPress, for your website, then there are a few things you can do to add a favicon. First, you can try to add your favicon.ico file that you just created to both the root directory of your wordpress blog (the smae file that your wp-content, wp-admin, and wp-includes files are in) as well as adding it to your themes root folder. Sometimes your theme may already have a favicon.ico included, and you can write-over that file to replace it with your very own favicon.ico file. Or, you can simply download a favicon plugin, we like the All in One Favicon Plugin. Follow the plugins instructions to either link to your already uploaded favicon.ico, or to upload a new one. Even if you are or are not using WordPress, you can almost always add a favicon by simply dropping your favicon.ico file into the website’s root directory. If that does not work, try using this code in your home page “<link rel=”shortcut icon” href=”http://example.com/favicon.ico” />”.

Note: Something interesting about favicons is that different browsers use them differently. In Firefox, Internet Explorer, and Opera, you will see the icon in both the tab and next to the web address. When in Chrome, you will not see the favicon next to the web address, but you will see it next to the name in the tab.It is the opposite with Safari. It will not be displayed with the tab, but it will be in the web address bar.

If you do not see your favicon, take a look at a few of these tips. You may not be able to see your favicon if you are using a cache add-on or plugin that helps speed up your site. Try clearing your cache in your browsers history and re-load the page to see if you now see the icon. It may also not show because a theme or other add-on or plugin is already using this ability. If this is the case, you will want to contact your theme or plugin support to see if you can write over this. In most cases if you go into the theme that you are using and find the favicon.ico that they are using and write over it, then you will be able to see your new favicon.ico.

Now, you may ask, what about creating an iPhone or iPad icon for my website? Check back soon for our next blog post! If you would like assistance creating and uploading a favicon to your website, feel free to contact us, and we can take care of this for you!

Leave a Comment

Previous post:

Next post: