Smashing Magazine - we smash you with the information that will make your life easier. really.
Creative Favicons: When Small Is Beautiful
We love creative favicons. Their beauty lies in the approach a designer has chosen to put something really unique inside of the 16×16px box. Designing favicons, it’s necessary to work with miniature images, and every extra pixel can be the wrong one. A good favicon is original, beautiful and – in best case – fits to the logotype and color schemes used in the web-site. Creating them is a challenge not every designer is able to cope with. It’s hard, but not impossible. In fact, many creative solutions are possible, but it’s damn hard to come up with some of them once you need them.
Sometimes it’s enough to rescale the logo to an appropriate size, as shown by Xpanity Favicon:
If rescaling doesn’t provide optimal results, you can try to extract some parts of your logo and bundle them together, like Kijiji did.
We’ve collected some of them – 40 gorgeous, creative and visually appealing favicons you can use as a source of inspiration, e.g. if you have a creativity block. Images are linked; to visit the page with the favicon you like, just click on it.
You can find further favicon-showcases in the posts we’ve published before:
[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]
40 Creative Favicons
(updated)
The Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Author of several books. Runs the business.
(No votes yet)
Loading ...- 37 Comments
- 1
- 2
June 14th, 2007 10:51 pmI wonder how you guys get around the web to collect these icons. You have collected many inspirational ones. Thank You.
- 3June 14th, 2007 11:23 pm
Great collection. I love the constraints of designing a favicon.
When the logo doesn’t work, having to capture the essence of the site in 16×16 pixels is a challenge that sparks creativity.
- 4June 14th, 2007 11:25 pm
I like this this collection. Icon makers are really specific type of artists. Create good work on these small piece of screen is not only art but heroic craft.
- 5June 14th, 2007 11:56 pm
Great Post but I think that you have been posted them before.
- 6June 15th, 2007 12:33 am
the icon listed for foolscap.de (16th from top) is not their’s. It’s the logo of TYPO3, the content management system!
- 7June 15th, 2007 12:34 am
forgot the link: typo3.org
- 8June 15th, 2007 3:23 am
I’m having problems getting my favicon to show up in IE7. It’s fine in FireFox and Opera. Is there anything special I have to do to get it to work in IE?
- 9June 15th, 2007 4:16 am
I’ve to change my favicon!!!!
I think that this is the second article about this, so 2 good articles about smoething that’s forgeted most of the times!!!!
- 10June 15th, 2007 8:21 am
I thought it was 18px by 18px. I thought wrong =)
- 11June 15th, 2007 11:11 am
when tiny be crative. awesome
- 12June 15th, 2007 10:39 pm
beautiful collection…. !
- 13June 15th, 2007 11:40 pm
Yeah, very inspiring!
- 14June 16th, 2007 12:50 am
That is good icons, very inspiring!
- 15June 16th, 2007 1:47 am
Why isn’t the Flickr favicon in there? It only has the colors of the logo — far more creative than a logo that’s simply been scaled down.
- 16June 16th, 2007 3:59 am
You guys love linkbait, do you?
- 17
- 18June 16th, 2007 9:07 am
Davezilla.com has a really cool one! A tiny dragon with teeth!!
- 19June 16th, 2007 5:03 pm
Well I must admit that most of these are pretty impressive while most of them use light tone colors it is easier to make them viewable at there small size. People with Darker color logos beware. Good compilation though!
- 20June 16th, 2007 6:13 pm
Nice icons..How do they design it???
CAn anyone get one for my blog? - 21June 17th, 2007 2:06 am
egobits.gif is 34 x 34 pixels.
–
Alan Clifford - 22
- 23June 17th, 2007 5:57 am
Because of the horizontal nature of our logo (link, jpg, 12k) we had to take just one part and concentrate on that for our favico – link, 32×32px gif, <1k).
I found it quite constraining initially, but now that I’ve come to terms with it I’ve found that I’m using a larger scale version for other purposes (swap 32×32 for 64×64 in the previous url to see).
– Alastair.
- 24June 18th, 2007 9:48 am
Wow some of these are really amazing. I think if you can design a good favicon you can design anything!
- 25June 18th, 2007 9:53 am
# Alan Clifford
actually egobits.ico is 16×16 … what are the pros of using a 32×32 icon? - 26June 18th, 2007 5:29 pm
typo3.org FTW! :D
- 27June 19th, 2007 3:27 pm
i had worked on designing of 24×24 and 32×32 and it seems toughest tasks coz of too much constraints but , doing that much creative work on 16×16 is awesome
To present ur idea on 16×16 and showing it clearly is outstanding. Sooo size does matter when its tooooo smallllll :-)
- 28June 19th, 2007 8:50 pm
The favicons on bonnierskonsthall.se will be changed everyday (Safari is caching them though but Firefox will show a new one everyday) to reflect day year-long color scheme the site follows.
- 29June 21st, 2007 11:24 pm
Realy great icons.
i will use as soon as possible. - 30June 22nd, 2007 3:50 am
not bad
i’m making an icon for my website ;) - 31July 2nd, 2007 4:03 pm
Awsome collection, well done ;-)
- 32July 31st, 2007 3:38 pm
Did you know you can make your Favicon an animated GIF. I’m sure you can take the creativity a step further ;)
- 33April 6th, 2008 5:14 pm
Great icons they’re so crip even tho they’re really small, theres a real art to doin this that i ahve not master yet!
- 34November 27th, 2008 3:02 am
im nuts with big nuts, i love saying that XD,
- 35November 27th, 2008 12:00 pm
Tammy, You have a lovely site with so many wonderful accolades.,
- 36September 24th, 2009 10:01 am
Hello very nise site i am grabbihg your favicon for my blog
- 37October 30th, 2009 3:12 am
THanks! It’s Very good!
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- lovely-css: a grid-based CSS framework - http://bit.ly/ayA0wb
- How The CSS Selector nth-child Works - http://bit.ly/cgPMqe
- 33 New High Quality Adobe Illustrator Tutorials - http://bit.ly/bTgFbu
- How to Drastically Improve Your Designs - http://bit.ly/a9L1sb
- A Quick Look at Mobile Web Designs - http://bit.ly/9TCWCG
- How to Test your JavaScript Code with QUnit - http://bit.ly/da853c
- jQuery 1.4 API Cheat Sheet - http://bit.ly/5zYYnE
Great Icon….
I think favicon of simplebits is also a beautiful icon.