How to Make a Favicon

by • Feb. 17, 2010 • Build Your Website, Recent Blog Posts, ResourcesComments (4)1931

Have you ever noticed those little icons next to the address bar while visitng your favorite website? Well thats a favicon. This is mine.

Wikipedia definition:

A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab. Some programs allow the user to select an icon of his own from the hard drive and associate it with a website.

I typically make my favicons using a Photoshop plugin, but I wanted to show you guys how to make a favicon if you have no graphic experience. It’s super easy, online and FREE at Favicon Generator.

Here are the steps make your first favicon.

Step 1. Locate the image that you would like to use as your Favicon and make sure that the dimensions are perfectly square (ie. 100 Pixels x 100 Pixels). This image should typically be your logo or another image directly associated with your website.

Step 2. Browse to the file’s location on your computer and select the image at Favicon Generator.

Easy right? Well jump on over to Favicon Generator and make your first favicon.

TIP: If by chance you are unable to find a suitable graphic to use as a favicon, go to Iconfinder.net. They have the best free icons online!

  • http://www.chuckrayman.com Chuck

    Great tip and thanks for sharing!

  • arsha

    Sure Chuck! Thanks for stopping by.

  • http://findicons.com FindIcons.com

    I justed wanted to suggest a new and better icon search engine, FindIcons.com, which has larger icon collection and complete search filters.

  • arsha

    awesome! I am always looking for new sites to get quality icons. i will make a post highlighting your site. thanks again! arsha