This brief tutorial will show you how to create a unique 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. In addition, favicon’s show 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 beside the bookmark name it is a good way let them find it again.
- 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. The image you choose should be a square (64×64, 32×32 etc), and can be a jpg, gif, png, bmp etc.
- Next, visit FavIcon from Pics - an absolutely brilliant (and free!) online tool that can generate a favicon from a picture, logo or other graphic
- Upload your picture and click the magic Generate Favicon.ico button. You’ll be given a preview of your favicon, and if you’re happy with it, click the Download Favicon button. Favicon from Pics will prompt you to save a .zip file - save it to your desktop or wherever you prefer to save files. Unzip it.
- Fire up your favorite FTP program (or whatever tool you use to upload files to your web site) and upload the favicon.ico file to the root of your site*. You’ll want the file to be located at www.your-site.com/favicon.ico.
- 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, add the following line of code somewhere in the <head> of your html:
<link rel=”shortcut icon” href=”http://www.your-site.com/path/to/favicon.ico”>
{ 4 trackbacks }
{ 1 comment… read it below or add one }
Good post. I have used that favicon generator in the past and it works well. Sometimes I don’t have the time or creativity to make my own and have found some great free favicons here: http://www.freefavicon.com/
Leave a Comment