
Smashing Magazine we smash you with the information that will make your life easier. really.
Creative Favicons: When Small Is Beautiful
By Smashing Editorial, June 14th, 2007 in Graphics | 87 Comments | Forum
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
![]()
![]()
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Stay in touch
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 75 JavaScript Techniques
- 70 Best Photoshop Tutorials
- 70 Best Illustrator Tutorials
- 53 CSS Techniques
- 50 Blog Designs
- 50 Graffiti Artworks
- 50 Brilliant Photos
- 50 Movie Posters
- 40 Free Fonts
- 40 Creative Layouts
- 35 Beautiful Icon Sets
- Beautiful Desktop Wallpapers
- Beautiful Macro Photos
- Beautiful Underwater Photos
- Free Design Templates
- Free CSS Layouts
All Posts
- 35 Designers × 5 Questions
- 50 Designers × 6 Questions
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- AJAX Tutorials
- Badges and Pins
- Batch Image Processing
- Black & White Photography
- Block Quotes
- Blog Designs 1, 2, 3, 4, 5
- Blog Headers
- Book Covers
- Brochures and Booklets
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Calendar Designs
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Clean Code
- CSS Editors
- 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
- Divine Proportion
- Domain Tools
- Dreamweaver Tutorials
- Drupal
- 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, 5, 6
- Font Management
- Form Design Patterns
- Forums
- Fractals
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graffiti
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Style 1, 2
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4, 5
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- JavaScript Techniques
- jQuery
- Laptop Sleeves
- Laptop Designs
- Link Building
- Links in New Windows?
- Macro Photography
- Mascots
- Moleskine Art
- Motion Graphics
- Motion Blur Photos
- Movie Posters
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Packaging Design
- Pagination
- PDF Magazines
- Photoshop Actions
- Photoshop Tutorials 1, 2
- Pixel Art
- Podcasts
- PNG Transparency
- Portfolios
- Pricing Tables
- Product Designs
- Rain Photography
- RSS Best Design Practices
- RSS Feed Icons
- Screencasting
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Smoke Photography
- Source Code Editors
- Splash Pages
- Start Pages
- Stock Icons
- Space, Nebula wallpapers
- Tab-Based Interfaces
- Tag Clouds
- Textures
- Textures & Backgrounds
- Texture Design
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typographic Posters
- Typography In Motion
- Typography Showcase 1 2, 3
- Underwater Photography
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Version Control Systems
- Vintage & Retro Posters
- Vintage & Retro Designs
- Vintage & Retro Tutorials
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Weblog Engines
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
- Wordpress Toolbox
- WYSIWYG Editors
Fresh Bookmarks
25 Beautiful Logos with Sequential Concept
Sequential logos maybe is a new trend among logo designers.
Designing a blog with HTML5
Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages.
20+ CSS Data Visualization Techniques
Get inspired.
CSS3 – a big storm is coming
With CSS3 media queries and multi-column layouts it will be a whole new ballgame.
Woodgrain: A Free Social Media Icon Set
With 18 social networks represented alongside astandard RSS icon in PNG format,
Webdesign: Five Minute Upgrade
Making Your Design Pop.
45 Stylish Typographical Desktop Wallpapers
These beautifully designed wallpapers are not solely about typography.
The Light CMS Trend
A new trend in CMSs I’m calling “light” CMSs.
10 Impressive JavaScript Animation Frameworks
Create stunning and eye-grabbing animation and transition effects.
Linux System Monitoring Tools Every SysAdmin Should Know
Need to monitor Linux server performance?
Blogroll
- Bittbox
- CatsWhoCode
- Colorburned
- Design Disease
- Designm.ag
- Deziner Folio
- Dr. Web Magazin (.de)
- Dr. Web Shop (.de)
- Freshome Blog
- FudgeGraphics
- I Love Typography
- MakeUseOf.com
- Naldzgraphics
- Noupe.com
- Pro Blog Design
- Search-This
- Six Revisions
- SmileyCat
- Spoon Graphics
- Typesites
- Usability Post
- Walyou
- Webdesigner Depot
- Weburbanist
- Wellmedicated








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].
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!
ali (September 18th, 2008, 9:06 am)
tnx you mr Link [www.Mihandownload.com]
Liane (November 27th, 2008, 3:02 am)
im nuts with big nuts, i love saying that XD,
Lou (November 27th, 2008, 12:00 pm)
Tammy, You have a lovely site with so many wonderful accolades.,