When designing your site, you probably spend a lot of time working on the logo, color scheme, and the overall look and feel to ensure that you project just the right brand image. In the process, don't overlook the tiny little favicon that appears next to your URL in the browser's address bar, and next to your site's name in a browser's favorites / bookmarks.
A favicon may seem minor, but it's like the dot over the "i" character. Your branding just isn't complete without it, even if it can technically function without it.
People are inundated with data these days, so any chance you get to make an impression or remind them of your brand is a chance you shouldn't forgo - especially when it is easy to do and costs absolutely nothing to create.
Can I Just Rename An Image?
The first question everyone asks if they've never created a favicon is something like this:
"Can I just take a small image I have, like mylogo.gif, and just rename it as favicon.ico?"
The answer is a definite no. Merely changing the name, and changing the file extension from .gif / .png / .jpg to .ico won't work. The favicon is a certain format (.ico) that doesn't get generated with a simple filename change.
How To Make A Favicon
Luckily, it's almost as easy to create a favicon as it would be to rename a file. There are several favicon generator tools available on the web that quickly convert your image that is currently a .jpg/.png/.gif into a favicon. All you have to do is just upload a graphic, click a button, and a favicon will immediately be given to you to download and use. (Note: The resulting favicon will look better if you uploaded a square or nearly-square image to begin with).
Dynamic Drive's favicon generator tool is my favorite tool to use, but you can find alternatives by simply searching for "favicon generator". They are generally all free and easy to use.
How To Make Your Favicon Show Up In The Browser
To use the favicon you just generated, place it in your site’s root folder (the folder in which your home page resides), and then put the following code in your pages' HEAD section (between the
and tags).<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
That simple process of converting a square image to a favicon via a favicon generator tool and then including one line of code in your site's header is a no-brainer way to add the final touch to your site's branding.
