FAVICONS
What’s a “favicon“?
It’s the thing you see in the address window of your browser. Looking at this site, you should see a graphic image to the left of “http://www.daniboy.com/” that looks like five circles and a “d”. That’s a favicon and every company that wants to have a credible web presence has them.
Why?
I can’t recommend them highly enough. This is how you make them.
The Quite Easy Way:
1. Make the graphic image you want to use for your favicon of 16 x 16 pixels.
2. Save the image as a bitmap, for example “favicon.bmp”.
3. Get a graphics editing program you can use to change the bitmap file to an icon file.
4. An example of a free graphics program: Irfanview.
5. Change the file. Its name should go from “favicon.bmp” to “favicon.ico”.
6. Upload the new icon file to your website, along with the following HTML code, which you should put in the "Head" section of your pages (don’t forget to enclose the code with “<>” brackets):
<link rel=”shortcut icon” href=”http://www.yourwebsite.com/favicon.ico”>
And hey presto!
The Even Easier Way
1. Go to the Favicon From Pics site. I’m not affiliated with them in any way, so click with confidence.
2. Select the graphic image you want to use for your favicon (don’t worry, it doesn’t have to be an “icon” file, it can be a gif, jpeg, png, whatever. It can even be a picture of you).
3. Type in the text you want, if you’re using scrolling text along with your favicon, and tick the “Animate Favicon” box.
4. Click “Generate FavIcon.ico” and save the file it comes up with.
5. You’ll get a favicon file, along with a file called “animated_favicon1.gif”. Don’t worry; it’s all completely free.
6. Upload the favicon file to your website, along with the HTML code given above.
7. If you’re having an animated favicon with scrolling text, upload “animated_favicon1.gif” to your site and put this HTML code directly underneath the code given above (don’t forget to enclose the code with “<>” brackets):
<link rel=”icon” href=”animated_favicon1.gif” ”image/gif”>
Check it out! See how it looks. Don’t you feel all warm and fuzzy about your site now?
You’re very welcome to reprint any of these articles on your website and/or newsletters free of charge, provided:
Daniel O'Connor is a website, SEO and marketing copywriter using the name Daniboy. He can be contacted here. Visit http://www.daniboy.com for further details of his services.
It’s the thing you see in the address window of your browser. Looking at this site, you should see a graphic image to the left of “http://www.daniboy.com/” that looks like five circles and a “d”. That’s a favicon and every company that wants to have a credible web presence has them.
Why?
- They add to your company branding
- They make your company look “with-it”, website-wise
- You get to choose how your website is shown and don’t just settle for the Internet Explorer or Firefox default favicons
- It’s easier to pick out graphical images than text, so they stand out from other sites in your browser’s “Favourites” lists
- You can even have favicons that rotate graphic images with text
I can’t recommend them highly enough. This is how you make them.
The Quite Easy Way:
1. Make the graphic image you want to use for your favicon of 16 x 16 pixels.
2. Save the image as a bitmap, for example “favicon.bmp”.
3. Get a graphics editing program you can use to change the bitmap file to an icon file.
4. An example of a free graphics program: Irfanview.
5. Change the file. Its name should go from “favicon.bmp” to “favicon.ico”.
6. Upload the new icon file to your website, along with the following HTML code, which you should put in the "Head" section of your pages (don’t forget to enclose the code with “<>” brackets):
<link rel=”shortcut icon” href=”http://www.yourwebsite.com/favicon.ico”>
And hey presto!
The Even Easier Way
1. Go to the Favicon From Pics site. I’m not affiliated with them in any way, so click with confidence.
2. Select the graphic image you want to use for your favicon (don’t worry, it doesn’t have to be an “icon” file, it can be a gif, jpeg, png, whatever. It can even be a picture of you).
3. Type in the text you want, if you’re using scrolling text along with your favicon, and tick the “Animate Favicon” box.
4. Click “Generate FavIcon.ico” and save the file it comes up with.
5. You’ll get a favicon file, along with a file called “animated_favicon1.gif”. Don’t worry; it’s all completely free.
6. Upload the favicon file to your website, along with the HTML code given above.
7. If you’re having an animated favicon with scrolling text, upload “animated_favicon1.gif” to your site and put this HTML code directly underneath the code given above (don’t forget to enclose the code with “<>” brackets):
<link rel=”icon” href=”animated_favicon1.gif” ”image/gif”>
Check it out! See how it looks. Don’t you feel all warm and fuzzy about your site now?
You’re very welcome to reprint any of these articles on your website and/or newsletters free of charge, provided:
- you don’t change the article in any way
- you include the writing credit below (including all website links)
Daniel O'Connor is a website, SEO and marketing copywriter using the name Daniboy. He can be contacted here. Visit http://www.daniboy.com for further details of his services.
