What Is a Favicon?

If you have your own website and domain name, you should have a favicon.

Look up at the tab of your browser where you are viewing this site. You should see a little orange fish. Small Fish Services favicon Cute, huh? The custom favicon (favorite + icon) adds a professional touch to any site. Users see the favicon in their browser windows and if they favorite/bookmark the site. You can create a separate icon to use if a user clips your site on an iPhone. They are relatively easy to make. In fact, the hardest part is probably uploading to your website.

To create:

  1. Get the best quality image of your logo that is available. A vector drawing is best but high-resolution will do.
  2. Decide what part will be the favicon. It must be square and translate well to the tiny size. For example, if I used my whole logo, it would look like this:  Bad Small Fish favicon. Some logos offer multiple options. The one from Fairfax Presbyterian Church in Fairfax, VA, could be either this:  FPC whole logo favicon or this: FPC partial logo favicon. You can even make a favicon from a picture, such as this world's-tiniest-pic of me: World's tiniest pic of me.
  3. Use graphics editing software to create a version that is 60 pixels square or has 60 pixels as the largest dimension (width or height). You can use a variety of formats. I usually use .png. I like to use Inkscape and GIMP because they are free programs. If you have Adobe Illustrator and/or Photoshop, they work, too!
  4. Go to http://favicon.htmlkit.com and browse for the 60 pixel graphic.
  5. One option is to have an animated favicon with scrolling text. I think those are highly annoying, so I remove the animated favicon by clicking the little "x" under it.
  6. Click "Customize" for more options.
  7. If your image was not perfectly square, you may want to click "Don't stretch image to fit favicon" to keep the original proportions. Try it both ways to see what works best.
  8. Click "Add iPhone, iPod Touch and iPad icon" because you might as well do this too while you're at it!
  9. Decide how you want the background to appear. You can click "(transparent)" Next to "Background color." This usually works well if your icon is one solid shape. Otherwise you may want a colored background.
  10. When you're finished, click "Download favicon package" and save it to your computer.
  11. It downloads as a .zip file containing favicon.ico (within this file are two sizes of icons), apple-touch-icon.png, and ReadMe.txt.

To upload:

  1. You must access the root directory of your website (www.smallfishservices.com/), not inside any folder (www.smallfishservices.com/yadda/yadda/). That means you can't upload the images through a content management system like WordPress or Joomla. You need a program that connects via FTP. You may need to contact your system administrator or the person who setup your domain and hosting.
  2. Copy favicon.ico and apple-touch-icon.png to the root directory of the website.
  3. The last step is to tell your webpages where the favicon is. If you skip this step, most browsers will still be able to figure it out anyway. However, it is a best practice to insert these lines of code between the <head> and </head> tags of your pages:
    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="apple-touch-icon" href="apple-touch-icon.png"/>
  4. In WordPress, go to Themes on the dashboard menu and choose Editor. Then select the header file from the list on the right. Since this file is deep in the folder structure (yoursite.com/wordpress/content/themes/yourtheme/header), you need to change the href to http://yoursite.com/favicon.ico but with your site's real name.
  5. Now you want to see your favicon, but your browser does not cooperate. (I'm psychic.) Try opening the site on another computer that hasn't been to the site. The favicon should appear. Now, on your computer, delete the cached images.
    In Internet Explorer, click the little gear for Settings and choose "Internet options." On the first tab, under "Browsing history," click "Delete." Check only "Temporary Internet files." Click "Ok." Close Internet Explorer, wait a minute, open it again, and load your site.
    In Firefox, go to "History" and "Clear Recent History." Choose "Everything from the time dropdown and check only "Cache." Click "Ok." Close Firefox, wait a minute, open it again, and load your site.

That's it. Happy favicons to all!

This entry was posted in Technology Pros and tagged , , , , , , , . Bookmark the permalink.


Leave a Reply