Smashing Magazine we smash you with the information that will make your life easier. really.
Favicon Episode 7
June 24th, 2008 in Design Showcase | 63 Comments
Every now and again we showcase beautiful favicons — tiny pieces of art you’ll usually find in your browser’s address bar or when searching through your bookmarks. Favicons are important as they provide visual indicators to visitors and help them to easily associate the content with a bookmark in their browser. Besides, favicons are just nice to look at and there are way too many sites which don’t make use of them. We like to change things. Which is why here is the 7th episode of the favicons series.
We’ve written enough about favicons in our recent posts. If you’d like to find out more about them, feel free to take a look at our previous posts:
- Part 1: Inspire Yourself: 50 Remarkable Favicons
- Part 2: Inspire Yourself: More Creative Favicons
- Part 3: Creative Favicons: When Small Is Beautiful
- Part 4: Creative Favicons: Tiny Artwork
- Episode 5: The Delicate Beauties
- Favicon Episode 6: Black, Abstract and Hand-Drawing
Favicon Episode 7
The favicon of the month was designed by Google. To improve the scalability on new platforms like the iPhone and other mobile devices Google has replaced the old favicon with a new one first after 8.5 years. Not only that - Google has released a whole favicon family which you can observe in a number of Google applications. The primary Google’s favicon is displayed below:
However, some designers claim that Google’s new favicon is ugly and Denis Kortunov knows how to draw a good icon for Google. Here is an example of how it might look like:
…or like this:
…and this is how the favicon could look like:
Below you’ll find 69 further outstanding favicons. Let’s start with the dark ones. Please notice that the favicons weren’t chosen simply because of their beauty; it’s been important to us that the favicon perfectly fits to the overall site design. All favicons are linked to the sites where they are used — you can click on them to get more insights into how favicon design can be related to the layout design.
Black and Grey
Blue and Green
 |
Rhaya |
 |
Fused Network |
 |
urbanphes |
 |
eliectricurrent |
 |
arhibet |
 |
Eden |
 |
Quadrifolia |
 |
Twhirl |
 |
laterloop |
 |
Jeux de Maux |
 |
emtwo |
 |
visible.net |
 |
SAS |
 |
Infinity Art |
 |
Teddy Hwang |
 |
Get a Freelancer |
Drawn
 |
wagner graphics |
 |
Sail Select |
 |
Arty Crooks |
 |
SmugMug |
Orange & Red
 |
anaconsol |
 |
Headscape |
 |
nickstedt web |
 |
HEBAtec |
 |
Panoye |
 |
Designer’s Toolbox |
 |
Keinu |
 |
suggest.name |
 |
Ebugogo |
 |
Fruit |
 |
iPhone Lemurs |
 |
Capture All |
 |
Pro Webdesign |
 |
Sprout |
 |
Overheard in New York |
 |
Toomix |
 |
Mixx |
 |
Faveup |
 |
Computerlove |
 |
ChaCha |
 |
Pop Art Blog |
 |
colorcubic |
 |
Barrierekompass |
Other
 |
Infosthetics |
 |
rgb6 |
 |
yellowgreen |
 |
turistik.cz |
 |
Digialmesh |
 |
Protein OS |
 |
Kean Richmond |
 |
Xen |
Extremely colorful favicons
 |
Salle Polyvalente |
 |
ALXA |
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 40 Free Fonts
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 65 Flash Designs
- Beautiful Icon Sets
- Beautiful Wallpapers
- Beautiful Photos
- Free Design Templates
- Free CSS Layouts
- Photoshop Tutorials
- Illustrator Tutorials
All Posts
- 35 Designers × 5 Questions
- 50 Designers × 6 Questions
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Badges and Pins
- Black & White Photography
- Block Quotes
- Blog Designs
- 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 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
- 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
- Form Design Patterns
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- 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
- Laptop Sleeves
- Laptop Designs
- Link Building
- Links in New Windows?
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Packaging Design
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel Art
- Podcasts
- PNG Transparency
- Portfolios
- Product Designs
- RSS Best Design Practices
- RSS Feed Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- 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
- Typography Showcase
- Typography BIG 1, 2
- 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
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
- WYSIWYG Editors
Webtips
Fresh Bookmarks
50 Beautiful Gig Posters
"The gig poster scene isn’t exactly the best kept secret among music fiends like myself. It is a tradition that started in the 60’s and is still going strong."
An Ode To Criterion Box Art
The showcase of DVD box art design.
How Usable is Your Copy?
There is one element that should not be ignored as it alone can waste all the hard work you’ve put into crafting a beautiful UI. Copy.
Is There Anything You Wish CSS Could Do?
15 Designer/Developers Sound Off
Color inspiration from Rainbows
A gallery of rainbow photos.
Seek Attention jQuery plugin
The “seekAttention” plugin gracefully gets your users attention by fading out a definable area but leaving the target element.
Yahoo Design Stencil Kit
This kit contains basic UI design templates (grids, placeholders, tabs, navigation, pagination etc.) and is available for OmniGraffle, Visio (XML), Illustrator (PDF and SVG), and Photoshop (PNG). Useful for wireframing.
Mayank Patel (June 24th, 2008, 3:06 am)
great examples….love the google one that Denis Kortunov’s done!
Mayank
prathap (June 24th, 2008, 3:07 am)
extremely good
Wade (June 24th, 2008, 3:14 am)
Cool, loving the mini Art! :)
Natrium (June 24th, 2008, 3:14 am)
Smashing Magazine is back on track with a series of good posts in a row!
Erik Reagan (June 24th, 2008, 3:19 am)
I love rgb6’s simply due to the colors vs the letters. :)
IsmSal (June 24th, 2008, 3:23 am)
Smashing Magazine Is the best magazine. It offers the best subjects
BT (June 24th, 2008, 3:36 am)
The ALXA icon links to the Salle Polyvalente page. You might want to change that…
sundaydriver (June 24th, 2008, 3:56 am)
Thats just amazing :D I really love this one. It is practical and gave me some great ideas for doing a website :D
ptamaro (June 24th, 2008, 4:23 am)
Nice assortment. I’m wondering how well they hold-up in terms of their alpha-transparency on backgrounds other than white?
Kean (June 24th, 2008, 4:30 am)
Some great examples of great design in such a small space, plus seeing my own favicon there is awesome.
Steve Killen (June 24th, 2008, 4:34 am)
It’s amazing how creative someone can be in 16 square pixels of space!
Tadd Mencer (June 24th, 2008, 4:41 am)
I use a photo turned to a .fav as my favicon on my site. I think Favicons have become kind of like .. a business card. They tell you what site you’re on visually before people really even read. When I have multiple tabs open in FireFox, it’s the easiest and fastest way for me to tell what is what. Since I’m illiterate.
You can see my favicon in action at Link [www.taddmencer.com] if you’re interested in seeing.
Yury Akulin (June 24th, 2008, 4:53 am)
I use a part of my logo for the favicon ’cause I think using the whole logo would make a mess at 16×16 size. Here it is: Link [www.logodiver.com]
latejedora (June 24th, 2008, 5:11 am)
I like the big coloured G… Google should consider to adopt this one!
Marie (June 24th, 2008, 5:12 am)
Google could really use a new favicon…
Raul Riera (June 24th, 2008, 5:20 am)
Can the favicons be animated?
rezr (June 24th, 2008, 5:22 am)
Is there a quick way to capture the favicon? How do you do?
la lène (June 24th, 2008, 5:55 am)
Thank you very much for mentionning my website again. =)
Carlos Taborda (June 24th, 2008, 6:03 am)
Thanks for mentioning mine too :D but hey our name isn’t Xen! I hope Citrix doesn’t see this cause they might not like it haha :D
Thanks
antipix (June 24th, 2008, 6:53 am)
salle polyvalente’s favicon makes me sick!
WebGyver (June 24th, 2008, 8:10 am)
Smashing article!
Love that Google favicon by Denis Kortunov! (By the way, thank you for using one of my favicons in your examples.) And keep up the good work.
Lâm (June 24th, 2008, 8:17 am)
Check mine, it’s animated and lovely :)
Link [www.monsieurlam.com]
Mel (June 24th, 2008, 8:27 am)
Thanks for including Emtwo’s favicon!
Krista Sanders (June 24th, 2008, 9:38 am)
Thank you for including the iphone lemurs favicon!
zero0x (June 24th, 2008, 9:40 am)
extreme colorful looks awful :D
mike harris (June 24th, 2008, 10:15 am)
“Extremely Colorful” should read “extremely annoying”. It’s like a horrible little banner ad only I didn’t “win” anything.
The rest though are fantastic.
Josh (June 24th, 2008, 11:03 am)
Bleh, I rather dislike Dennis’s suggestions for a “better” Google favicon.
Stankiewicz (June 24th, 2008, 12:19 pm)
The Google’s alternative icon looks like Windows Media Player icon. Don’t you see it?
Lindsay (June 24th, 2008, 1:05 pm)
I like the new Google favicon! I think Denis’s suggestion looks too much like something made by Windows. Definitely not what Google wants.
Thomas Milburn (June 24th, 2008, 1:13 pm)
Another good collection of favicons. Although Google’s favicon may be ugly, does it really matter. A good favicon should stand out from the rest, which Google’s does and should be closely linked to the website. The Google favicon has had so much publicity, everyone knows it stands for Google!
BTW Aren’t the animated icons cheating seeing as they are actually animated gifs as opposed to true icons.
Rodder Shen (June 24th, 2008, 1:46 pm)
I love this one Link [www.gotocss3.com]
Cho. P (June 24th, 2008, 2:33 pm)
I think the one at Ploc Media is pretty neat, simple but bold.
Lisa (June 24th, 2008, 2:51 pm)
I love favicons. It’s gotten to a point where I could leave most sitename blank, and know what I’m looking for just from the favicon. I get so sad when I find a website that doesn’t have one. It makes my bookmarks and tabs look so drab.
hongkiat (June 24th, 2008, 6:42 pm)
Thanks for the mentioned :-)
Two Socks (June 24th, 2008, 10:12 pm)
Must admit the new google favicon is rather quiet ugly. Denis Kortunov attempts to capture there current market alot better i believe.
Its and interesting post thanks smashing magazine, favicons can certainly be a tricky thing to nail perfectly !
kristarella (June 24th, 2008, 10:43 pm)
I think the old Google favicon was more effective on a small scale.
I especially like Our Type and Fakeblog.
Aaron Riddle (June 25th, 2008, 8:31 am)
Great list! Not a fan of the “Salle Polyvalente” icon though…
ferdhie (June 25th, 2008, 8:46 am)
I still prefer the present G icon. Much easier on eyes and less obstrusive ;)
nice article though …
Dan Grahn (June 25th, 2008, 9:15 am)
To anyone who’s looking for how to do the animated ico’s (it took me like half an hour to figure out) just make an animated gif and rename to an icon fie.
Lahure_dai (June 26th, 2008, 7:02 am)
hello smashing, these are cool favicon.
could you also list some software that are specifically designed to design favicon. thanks.
Visible.net (June 26th, 2008, 8:10 am)
Great post and series. Thanks for mentioning the Visible favicon!! Personally, I have always liked the Smashing red/white “S” favicon you have now. The Google one is sweet too.
Joseph Maguire (June 26th, 2008, 8:55 am)
Google is not about pretty. Google is about recognition. I find all of the three alternatives that your provider of art for the favicon replacement of google’s favicon to be less readable as the Google brand. Lets remember a favicon is meant to be apart of brand recognition. And it may not be tied to a piece of type it has to exist on it’s own so to speak. Ultimately it’ll live in bookmarked pages so regardless of your eye sight you can connect more immediately to the brand.
That being said the favicon could be updated and be more readable but I’d be hard pressed to find something without a g in it and being the same typeface as the mark’s g. Oh by the way the G that your contributor made for the 4 color Capital G looks completely like a beachball when compressed to 16×16.
I Think some of the favicon work that was provided was interesting but fell short of having a point, in design theirs no point to create if you cannot communicate. Icons take time to read and if they do not instantly connect the user with a piece of communication it ultimately fails. And I think some would argue communication is tied hand in hand with creating any good piece of art unless the intention is to be vague altogether.
Sincerely,
Joseph Maguire
Joseph Maguire (June 26th, 2008, 8:57 am)
One other thing. the S from smashing magazine is a perfect example of a well created favicon. its readable, and everyone who’s visited this site will recognize it.
Sincerely,
Joseph
Farid Abdulhadi (June 27th, 2008, 2:15 am)
Google’s new favicon does look good. So does Smashing Magazine’s. Eden has also done a great job. I need to start work on mine, thanks for the reminder.
riki (August 1st, 2008, 4:06 am)
The best and most practical use of a Favicon is the W3C’s validator page. Link [validator.w3.org]
If you see a green favicon, you know immediately that you page has passed validation and you can close the the window without waiting for the rest of the page to download.
If it’s a Red Favicon, you’ve still got some work to do.
cartouche (August 25th, 2008, 7:20 am)
Here is a nice favicon: Link [www.printeva.com]
A multicolore origami
Gökhan Yavuz (September 16th, 2008, 9:59 am)
Perfect!Thanks Smashing Magazine.
Reichelt (October 3rd, 2008, 10:47 pm)
Thanx a lot, This helped me out.
L. Reichelt
Link [www.cssstyle.me]