DWUser.com

Empowering Web Creativity

Back to Education Center Home:  Go Back        Font size:  Smaller  Larger         Font weight:  Lighter  Heavier 

Quick Tip: Adding a Favicon To Your Website

by Nathan Rohler

What's a Favicon?

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:

Google Chrome

Internet Explorer

Here's an example of the bookmarks menu:

Bookmarks menu

But it doesn't stop there. Some web services and search engines (such as DuckDuckGo) even use the favicon:

DuckDuckGo results page

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!

Default webhost icon

No icon at all

Favicons add that extra polish that visitors (and clients) appreciate.

The Technical Details

The Size

Images for favicons should be 16x16 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 16x16 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 16x16 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 16x16 image, go use a free service like favicon.cc to convert your image. Use the Import Image option to upload your original image:

Import image

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

Completed 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 from http://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:

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

Update the highlighted path to reference your new icon file. Note that we use a site-relative path (starting with a slash) so that it will be a valid link regardless of the current page's path.

When using this approach, you'll still want to upload a fallback icon to http://www.yourdomain.com/favicon.ico for situations where someone is browsing or bookmarking non-HTML content (such as a PDF).

Let's Review: How To Do It, The Easy Way

  1. Create a 16x16 image. If you want transparency, use the PNG or GIF format.
  2. Convert your image to .ico format using a free service such as favicon.cc.
  3. Upload the new icon to http://www.yourdomain.com/favicon.ico . For finer control, use the code above to specify favicons on a page-by-page basis.

Conclusion

Adding a favicon is so easy, there's no excuse not to. Favicons are important for site recognition and branding, and should always be added to your sites. You can even have fun with them – for example, you could add a sprig of holly for the winter holidays.

I hope this guide has removed the mystery behind those little icons, and empowered you to add them to your sites!

Have any thoughts or comments? Have you seen a humorous or creative icon while browsing the web? Please share in the comments!

Thanks to Diane D. for suggesting this article – she received a $15 Amazon gift certificate as a prize.

Tell Others and Have Your Say

 
 
 
Log In
  Reset Password...
 
Why create an account?
  • Manage support tickets and purchases
  • Access to free extensions
  • Special discounts and offers
  • Access to member-only forums
Create Account
100% Spam-Free Guarantee
(Optional)
 

Use the following form to ask a question or submit a support request. An appropriate staff member will reply as soon as possible (usually within a few hours).
Contact Us / Create Support Ticket
 
To attach files, you must Sign Up or Log In.

You have no items in your basket.  Featured products:

XML Flash Slideshow v4 Flash Audio Kit for Dreamweaver

Home | Customer Satisfaction / Refund Policy | Privacy Policy | jQuery Slider | Top of Page

© 2003-2014 DWUser.com / Magnetic Marketing Corp.  All rights reserved.