Favicon, comes from “Favourite Icon”, can be simply described as an icon of a website, normally in 16×16 or 32×32 pixels. It can be a standar favicon image, transparent favicon background image, or animation favicon image. We can see favicon of a website in mozilla firefox and opera browser (sometimes i.e), bookmark pages, etc.
Nowadays, favicon is not only a common icon, but it also a brand of a website. For example, , will make everyone thinks about google. So do this icon,
, will refer to yahoo by everyone’s thought.
How to create a favicon in your website?
- Create your own design for the favicon. It can be a picture, word, or whatever. Usually use a jpg, gif, or png format.
- Make sure that this image in a rectangle shape. Take a look at this design in a 16×16 sized pixels to make sure that your design can be seen as good as you want.
- If you want to make a transparent background or a simple animation, save your design in a gif format. Otherwise, simply choose a standard jpg format.
- There are a lot of free favicon generator. I recommend one from dynamicdrive, because of its powerfull and easy to use generator.
- Simply browse your image, and click “create icon” buton.
- A preview of your generated favicon will shown. Click “download favicon” to download your favicon.ico.
- Upload favicon.ico to the root folder of your site. Make sure to verify it by typing http://yoursite.com/favicon.ico in your browser.
- Finally, in the head section of your page, anywhere between the <head> and </head>, insert this code :
<link rel=”shortcut icon” href=”/favicon.ico” />
- Finish! Your website has a new favicon now. Note that your favicon may not appear immediately, usually takes a few minutes. Try to refresh your page, and clean your cache to make it sure.
Related posts:
- Tips for Faster Image Loading
- The Power Of SEO Backlinks – A Classic Example
- Adding New Sidebar In Wordpress Theme
- The Short Guide to Affiliate Website Building Success
- Google Adsense Optimization Tips
- How to Improve Search Engine Rankings
- The Correct HTML Tag for Image In Website
- Mozilla Firefox Plugin for Youtube
- Using Flash Animated Corner
- Free Website Builder Software
lol… i’ve been looking for this gif favicon for years… dunno about tools in dynamicdrive.. ty for ur info
hendi — December 1st, 2008 at 7:42 amI use free tool at animatedfavicon.com. This one works great and its fast
favicon generator — December 26th, 2008 at 5:58 amGreat tips, I only draw but will pass your post address to my programmer. He will use it as I have been looking for some nice tool for crating favicon for me.
Kolorowanki — June 30th, 2009 at 1:49 amThanks for sharing.
Regards,
Matt Kolorowanki,
Illustrator