Add a Favicon to your site!

June 18, 2009 in Tutorials, Web Design

Increase your brand identity by including your logo to the address bar of your browser and tabs…how do you do this? Add a FAVICON! A Favicon is a small custom icon that appears next to a website’s URL in the address bar of most web browsers. The icon also shows up in your bookmarks, on the tabs in browsers, and as Internet shortcuts on your desktop or other folders in Windows.
Let’s get started: Deciding on what image to make as your icon is not difficult, but you need to keep two pointers in mind.
  • Favicons are in the end, only 16×16 pixels. That is VERY small and will not show much detail.
  • Select images or shapes that are simple.

Step 1: Prep your image

At this point, the image you select can be any size (large, medium, small) but make sure that the dimensions are square. You may have to crop your image to get the right shape. This is easily done in Photoshop, but if you don’t have Photoshop, you can your MS Paint(should be installed on your Windows machine) or download Picasa for free. Now if your image is large or medium in size… scale it down so that its about 2 inches x 2 inches. Save your image as a .JPEG, .BMP, .PNG or .GIF (Use a .PNG or .GIF if you want transparency)

Step 2: Transform image to icon

Head over to Dynamic Drive (a great, free place to generate your favicon) by clicking on the link below:
Favicon maker- Create a favicon from any image
Upload your image and check the option “Merge with a 48×48 large XP icon.” Click on the “Create Icon” button and wait for a few seconds. Next, a preview of your favicon will appear. If you like what you see… click on “Download FavIcon” to your desktop (IMPORTANT: do not change the file name!!) and continue to Step 3. If you are unhappy with what you see, make the adjustments in your image editor and repeate Step 2 until your heart’s content!

Step 3: Upload the file

At first, this step may seem a bit out of your league, but if you follow my steps, I will hold your hand through it…. ready?!?!?

Upload your file (“favicon.ico”) to your site. You can put this file wherever you like, but make sure you remember what directory its stored in. I recommend your ‘images’ directory (after all… its an image). To learn how to upload a files to your site, read my tutorial Open your homepage in your favorite html editor or text editor. Within the HEAD section of your code, add the following line:
<link rel=”shortcut ico” href=”http://www.larachandesign.com/images/favicon.ico”>
Replace “larachandesign.com” with your site. Replace “images” with the directory name where your favicon.ico file is located. Remeber to place the code within the <head></head> section. Save your file.

Step 4: View your work

In your favorite web browser, navigate to your homepage. Congrats!!! You should now see your favicon in the address bar and/or tab…. BUT, if you don’t… skip below to “Next Steps”. Now all you have to do is copy/paste the code in every page you want your favicon to appear…

Next Steps: Testing the favicon

If your favicon doesn’t show up on the first try, don’t worry. If the favicon does not appear in the browser, try clearing the browser cache. Close and restart the browser, and then reopen the website. This step is only necessary on the computer used to install and test the favicon. Website visitors will generally see newly installed favicons without having to take any additional steps.