How to Add a Favicon to Firefox Address Bar

Member

By e-Rambler
User-Submitted Article

Article Rating: (2 Ratings)

Add favicon to Mozilla Firefox

Favicons are those tiny icons that display in your browser's address bar, usually beside and to the left of the site/page address (URL) that you are visiting. It is made of combining two words Favorite + Icon.

Favicon was originally developed as shortcut icons for MS Internet Explorer 5.0. A web designer/developer can make such an icon and implement it into a website/web page with graphics software, then make use of it in graphical web browsers. This favicon tutorial will show you how to install one to your website/web page and have it show on Firefox browser.

Other names for favicon are: URL icon, URL shortcut, website/page ID, website icon and many more.

Difficulty: Moderate

Instructions

Things You'll Need:

Mozilla Firefox 3.0 and up
PC platform machine with MS Windows OS
Graphics software (optional)
Website/blog
Web page scripting know-how helpful
Some PC troubleshooting experience helpful (in case you mess up)
Computer file organizing and swapping knowledge

Step 1

Favicon in Firefox browser

Find a free online service and have the website create one for you, if you don't have or don't want to use a graphics program.

Create one from scratch or edit one from the Internet in your graphics program. Make the image size 16 x 16 pixels, this is important so it will fit perfect in the Firefox address bar.

I am not giving you instructions on how to create a favicon because every website icon is different, and there are may graphics design software out there, so the topic would be extensive and they could be in other how-to articles themselves. In other words, I am assuming that you know how to create an icon from scratch or edit one in whatever software you are using.

See the location where the favicon will be placed in the sample image above.
Step 2

Save your favicon as ".ico" file extension (less the quotations) after you complete making it.

Upload the favicon to your website Index folder (where normally a website’s homepage is placed) or locate the directory/folder where you put your homepage in.
Step 3

Script to implement the favicon

Now, on your homepage HTML script, add these lines between the "head" tags.

Enlarge image to see the script. Direct script language on publishing pages currently not supported on eHow as it will interfere with their server(s).
Step 4

Troubleshoot icon not showing

Should your browser have issues with your favicon showing up in the address bar, you may put a "?" (less the quotation marks) after your favicon file extension. See image for details.
Step 5

If all is working well then publish your index page (homepage file). Press F5 or CTRL + R on the keyboard to refresh your browser to see the favicon on the address bar.

Test on as many major web browsers as you can to be sure your favicon appears on all of them, particularly the Firefox browser.

The implementation of the favicon should be completed when you reached this Step.
Step 6

Favicon collection

There are literally millions of favicons, the favicons are dependent on the number of websites and blogs that are currently registered on the Internet.

To give you an idea, here is an image sample collection of Mozilla Firefox favicons and it is just a tiny fraction (less than 0%) of the total favicons out there.

The word "favicon" can be applied to any site icon/web ID image, which is usually displayed in the site address bar on a browser. For more information, visit the links in the "Resources" section following this tutorial.

Comments

cstuart73 said

Flag This Comment

on 8/19/2009 THANK YOU!!! I had everything correct except the "?". That's what it took for my created Favicon to show up in Firefox. I'd been stressing over this for WAY too long. Thank you, thank you, thank you!!!