Smashing Magazine we smash you with the information that will make your life easier. really.
Creative Favicons: When Small Is Beautiful
June 14th, 2007 in Graphics | 76 Comments
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:
40 Creative Favicons
(updated)
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 45 Excellent Blog Designs
- 50 Beautiful Designs
- 50 Simple Designs
- 60 Elegant Designs
- 65 Excellent Flash Designs
- Stunning Desktop Wallpapers
- Stunning HDR Pictures
- Stunning Photos
- Free Design Templates
- Free CSS Layouts
- Free Icon Sets
- Free High-Quality Fonts
- Slideshows & Lightboxes
- Adobe Photoshop Tutorials
- Adobe Illustrator Tutorials
All Posts
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Blog Designs
- Blog Headers
- Book Covers
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Design
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel art
- PNG Transparency
- Portfolios
- RSS Best Design Practices
- RSS Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Splash Pages
- Start Pages
- Stock Icons
- Tab-Based Interfaces
- Tag Clouds
- Textures & Backgrounds
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Web Profis Ideas 1, 2
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
Webtips
Sideblog
A set of 18 splendid and colorful looking 3D RSS-Icons. They are done with 3d Studio Max. JPG.
In Font Clock 12 different fonts are printed within the mechanism of a clock, providing a random, mixed display of graphic language within a single time piece. Designed by by Sebastian Wrong.
One pixel notched corners as used by Google Analytics. Instead of each option being boxed in a clickable rectangle, there is a 1px notch in each corner. It's not necessarily a curved corner, but it is a little softer than a normal box. Nice little trick.
Hartija is a CSS print framework which is an attempt to unite best CSS printing practices into one single CSS-file.
Rather than standard website templates, a free admin template is nearly impossible to find. This is an admin template which you can use for web applications like online-shops or CMS.
Fully Personal Interface research is a survey where people are questioned about their interface preferences. Results: labels and icons should be placed on the left, horizontal menus are more popular than vertical ones.
Is Out Of This World a new old trend in modern web design? According to Gino Orlandi, more and more "sites have a space theme, where you can see planets, stars and nebula type effects."
DropClock is a screensaver in which every minute is numerically expressed with heavy Helvetica dropping into water in super slow-motion. Win, Mac. [via]
Le Tung Lam (June 14th, 2007, 10:28 pm)
Great Icon….
I think favicon of simplebits is also a beautiful icon.
Shankar Ganesh (June 14th, 2007, 10:51 pm)
I wonder how you guys get around the web to collect these icons. You have collected many inspirational ones. Thank You.
Tony D. Clark (June 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.
Goran Mitic (June 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.
Arpit Jacob (June 14th, 2007, 11:56 pm)
Great Post but I think that you have been posted them before.
Felipe Tofani (June 15th, 2007, 12:00 am)
I really like the one from: Link [www.bmezine.com]
Jiri Prochazka (June 15th, 2007, 12:12 am)
Hei! Nice work! BUT: I must to show you the Favicons’ gallery Link [prestige.wordstudio.cz] which I run already second month!
Ingo (June 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!
Ingo (June 15th, 2007, 12:34 am)
forgot the link: typo3.org
Jacquelynn (June 15th, 2007, 12:57 am)
To this list, I would definitely add Link [www.delicious-monster.com]. The little monster icon is perfect for the site.
Tammy Wilson (June 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?
criticalerror (June 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!!!!
Maciej Lebiedowicz (June 15th, 2007, 5:02 am)
Check out my animated favicon Link [www.pantuniestal.com]
Djurdjica Selec (June 15th, 2007, 5:08 am)
Very Nice! High Five! ;))
Take a look at mine:
Link [www.itookia.com]
Matty (June 15th, 2007, 8:21 am)
I thought it was 18px by 18px. I thought wrong =)
meizopan (June 15th, 2007, 11:11 am)
when tiny be crative. awesome
jayhan (June 15th, 2007, 12:08 pm)
thanks for the great collection! This sites really inspiring.
I think Link [pingmag.jp] favicon and Link [www.iconbuffet.com] not bad either..
I saw some animated one too, which is not bad.
Hitesh Mehta (June 15th, 2007, 10:39 pm)
beautiful collection…. !
OverZero.it (June 15th, 2007, 11:40 pm)
Yeah, very inspiring!
Rhyno (June 15th, 2007, 11:54 pm)
I like this one:
Link [www.laurell.com]. Captures the logo nicely and adds depth (in a favicon??)
Narga (June 16th, 2007, 12:50 am)
That is good icons, very inspiring!
GreySheepDuo (June 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.
milo (June 16th, 2007, 3:59 am)
You guys love linkbait, do you?
Jeffrey (June 16th, 2007, 8:12 am)
i think Link [www.meebo.com] favicon should be on the list. Its pretty sweet.
FairladyZ (June 16th, 2007, 8:29 am)
I think Link [www.autoconcourse.com]icon is pretty unique. It’s a spin on a 6 speed shift pattern and the “figures” that social networking sites use in their logos.
Mandy (June 16th, 2007, 9:07 am)
Davezilla.com has a really cool one! A tiny dragon with teeth!!
SS (June 16th, 2007, 11:44 am)
You forgot the George Bush icon on Link [www.tvdance.com].
techfare (June 16th, 2007, 3:16 pm)
nice collection… fav icon helps in branding your site.
Link [techfare.blogspot.com]
Arthur (June 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!
Rohit (June 16th, 2007, 6:13 pm)
Nice icons..How do they design it???
CAn anyone get one for my blog?
Alan Clifford (June 17th, 2007, 2:06 am)
egobits.gif is 34 x 34 pixels.
–
Alan Clifford
Alan Clifford (June 17th, 2007, 2:09 am)
Link [www.smashingmagazine.com] is 32 x 32 pixels not 16 x 16
Alastair (June 17th, 2007, 5:57 am)
Because of the horizontal nature of our logo (Link [www.logon.ie], jpg, 12k) we had to take just one part and concentrate on that for our favico - Link [www.logon.ie], 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.
Motorcycle Guy (June 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!
Andres Santos (June 18th, 2007, 9:53 am)
# Alan Clifford
actually egobits.ico is 16×16 … what are the pros of using a 32×32 icon?
JL (June 18th, 2007, 12:15 pm)
Also check out this “I love” favicons: Link [www.ndesign-studio.com]
krull (June 18th, 2007, 5:29 pm)
typo3.org FTW! :D
manish (June 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 :-)
Martin S (June 19th, 2007, 8:50 pm)
The favicons on Link [www.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.
iddaa (June 21st, 2007, 11:24 pm)
Realy great icons.
i will use as soon as possible.
Mostafa Darvishzadeh (June 22nd, 2007, 3:50 am)
not bad
i’m making an icon for my website ;)
Jopie (June 26th, 2007, 11:24 am)
I like the one from viddy: Link [viddy.nl] Quite slick and simple.
Sebastian (July 2nd, 2007, 4:03 pm)
Awsome collection, well done ;-)
Matty (July 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 ;)
Alb3rt1 (March 8th, 2008, 6:35 am)
If you want you can add in your pages my icon set !
You can find it Link [www.tyvm.eu]
Thanks
CH Web Design Northern Beaches (April 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!