Have you ever seen these nice icons that are next to the browser URL address bar? Well today I want to show you how these are added to your website to further promote your brand identity.
So what is favicon? Well if you break down the word it is fav + icon. You already know what icon means so what does “fav” mean? If you haven’t figured it out already, it is the shorten word for favorites. Favorites are links that you can save on your browser to quickly pull up a webpage. Some browsers call it favorites and some call it bookmarks. With the favicon, it displays next to the URL link to quickly identify the site that you’re on.
With that said, it would be beneficial to utilize the favicon on all your websites to further extend your brand identity. Unfortunate for many websites, I still see blank favicons around. Don’t let that be you.
So what is the process of creating a favicon and implementing it on your website? Well it turns out to be very easy.
STEP 1 (Creating the Favicon)
Open up your favorite image editor and create a new document with the size 16 X 16 pixels. That is the maximum size of the favicon. Then create the icon of your choice. Most people would put their logo here. Just make sure to create something memorable that people can associate the favicon to your company identity. Once that is done you can save it out as a .gif, .jpg, or .png..etc.
*Note: you can also create the favicon with a favicon generator which you’ll see in the next step.
STEP 2 (Generate the Favicon)
In this step you will generate the favicon by converting your image file to a .ico file with the help of a 3rd party favicon generator. You can use a software to do this but I found it simple to just go to a website to convert it for me. In this example I am using Favicon Generator.CC website to generate my favicon.
As I mentioned in STEP 1 that you can even create the favicon from here if you like. Let’s assume you’re using your own graphic you created in the previous step. You would then click on “Import Image” and you will see a dialog box prompting you to choose the location of the file. Since you created it to exact size, choose “Keep dimensions” as the option and then click upload.
You should now see your graphic loaded in the image box in front of you and if you low down a little bit you should see a preview of what your favicon would look like next to the URL address bar.
Ok once that is done go ahead and download the favicon and save it to your root folder of your site and name it favicon.ico. So if your site URL is http://example.com/ then save it there.
STEP 3 (Including it on your Website)
In this step we will put a line of code on your site to include your favicon. Some servers will pick it up automatically but just to be sure, we will add in a line of code to help it along. Within your head tags of all the pages you want your favicon to show up on, enter the below line of code.
HTML:
<head> <link rel="icon" type="image/x-icon" href="favicon.ico" /> </head>
At this point you may not see the changes yet as favicons are cached. So what you do is you could either wait for the server to refresh or you can delete all your browser’s cache and the next time you load your website you should see your new favicon loaded.
Congratulations! You have successfully created and loaded your favicon…
Don’t name you favicon “favicon.ico”, it doesn’t display in all browsers.
Add to the following to the head
Making sure that you icon.ico is in the root folder.
This will work on ALL browsers PC and MAC .
Where did you get that idea? This site uses favicon.ico and it displays on IE6-7-8, latest Firefox, Opera, Safari and Chrome.
Which browsers?
There are advantages to not using that naming convention – if you wanted different icons for specific pages.
Good tut.
Other aspects to consider: force recognize, adding 32×32 versions, and https.
Hi Andrew,
Please do explain about the 32×32 version? How would that fit in the space allowed?
Sure, I like to throw in a multisized .ico for instances other than browser nav. Embedding 16,32,64,124 for scalability. I mentioned having a combined 16×16/32×32 because I’ve run across instances where server-side scripts on outside servers wouldn’t pull the favicon if it was over 20k in size. It is a compromise that functions/looks nice in feeds/bookmarks/etc.
And to the latter – the 32×32 size wouldn’t fit into ‘standard’ nav/tab, yet gracefully falls back to 16×16.
If the resources and situation permit, go all out. Sexy icons on one’s dock are never a bad thing.
Awesome…that’s good to know…Thanks!