Skip to content

How to create a favicon.ico for your web site

Web Design & Dev

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.

  1. 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.
  2. Next, visit FavIcon from Pics – an absolutely brilliant (and free!) online tool that can generate a favicon from a picture, logo or other graphic
  3. 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.
  4. 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.
  5. 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.

    6. * = 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”>

Posted in Web Design & Dev.

No comments

By Ross McKillop – May 2, 2007

Get Simple Help tutorials just like this one in your email inbox every day - for free! Just enter your email address below:

 

You can always opt out of this email subscription at any time.

Related Posts:

How to revert to the "old" Google favicon
Simplehelp Recap: May 2007 – wow, and thank you!
How to create a custom iPhone and iPod touch icon for your web site
Welcome!
How to insert a Google Map into your website using iWeb

6 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. LGR says

    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/

    May 30, 2007, 9:55 am
  2. salvador says

    Porqué no tengo el atributos shortcut icon en la etiqueta rel

    April 1, 2009, 3:34 am

Continuing the Discussion

  1. 20 Free RSS Readers Reviewed - Simplehelp linked to this post on May 6, 2007

    [...] Homepage: http://www.mozilla.com/en-US/firefox/ Requirements: see the full list here – but in a nutshell, Windows 98 and up, Mac OS X 10.2.x and up, Linux kernel 2.2.14 (with glibc 2.3.2, XFree86-3.3.6, gtk+2.0, fontconfig/xft and libstdc++5) Thoughts: Firefox is a browser, not an RSS reader. I know this. But a surprisingly high number of people use it as their primary RSS reader, through a feature that Firefox calls “Live Bookmarks”. Live Bookmarks are actually a lot of people’s first introduction to RSS, even though they may not know it. By default, Live Bookmarks don’t have a lot of features – they just kind of ‘are what they are’. Enter LiveClick, one of the many add-ons/plugins for Firefox. LiveClick adds a number of very useful features to Live Bookmarks, such as: marking Live Bookmark items as ‘read’, receive alerts when select Live Bookmarks have new items, and it even allows you to use site icons (favicons) in place of the default RSS icon. Screenshots: [...]

  2. WordPress: The Complete Post-Install Checklist, Redux - Simplehelp linked to this post on May 26, 2007

    [...] Create a favicon.ico for use with your blog. Upload it. [...]

  3. How to revert to the “old” Google favicon - Simplehelp linked to this post on May 30, 2008

    [...] recently changed their favicon.ico from the ever familiar boxed G, to a smaller g. If you’re not a big fan of the new icon, you [...]

  4. Favicon Design : ..:.:.. Todd And = Marketing + Media ..:.:.. linked to this post on July 22, 2008

    [...] than the design of any other pixel icons. If you don’t have a favicon yet, here is a tutorial and gallery for brainstorming favicon design [...]



Some HTML is OK

or, reply to this post via trackback.