Creating a Favicon

One of my students asked how to create a favicon for his Web site, and I thought I would share the answer with you.

A favicon is the icon you see before a Web site address in the address bar of your browser. Here’s the one I created today for my 2EducateYou blog:

There a few ways to create a favicon:

  1. Build one from scratch with a graphics program such as Adobe Photoshop or Adobe Photoshop Elements.You’ll need to create a file that is 16 x 16 pixels and save it as an icon. I used Adobe Photoshop Elements, which is similar to PhotoShop, but much cheaper! It has all the features I need in a graphics program. In fact, it has way more than I need! If you have access to one of the PhotoShop products, use these directions from Tutorials by Jennifer to build your favicon.
  2. Use a Web site tool.I found the Favicon.cc Web site easy to use. You simply choose a color for your icon, then click on the squares to apply your color and build your favicon.

    Another handy Web site is FavIcon from Pics. If you have a company logo, this Web site can create your favicon from your logo. Pretty slick! I tested it with a graphic I created in PhotoShop Elements, and it worked great. Also try DynamicDrive, which does the same thing.

    While many of you will find this option easier, using a graphics program may give you a nicer looking favicon. I tried both methods, and found the graphics approach more difficult, but I liked the icon much better.

After saving your favicon, you’ll need to upload it to your Web hosting company. FTP is one method of transferring files from your computer to your hosting company. Each Web hosting company has its own set of rules which you’ll need to get familiar with so you can transfer your files to them. Network Solutions has three FTP options! If you’re using a  template from your hosting site, you’ll need to ask them which folder to upload your favicon to. If you’re using Network Solutions, you’ll upload to the htdocs folder.

You may also need to add this html code between the beginning and ending HEAD tags in your Web pages:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

although I found I didn’t have to do this for a WordPress blog.

Good luck!

Kathy Van Pelt



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.