How to Create Your Own Favicon

By Brian Mecham May 20th, 2008

create your own favicon - favorites iconA favicon is short for “favorites icon”. It’s also known as a website icon or urlicon. Most recent web browsers will display a favicon in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document interface. Some operating systems, like Windows, will also often use the favicon for Internet shortcuts to sites placed on the desktop or in other directories.

How to Create a “Favicon.ico” File

There are multiple ways to create a favicon. One method is via www.favicon.cc. I prefer a different method:

  1. Create an image 16X16 or 32X32 pixels in size. I find it easiest to take an existing image and resize it.
  2. Save the image as an ICO file (named “favicon.ico”, of course). If all you’ve got is MS Paint, that’s fine. You can save it as favicon.bmp and then rename it favicon.ico.
  3. Upload it to your website. Put the favicon in your root directory and the web browsers that support favicons will locate it eventually. You can also upload it into your images directory, but you will need to modify your web pages if you do.

Help the Browser Locate the favicon.ico file

If you have placed your favicon.ico file in a location other than the current web directory (relative to your web page) or the root directory, you have to help your visitors’ browser locate the favicon file by specifying it with a tag like the following in the <head> section of your web page.

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />

You should replace “/favicon.ico” in the above example with the actual location of your favicon.ico file, for example, “/images/favicon.ico” if you have placed it in your “/images/” directory.

This step is optional if you have put your “favicon.ico” file in the standard locations, that is, in the same directory as the web page or in the root directory of your website. Otherwise you will need to modify all your existing web pages to take advantage of the “favicon.ico” facility.

Once you’ve got your favicon online, check your website to see if it appears. If you don’t see it you may need to delete the cache or temporary internet files on your browser.

While a favicon is not essential to your website it does add to the professionalism of your site.

Tags:

This entry was posted on Tuesday, May 20th, 2008 at 5:17 am and is filed under Web Design Tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Comment

Testimonials

"We first hired Brian to touch up some of our HTML creatives and landing pages. After we got his 'rough draft' back we realized that we were going to start using him for all of our graphic and web design needs. His rough draft was head-and-shoulders above than the final products of others we had worked with. His punctuality makes organizing and managing a project less stressful, and overall I would highly recommend him for HTML/web work and graphic design."

Read more testimonials...

Who am I?

brian mecham utah web designer and seoWeblife websites are primarily designed and created by me, Brian Mecham, a 28-year old geek, husband and father of 3 boys. My love for computers and art while a teenager developed into my passion for creating websites. I've lived most of my life in Utah and serve clients nationwide and beyond. I specialize in front-end design & layout, WordPress-based websites & blogs, and Search Engine Optimization. Yes, I'm good at a whole lot of others things from building computers to audio/video production, but I spend most of my time messing around with XHTML and CSS code. Aside from family and work, I also have a passion for Liberty.