Smashing Magazine we smash you with the information that will make your life easier. really.
Inspire Yourself: 50 Remarkable Favicons
January 31st, 2007 in Graphics | 163 Comments
Actually it’s a pity that many designers don’t really make use of them. Favicons, mini graphics for a particular web-site, can be displayed in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document interface. To be recognized immediately, favicons have to be visually appealing and fit to the design or logo of a given page. In fact, if you use Favicons for your sites, users can easily find your URL in their bookmarks - in this way you create some kind of a visual connection between your web-site and your sites’ visitors.
However, the design of Favicons can be tricky - it isn’t that easy to create a beautiful 16×16px mini-icon. Still, some designers manage to achieve tremendous effects. Logotypes with clear geometric structures are easier to work with than typefaces or abstract images. The color selection corresponds to current Web 2.0 trends. Let’s take a look at 50 beautiful favicons you can inspire yourself from. You can click on favicons - they lead to a page, which uses the image as a page icon.
Petal
 |
http://www.aurea.es/ |
 |
http://www.fxis.net/ |
 |
http://www.divshare.com/ |
 |
http://www.tanyamerone.com/ |
 |
http://www.akken.com/ |
 |
http://www.kepu.net.cn/english/ |
Rounded Elements
 |
http://www.fat-man-collective.com/ |
 |
http://www.lisensa.com/ |
 |
http://www.lorop-it.de/ |
 |
http://www.akamai.com |
 |
http://www.cogmap.com/ |
 |
http://www.colorwarepc.com/ |
 |
http://www.evozon.com/ |
 |
http://www.diabetesgate.de/ |
 |
http://www.adelaidemetro.com.au/ |
Letters and Typography
 |
http://www.cubexagency.com/ |
|
http://www.lisensa.com/ |
 |
http://www.somox.com/ |
 |
http://www.piqniq.jp/ |
 |
http://www.eight6.com/ |
 |
http://reachgroupconsulting.com/ |
 |
http://www.flexy.info/ |
 |
http://www.kiva.org/ |
Ornaments
 |
http://www.imthere.com/ |
 |
http://www.elevenmedia.com/ |
 |
http://www.roisure.com/ |
 |
http://www.pixellogo.com/ |
 |
http://www.thinkpinkstudio.com/ |
 |
http://www.mattwebb.com.au/ |
Squares
 |
http://www.sumagency.com/ |
 |
http://www.indesign.einsteiger-portal.de/ |
 |
http://www.kirkpatrickbank.com/ |
 |
http://deforum.ru/ |
 |
http://www.imasters.com.br/ |
 |
http://www.ouvaton.coop/ |
 |
http://detlog.org/ |
 |
http://www.ministrycamp.com/ |
 |
http://www.getpaint.net/ |
 |
http://microformats.org/ |
 |
http://www.kath-thun.ch/ |
 |
http://www.campus-and-more.de/ |
 |
http://pro-buero.com/ |
 |
http://www.quada-office.de |
 |
http://www.modulio.net/ |
Further Favicons
 |
http://www.joomlart.com/ |
 |
http://letterpop.com/ |
 |
http://www.illustrationclass.com/ |
 |
http://www.trendwatching.com/ |
 |
http://www.edag.hu/ |
 |
http://www.elektro.de/ |
Favicon Tools
- Favicon Generator
- Favicon Generator 2
- Even More Favicon Generators
- Favourite Favicons
A growing collection of beautiful Favicons all around the world. - Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop
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
deprisa (January 31st, 2007, 2:00 am)
Some of them are really really nice. Good little works… I think i am going to spend a while playing with the chami favicon generator tool.
;)
Chris Poteet (January 31st, 2007, 2:00 am)
Thanks! I really appreciate this site.
joey (January 31st, 2007, 8:48 am)
Thanks for putting Piqniq on there, we appreciate it!
One suggestion: how about adding HREF links to all of the sites?
xxdesmus (January 31st, 2007, 11:55 am)
Personally, I like my favicon… (it’s the four seasons)
Link [www.xxdesmusxx.net]
Paul Stamatiou (January 31st, 2007, 11:58 am)
I like my favicon - a dropshadow’d blue square with a white outline and a big “P” inside it.
Uzbek (January 31st, 2007, 1:17 pm)
Nice, but I guess you should rename the article to “Favico’s and Favico creation tools” or something…
I did like the tools rather than favicos… But you know, they set the kind of standart for favicon to create in the future…
Thanks,
Uzbek.
Amish (January 31st, 2007, 1:44 pm)
I don’t know if there is an official “standard” on the favicon, but one site I ran into did something that I haven’t seen elsewhere:
Link [www.egadideas.com] has an animated favicon (even when it is viewed in a bookmark).
It works in Firefox 2.0.0.1 for Windows, but not in IE 7.0.5730.11IC for Windows.
Maris Awris (January 31st, 2007, 1:57 pm)
nice square design.
Maris Awris (January 31st, 2007, 1:57 pm)
Link [www.0com.net]
Dave Bowker (January 31st, 2007, 2:17 pm)
2nd one down is the cream logo :P
…and the site logo is the same apart from a little bevel.
Chad (January 31st, 2007, 3:07 pm)
Yeah its pretty snuts what can be done with 16×16 pixels.
They are especially great when using tabs in Firefox.
Check mine out, letter c in a sparkle…
Geekoid (January 31st, 2007, 3:52 pm)
Wonder what Cingular would think of somox.com’s one! Looks almost identical to their logo. Color even matches.
susan (January 31st, 2007, 4:57 pm)
I like this animated icon:
Link [www.ip-adress.com]
Inkoherence (January 31st, 2007, 5:16 pm)
I like my favicon: Link [www.inkoherence.com]
What do you think?
STUDIO7DESIGNS (January 31st, 2007, 6:14 pm)
Our photography site used a square photograph and turned it into a really nice favicon. We have been using it for a few years now with great success :)
Link [tools.dynamicdrive.com]
Dynamic Drive lets you save your images as .gif, letting you have transparent background.
Our site Link [www.arbutusphotography.com] recently made a favicon with a transparent gif. Its a pain to get it perfect looking but its well worth the time!
Josiah Pugh (January 31st, 2007, 6:16 pm)
Simply beautiful. I’ve found favicons the most difficult to design because of the 16×16 palette on which to work.
Ivan Minic (January 31st, 2007, 6:35 pm)
Very nice… All these are so clean and colors are so nice!
adam buxton (January 31st, 2007, 6:36 pm)
I have had a Favicon for a while, but only because I thought it was an interesting little thing to have did not consider the implications and practical uses of one until now. excellent article.
Stephan (January 31st, 2007, 6:47 pm)
It would be great to show some animated favicons here.
Sean (January 31st, 2007, 8:29 pm)
The biggest problem I’ve had with favicons is assigning them to pages in a way that works with IE and Firefox. I wrote a tutorial about this here:
Link [www.sean.co.uk]
felix (January 31st, 2007, 8:43 pm)
im a big fan of poke londons - first animted favicon which inspired me! Link [www.pokelondon.com]
Jason Bates (January 31st, 2007, 8:51 pm)
Some amazing favicons on show here. There certainly very remarkable.
John (January 31st, 2007, 9:47 pm)
Nice, but I didn’t see any sort disclaimer about usage. I’m assuming that none of these can be used….but yes they do inspire. Makes my Favicon look pretty ugly….maybe I will try to make a new one…
John
Link [www.monomachines.com]
milo (January 31st, 2007, 10:25 pm)
Pretty easy to make your own favicon without any helpers, reference it in the header.
Aaron (January 31st, 2007, 10:41 pm)
Personally one of my favorite favicons is the one on Link [ballisticpixels.com]
Bryan (January 31st, 2007, 11:27 pm)
Vote for your favorites at:
Link [likebetter.com]
Channel Chose (January 31st, 2007, 11:54 pm)
Quite interesting, they look like vector graphics in pixel format.
CSS Guy (February 1st, 2007, 12:34 am)
Here’s a way to show off the favicons of people you link to.
Hyperlink Cues with Favicons:
Link [www.askthecssguy.com]
Keith (February 1st, 2007, 8:10 am)
I believe Link [www.neohide.com] also deserved some mention *wink*.
Darren C (February 2nd, 2007, 6:10 am)
Link [www.thebrits.com]
Hung Dinh (February 2nd, 2007, 5:29 pm)
Thank you for recommending JoomlArt.com icon :)
Paul (February 2nd, 2007, 6:40 pm)
On our website we use a handbuilt icon representing our building: Link [www.vno-ncw.nl]
Agence Web Lyon (February 6th, 2007, 3:05 pm)
Great Petal favicon here Link [www.poleymieux.fr]
Kate Mag (February 12th, 2007, 5:38 pm)
great favicon resources, thanks
Erick S. (February 15th, 2007, 3:46 am)
I am a big fan of Favicons! And I am actually quite proud of my own at my precious LINKAGE, a nice websites portal…It’s the head of the owl…Quite nice I think!
I resized a .GIF to get this result. It probably could be done better, but I like it this way.
apher (February 26th, 2007, 2:23 pm)
Thanks for your post.
i have made a favicon myself
Stephen (March 23rd, 2007, 12:17 am)
Your own favicon breaks the rule that if an icon is square, don’t take it all the way to the margins! Put a pixel or so blank border around it. For circles, triangles, etc. you need that whole space. Have you ever seen a square application icon that uses all the space? Same in typography: rounded letters like O are taller than square letters like E. Pointy letters, like V in lighter weights of Futura go below the baseline.
Gina Mikel (April 17th, 2007, 11:39 am)
Here is my attempt at favicons:
Link [www.scientificillustrator.com]
Gina Mikel (April 17th, 2007, 11:40 am)
My attempt at favicons is at Scientific Illustrator dot com slash illustration slash favicons dot html (a dragonfly, a tick, a bubble, and a gladiola)
Ulli (June 21st, 2007, 9:30 pm)
Nice to see what is possible with a few pixels!
Ulli
NIck (July 3rd, 2007, 2:56 pm)
Nice, good to see what is possible, and these days most designers don’t go that extra mile and give the client something that helps portray the site so well. And now that a lot of bookmarks in your browser use them as well, it is that little extra effort that makes some of these stand out.
Teen Nude (July 17th, 2007, 10:31 am)
Really good site!
thanks for the lists!
Danny D (August 27th, 2007, 10:26 am)
Thanks a lot, very interesting article , lots of leads.
I have bookmarked this site for future reading..Very good site.
Rosli (September 5th, 2007, 10:25 am)
Great site and I like the sharing. A lot of infos and I have generate a favicon for my site with my own picture =)
feha (September 12th, 2007, 8:51 pm)
Here is one more …
logo to favicon
Link [www.vision.to]
Prasanth (September 13th, 2007, 5:42 am)
Trendwatching favicon is something that I admire. Though it looks very much like RSS icon, its pretty good.
اغاني (September 15th, 2007, 12:13 pm)
I Really like these sweet icons
plz don’t forget to add some hearts:)
Ebay Blog (September 19th, 2007, 12:58 am)
Awesome collection!
Thanks a lot for sharing!
After watching these creative icons, I made an icon for my blog and (at last! :) ) replaced the default Drupal icon.
結婚相 (September 20th, 2007, 2:45 pm)
Good article. Fun too. However, you may want to point out WHY hacks are stupid and direct n00bs to some good sources for using CSS layouts without hacks.
LGR (October 10th, 2007, 5:27 am)
Those favicons are beautiful. Another tool I like to use to generate a favicon from an image is Link [www.freefavicon.com]
They also have some favicons to download and use if people don’t feel like making their own.
knauf (October 25th, 2007, 1:46 am)
Nice collection - unfortunately none of these icons can be used for any other project. Perhaps you should make also a collection of open-source favicons which anybody could use on his webpage.
CafeTime (November 20th, 2007, 7:27 am)
I have old favicon but good. You inspired me. THX
maximum (November 29th, 2007, 5:14 am)
Further Favicons is good!
W00dstock (January 3rd, 2008, 6:33 pm)
You forgot this one
Link [www.gabbr.com]
from Link [www.gabbr.com]
oleg (January 4th, 2008, 3:50 am)
check favicon at skrinda.com ;)
dannydowney (January 6th, 2008, 11:29 pm)
This site never ceases to amaze me…great post. I will check out that tool.
Have another Great Year of Being a Smashing Magazine!
Ms. Techie (January 10th, 2008, 3:44 am)
Way to go - love the collection of favicons.. some are quite well thought out - other than being the brand logo.
I like this site’s own favicon it stands out amongst other web browsers icons and is easily noticed…
Psy (January 21st, 2008, 1:17 pm)
Thanks for sharing!
Some icons are really really good. Nice little works!
Umar Farooq (January 23rd, 2008, 10:26 am)
Great Share!
Awesome stuff!!
Cheers!
WDG (January 28th, 2008, 8:10 am)
Nice collection!
I’ve just made mine, a simple yellow “W” on a blue background (check it out by clicking my name).
I’ve used the following free plugin from Telegraphics and PS CS3:
Link [www.telegraphics.com.au]
A tip: start by creating a bigger document (64×64) then resize to 16×16 when you’re satisfied. Now you can save as ICO (Windows icon).
James (March 21st, 2008, 3:00 am)
Great post, I love icons to increase my navigation around windows, if I am working on a certain project. .I will add a suitable icon to save time when looking for files
Marcis Gasuns (March 22nd, 2008, 12:16 pm)
Some are inspiring, the round ones are the best.
Evo08 (March 23rd, 2008, 2:56 pm)
Really needed this , thanx .
chris (April 28th, 2008, 10:59 am)
Nice overview of favicons (and blog, for that matter). I created a simple tutorial on how to create a favicon using pages (from apple iwork suite) here: Link [www.cjupin.com]