This is really Cool, Does your site have a favicon?

What’s the heck is a a Favicon?

when I first heard about this. That’s what I asked myself , what the heck is a favicon?

I mean I knew what it was. As far as those little icons on the tabs of your browsers of the logo of the company of the website you’re on. I had no idea how to create my own or install one, but now I know, and so will you!

A favicon is the little icon that browsers display next to a page’s title on a browser tab, or in the address bar next to its URL. It also is used when you bookmark a page. Here are some examples:

Here’s an example of the bookmarks menu:

Does Your Site Have a Favicon?

As you can see, the favicon is pretty important. It’s critical for site recognition in a browser full of tabs, it’s a great opportunity to expand your site’s branding, and your site will simply look incomplete without one.

Unfortunately, many designers and developers don’t realize how easy it is to add a favicon. They don’t specify any, or they leave the generic one their webhost provides. How’s that for branding – you end up with the same favicon as thousands of other sites!

The Technical Details

The Size

Images for favicons should be 16×16 pixels. You can either resize an existing photo, or create a tiny image specifically for use as a favicon. When resizing a larger photo to be this small, you’ll often lose important details or end up with a fuzzy image. To avoid this, you’ll likely want to do some touch-up work after downsizing the larger photo. Or, just start with a 16×16 canvas to avoid resizing issues altogether.

What To Show

Because you only have 256 pixels to work with, it can be a little challenging to know what to include in a favicon. Here are some common ideas:

Use your logo (or part of it)

If your logo doesn’t display well at such a small size, use a stylized version of the first letter (or letters) of your site or business name

Use an icon that communicates what your site does or represents (for example, Google Analytics uses a tiny chart for their favicon)

The Image Format

As the name suggests, favicons must use the icon (.ico) file format. In the past, it was a hassle to convert into this format. However, thanks to easy, free services, this is no longer the case. All you need to do is create a 16×16 image. The .ico format supports transparency, so you’re not limited to creating a square icon. If you want to take advantage of transparency, use the .gif or .png format when creating your image.

Once you have your 16×16 image, go use a free service like favicon.cc to convert your image. Use the Import Image option to upload your original image:

You’ll get to see a preview of your new icon. You can then download the converted icon:

Save the file within your site (more on the location next).

Where It Goes

Originally, favicons had to be named exactly favicon.ico and placed at the root of your domain (e.g. http://www.yourdomain.com/favicon.ico). This meant that you could only have one favicon per domain, period. However, as favicons have become standardized, more flexibility has been added. There are now two approaches:

One Favicon For Entire Domain

If you only want one favicon for your entire domain, simply save the favicon.ico file to the root folder of your site. When uploaded, it must be accessible fromhttp://www.yourdomain.com/favicon.ico . As soon as you upload the file, your browser should start displaying the icon for all pages on your site. If not, clear your browser cache and reload the page.

Page-Specific Favicons

If you want more control (and to be a little more standards-compliant), you can specify favicons on a page-by-page basis. To use this approach, save the .ico file anywhere within your site, such as an images/ folder. Then add the following code to your page: