This short but detailed tutorial will show you how to create a favicon.ico (that icon in your address bar – ex. Simplehelp’s favicon.ico is 
) for your own site.
A favicon (short for Favorites Icon) is a great way to give your site a memorable and unique icon that will display in the browser address bar or bookmarks bar. A favicon shows up next to your site when people bookmark it, and since most folks have a very messy bookmark list, a graphical reminder of your site next to the bookmark is a good way for it to be found quickly.
- First, select the image you want to use as a favicon. Something that blends in with your sites look, colour scheme and general “feel” is best. Since favicons are quite small, it’s a good idea not to try and get too complicated or detailed. The image you choose should be a square and at least 512 pixels tall by 512 pixels wide, and can be a jpg, gif, png, bmp etc.
- Next, visit the favicon.io converter web site – an absolutely brilliant (and free!) online tool that will generate a favicon from an image.
- Upload your picture by dragging and dropping it into the Converter box. You’ll be given a preview of your favicon, and if you’re happy with it, click the Download button.
- Open the zip file and extract its contents. Fire up your favorite FTP program (or whatever tool you use to upload files to your web site) and upload files to the root of your site*.
- Use the code provided in the Installation section of favicon.io (scroll down a bit from the Download button) in your HTML to make sure web browsers know where to look for your newly created favicon.ico files.
- Visit your web site to check out your new favicon! If it doesn’t appear, you may need to clear your browsers cache and then reload.
* = if you don’t have access to the root of your site, change the href part of the code in your html to:
<link rel=”shortcut icon” href=”/path/to/favicon.ico”>
Be sure to check out the web design and development section of our site for more guides like this one.
