All About the Favicon – Resources / History

favicon

What is a Favicon?

Favicon’s are small images displayed to the left of the URL in your web browser. The main purpose of a favicon is for the small image to show in your bookmarks bar when someone bookmarks your site that way it stands out in your bookmarks. Favicons also show up in browsers that support tabbed browsing (Most modern browsers), to help you greater distinguish between each tab.

The First Implementation of Favicons

The first implementation of favicons was in Internet Explorer 4, and it required you to upload the file favicon.ico to the root of your web server which would in turn load that image into the bookmark section in IE4. Once other browsers started implementing this favicons a better technique was needed. It came by way of HTML, you could now link to the favicon.ico which means you could have multiple favicons for one website or be able to place the favicon wherever you please on the server.

The Correct Way to Link a Favicon

Once the favicon evolved it became easy to link separate images to separate HTML pages. Below is how you would correctly link to a Favicon!

<link rel="shortcut icon" href="images/favicon.ico" />

25 Great Favicon Examples

Favicon Resources

Start Creating your Favicon

Now that you have the history and knowledge of the Favicon, it is your civic duty to create one for your site. If this post inspires you to create a Favicon leave your website in your comment and I will check it out. Don’t forget to show Three Styles some love!

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. I have a unique passion for design trends and tutorials. Follow me on twitter @ThreeStyles

Mobify empowers marketers and developers to create amazing mobile web experiences. Tap to learn more

Mobify