Note: This little tutorial (with accompanying video) is for those who have their own web site or blog that don’t mind doing a tiny bit a code editing.
To create an icon that will work in both Internet Explorer and Firefox:
- Use an image editor to create a 16×16 PNG image. If you don’t have an image editor that will create PNG files, use GIMP for whatever operating system you use.
- Download png2ico and use it to convert your PNG to an ICO.
To use an icon that will work on every web page on your web site:
- Name your ICO file favicon.ico
- Upload the file to the root of your public directory (such as /public_html/ or /www/ or /htdocs/ or whatever it is)
- Load your web site in your web browser. The icon file should show up without issue for every web page and script on your site.
To use different icons for specific web pages:
- Save the ICO file to a publicly accessible directory, such as http://www.your_site.com/icon/custom-icon.ico
- Enter web page’s HTML code before </HEAD> and insert:<link rel=”shortcut icon” href=”http://www.your_site.com/icon/custom-icon.ico”>
- Save your web page then load in a browser. The icon should show up without issue.
To use GIF’s, Animated GIF’s, JPG’s or PNG’s:
(Note: This is Firefox / Netscape 9 only and won’t work in Internet Explorer)
- Upload your image somewhere, either to your web site or to an image sharing service like imageshack.us or Photobucket.
- Get the web address for the image, such as http://www.your_site.com/images/image.gif
- Insert the following code anywhere in the HTML of the web page you want the icon to show up in:
<link rel=”shortcut icon” href=”http://www.your_site.com/images/image.gif”> - Load the web page in Firefox / Netscape 9. The icon should show up without issue.
See video below for examples.
Like what you read?
If so, please join over 28,000 people who receive our exclusive weekly newsletter and computer tips, and get FREE COPIES of 5 eBooks we created, as our gift to you for subscribing. Just enter your name and email below:
