* This post is regularly updated. *
Favicons (favorite icons) are the small images that are associated with a website. It will be displayed on address bar, tabbed browsers and your bookmark list. Therefore, creating an outstanding favicon is particularly important for website branding. The basic guidelines for design a good favicon are “simple” and “unique”.
Here is the simple steps for beginners to set up favicons,
1. create a favicon (16 x16) for your sites;
2. upload favicon.ico to root directory;
3. copy and paste the code to header section;
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />
4. reload your sites and finish!
It is more complex if you want the favicons also work well at IE, for more information you might take a look the links at the bottom. And the generators below is selected from almost 50 favicon tools on the web. Simply drop me a message if you have any better suggestions.
Favicon Generators
Favicon.cc – a new web 2.0 feel favicon generator. You can draw by yourself or import images to generate favicons, and it also have a live preview function at the bottom. Recommended!
![]()
256pixels – raise a daily favicon design challenge via different topics. Great idea and worth to take a look.
![]()
Favicon2dots – unique Japanese favicon creator from any website URL.
![]()
Converticon – generate favicons from URL or your computers. Beware, sometimes it will have annoying pop-up ads.
![]()
FaviconTool – the coolest interface favicon generator.
![]()
Webscriptlab Favicon Generator – we mentioned this site before at 13 Online Generators For Web2.0 Design before.
![]()
Flavicon – they also offer custom favicons service.
![]()
Favicon Generator and Gallery – at this site you might choose the size of favicon before generation, and they also have a awesome favicons showcase.
![]()
FaviconGenerator.com – clean favicon generator.
![]()
Faviconsfor.us
![]()
More Here
13. http://www.degraeve.com/favicon/
14. http://www.antifavicon.com/
15. http://www.html-kit.com/favicon/ – probably most popular one.
16. http://www.favicon.jp/ – Japanese site.
17. http://tools.dynamicdrive.com/favicon/ – DynamicDrive tool.
18. http://www.faviconprime.com/
19. http://shaheeilyas.com/favicon/
20. http://www.faviconfactory.com/
Related Resources
- Inspire Yourself: 50 Remarkable Favicons – Smashing Magazine favicons showcase.
- Making a Good Favicon
- http://www.faviconz.info/
- How To: Animated Favicon – tips for create animated favicon manually.
- Favicons – How To Make Them Work For You
- http://www.favicon.com/ – favicons faq.
- Making a favicon – tutorial for making favicons that work at IE and FF.
* Updates
Quickfavicon
Freefavicons, (thanks: WebCentric)
Topics: CSS, Design, Web Development
Submit Your Article





