What is a favicon and how can I add one to my web site? Favicon is short for “favorites icon” and seen in your web browser menu next to the address bar, in your favorites menu, and even for your shortcuts.

Favicon Sample - TBH Creative Indianapolis Web Design

A web designer can create this icon and place it on a website, and most browsers will read and display it. Browsers that provide favicon support typically display a page’s favicon in the browser’s URL bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface also show a page’s favicon next to the page’s title. Creating this graphic icon and placing it on a web site is very easy.

Step 1: Create the icon.

There are several ways to do this, but the easiest is to use an icon generator. A good one is favicon.ico Generator. This tool allows you to upload a graphic or draw it write within the system. It displays a preview before downloading the icon file and even allows a little animation if desired. Note: Internet Explorer does not support animated favicons yet, so a static icon will also need to be created. Once the graphic is correct, download it to your local computer.

Step 2: Make the icon appear on your web site. First, load the icon file (always named favicon.ico) to your web site hosting space in the root directory. Second, add the following code to your web site pages in the header and then load them to your hosting space. Note: Replace ‘tbhcreative.com’ with your web site address.

<link href="https://web.archive.org/web/20221201110804im_/https://www.tbhcreative.com/favicon.ico" type="image/x-icon" rel="icon"/><link href="https://web.archive.org/web/20221201110804im_/https://www.tbhcreative.com/favicon.ico" type="image/x-icon" rel="shortcut icon"/>

That’s it. You should now see your favicon when you type in your URL.

Check out these top-rated and clever Favicons

TBH Creative’s favicon tip: If you can use your logo, that is best, but unfortunately not all logos work well as a favicon. If there is a logo mark, that is usually the best option. Take a look at Google’s current favicon:

They used the letter G with an interesting use of color around it. This is a clever alternative.

TBH Creative is a full service web site company located in Indianapolis, Indiana. We specialize in custom and creative web design and develop online software for businesses. Visit our web design portfolio.