Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialNick Pettit
Treehouse TeacherForum Contest: Create a Favicon
EDIT: This forum contest has ended! The next forum contest is all about the CSS box-sizing property.
Hi everybody,
It's time for a new Treehouse Forum contest! First, watch this video to learn more:
After you've watched the video, please read the details below carefully. I'm looking forward to your entries!
How to Enter: Create a single image that contains your favicon at the following 3 sizes:
- 64x64
- 32x32
- 16x16
Then, upload your image to Imgur and post the link to your image as a answer to this post. Favicons are about pixel perfect accuracy, so remember that the design for a 64x64 icon might not look good when it's simply resized to 16x16. Also, please do not create .ico files for this contest.
Due Date: All entries must be submitted by Sunday, June 22nd at 11:45pm ET. Here's a timezone chart so you can see what time that is for your locale.
Prize: The entries will be judged by Treehouse teachers based on design. One winner will receive a free month of Treehouse Pro on us! :) We'll announce the winner on Monday, June 23rd and reveal the next contest.
Jeremy Lindstrom
54 PointsHere's my go it's for a location service website I am building. This is part of the logo.. http://imgur.com/tfPHGDI
46 Answers
Nick Pettit
Treehouse TeacherHi everyone,
You all did an amazing job this week! These are really amazing entries and you should all feel proud of the work you've done. Remember, entering forum contests regularly is not only a great way to practice your skills, but it's also an easy way to quickly build up your portfolio of work.
This week's winner is Tina Chen! Congrats, Tina! Her donut iconography was very well done and it looks great at multiple sizes; a critical component of this challenge. I should point out that we judge each and every entry individually. Tina did get the most upvotes, but that's because it's a great entry and not at all how we judge contests. Just wanted to clarify that!
The next forum contest is all about the CSS box-sizing property.
Dustin Matlock
33,856 PointsI must say I knew the established graphic designer was going to win! Congratulations, Tina!
Tina Chen
2,725 PointsThanks Nick and Treehouse! Great job to everyone that participated! This was a fun one. Looking forward to tackling a web development contest in the future.
And thanks Dustin :) I still have much to learn and there were lots of great submissions!
Tina Chen
2,725 PointsI'd rather eat the donut, but here it is in its favicon form! Enjoy all of its chocolate sprinkled goodness. http://imgur.com/a/2HarD
Eliot Winchell
8,341 Pointsgood job! looks great!
Tina Chen
2,725 PointsThanks!
Samuel Webb
25,370 PointsThis looks fantastic :)
Jennifer Crawshaw
17,878 PointsI love it!!
Tina Chen
2,725 PointsThanks Jennifer and Samuel!
Jon Bogdonsky
3,218 PointsMMmmm looks yummy!
Errin E. Johnson
22,458 PointsYour logo does have that I want a donuts effect..i think you spot on for favicon. :)
Dustin Matlock
33,856 PointsI like that one!
Errin E. Johnson
22,458 PointsVery Nice!
Errin E. Johnson
22,458 PointsHi Nicole, I thought you did a great job on getting such consistency on the pixels. If you would like to share what inspired the theme and any tips for us...great job...!
Nicole Vest
Full Stack JavaScript Techdegree Student 13,706 PointsThanks Errin! I made an illustration of a vest because it's my last name. I used Adobe Illustrator to create it. It uses vectors instead of pixels, so the edges stay smooth no matter how much you re-size your image. Here is a link to some other vector graphics editors if you do not have illustrator: http://www.smashingmagazine.com/2008/12/05/20-vector-graphic-editors-reviewed/
Hope that helps!
Nicole Vest
Full Stack JavaScript Techdegree Student 13,706 PointsThanks Errin! I made an illustration of a vest because it's my last name. I used Adobe Illustrator to create it. It uses vectors instead of pixels, so the edges stay smooth no matter how much you re-size your image. Here is a link to some other vector graphics editors if you do not have illustrator: http://www.smashingmagazine.com/2008/12/05/20-vector-graphic-editors-reviewed/
Hope that helps!
Tina Chen
2,725 PointsGreat job!
Errin E. Johnson
22,458 PointsLike the last name theme..you should some how let the theme inspiration be part of your contribution...It is part of your unique contribution to the world...thank you for the tip..on Ai..,i just recently started checking out Ai and will continue to delve deeper now. This is a skill set to be learned.
Alanay Serter
Courses Plus Student 2,461 PointsLooks k.
Alanay Serter
Courses Plus Student 2,461 PointsI made a little paper man, I thought it was kind of cute. Don't know if I'll use him for anything but I thought it would be worth it to share.
I drew the man 3 times for each resolution, so no resizing, just nice sharp pixels. :-)
http://i.imgur.com/U6T0BXs.png
EDIT:
I made another version with an angry face on the little guy. It's a lot more detailed with some AA but the smallest resolution isn't as clear as in the previous version in this one. =P
Santiago Barrionuevo
14,176 PointsThese are my first humble favicons: http://imgur.com/a/4bO4R
You have no chance! :D
Jorge Luis Comba
3,249 PointsGracias por el saludo! Muy bueno lo tuyo! A seguir!
Devin Scheu
66,191 PointsFTW http://imgur.com/gallery/tnddz Yay! 1,086 views! Thanks!
And thanks for the wonderful comments:
mosesisreborn: thumbnailur.com >
· brankic82 : Great!
· SonjaStankovic : Yeah...
· nemanja87bgd: I like it!
Stefan Osorio
16,419 PointsHere's my submission: (Intended for a blog about cooking and activism ^^) http://imgur.com/NJApzI1
Eliot Winchell
8,341 PointsHi! My middle name is Saylor so I thought I would create a "Favicon" of a sailboat. I shaded it as well! http://imgur.com/a/JxLpB That has all three linked together in an album.
Backup:
64x64: http://i.imgur.com/rXDH8JS.png
32x32: http://i.imgur.com/RJk0oJR.png
16x16: http://i.imgur.com/d8446Vi.png
Andrew Helton
4,681 PointsHere's my quick favicon mockup: [http://imgur.com/a/6xuC3]
Jorge Luis Comba
3,249 PointsHi! From Argentina, this is my favicon! Fifa World Cup Theme ;)
http://imgur.com/wjmB4r1 http://imgur.com/WFhnwJa http://imgur.com/gtvBtqb
Santiago Barrionuevo
14,176 PointsMuy bueno! Saludos de Argentina también!
Jon Bogdonsky
3,218 PointsMy submission http://imgur.com/hJzZ2PU Great submissions everyone!
Tina Chen
2,725 PointsNice one!
Jon Bogdonsky
3,218 PointsThank you! :)
Mireille Pasos
35,469 PointsHere's something I made for a website a few months ago, I thought I'd give it a try submitting it here :) Really good works so far. Good luck, everyone!
Mireille Pasos
35,469 PointsThanks!
Nathan Newell
7,634 PointsHere is my design :) I look forward to seeing all the submissions!! http://imgur.com/Poj79Zy
Nathan Newell
7,634 PointsThanks :)
Tina Chen
2,725 PointsNice and simple. I ilke!
Ansif I
3,300 PointsHi here my fav icons : http://imgur.com/a/sn7DY
Icons in separate links :
+ 64x64 - http://i.imgur.com/8QqyZkj.png
+ 32x32 - http://i.imgur.com/bXJGmJB.png
+ 16x16 - http://i.imgur.com/e0J9K8Z.png
All are in rounded corners and .png formats.
Thanks!
enriqueguzman2
17,644 PointsHere is my favicon, it is my First and Last name initials "Enrique Guzman" = EG: http://imgur.com/a/E7LWw
chrism325
5,570 PointsThat's a pretty wicked design, nice work!
enriqueguzman2
17,644 PointsThanks Chris !! Yours is pretty neat.
Andrew Helton
4,681 PointsNice. Looks good.
enriqueguzman2
17,644 PointsThanks Andrew !! Hope anyone of us win.
Erik Cruz
10,381 PointsMy favicon is a skull apple on a stick, I tried to keep as much detail as possible. =) http://imgur.com/EBEeG8t
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsMy world cup themed entry: Brazil Flag Favicon
Patrick McQuillan
2,219 PointsMy first FavIcon, Enjoy! http://imgur.com/a/wSHNg
Jeremy Lindstrom
54 PointsHere's my go.. it's from a location tracking service I am working on.. it's part of the logo.. http://imgur.com/tfPHGDI
Jennifer Crawshaw
17,878 PointsI love it! Very cool!
Jon Bogdonsky
3,218 PointsVery good!
Jeremy Lindstrom
54 PointsThanks!!
Chetan Thaker
2,390 PointsThe favicon has to be of TreeHouse or any other company / personal name we like?
Nick Pettit
Treehouse TeacherGreat question! It can be for anything. :)
Al Lu
UX Design Techdegree Student 15,801 PointsWhat about the img format? One of the big three (jpg, png, gif) is OK or only ico format?
Benjamin Palladino
13,297 PointsIn order for an icon to show up in the title tag of html it must be in .ico format.
Cornel DV
1,865 PointsI think just jpg is all right. Don't make it a .ico format, thats only important for your website. Nick wrote: "Also, please do not create .ico files for this contest."
Nick Pettit
Treehouse TeacherJPG, PNG, and GIF are all fine, although I recommend you use PNG for the best visual fidelity.
Joe Morello
1,734 Pointswhat's the logo? is for TreeHouse?
Nick Pettit
Treehouse TeacherIt can be for anything you'd like!
Cornel DV
1,865 PointsI tried to make the Treehouse frog as favicon! Here you go http://imgur.com/TYIcBCY
Dustin Matlock
33,856 PointsHey Nick, here's my shot.
Bill Hinostroza
19,273 PointsDecided to give it a try. Here you go. http://imgur.com/a/2MSUd#0
Oscar Yu
Courses Plus Student 1,282 PointsDecided to give it a try! Used some techniques from one of Nick's videos! I'm not really sure if this is how we're supposed to display it. Do we give you separate links? 3 favicons in one pic? I really wanna win this!!! 16x16 Favicon: http://imgur.com/OfdpFMa 32x32 Favicon: http://imgur.com/ZqLNhAI 64x64 Favicon: http://imgur.com/LWZZ7hv
Benjamin Palladino
13,297 PointsHere is my album of 3 sized pics. They are hard to see because they are black. I created a paw print favicon. http://imgur.com/a/CxcTK#2
Ryan Ackermann
2,831 PointsI call it DiaPause! Maybe used to serve as a logo for a company that makes "PAUSE" buttons for television remotes :P <br> View Submission
chrism325
5,570 PointsThis was a lot of fun to make! Thanks for the challenge! http://i.imgur.com/oLxFr1p.png
chrism325
5,570 PointsAll of these rounded rectangles made me want to see what the effect would look like in my design. Here's an alternative submission which I like a bit more than my original. http://imgur.com/5s2RU4j
Eric Flowers
9,472 PointsLogo I created for my portfolio.
Holt Hunter
4,629 PointsHere is my favicon It is for the website Scrapic.com that we are making. http://imgur.com/a/eSnQ6
Moath Ergesows
2,803 PointsRodger Voelkel
21,736 PointsI have been considering making a portfolio site and this is one of the concepts I came up with for a logo for it. http://imgur.com/a/J8CdO#2
Adam Bennett
7,663 PointsHere is my submission. This is my first try at making favicons from scratch. I hope you like them. http://imgur.com/MoFu8A7
Robert Komaromi
11,927 PointsHere are my favicons: http://imgur.com/a/yla16#0
I created them with X-Icon Editor... it's suppose to be a coloured window. Converting the ICO files to PNGs definitely decreased the quality though, since they were pixel perfect with X-Icon Editor.
Jennifer Crawshaw
17,878 PointsHere are my favicons: http://imgur.com/a/mjLm0
These were created for my Fitness Webpage, based on my logo. I'm really excited that I was able to create these! I used GIMP.
Jeremy Lindstrom
54 PointsGreat start, I would ditch the gradient and make it black and white the silhouette looks great, but gets lost a bit in the gradient and the color selection (looks great, just my little nitpick) <-- artist. :)
Jennifer Crawshaw
17,878 PointsThanks for the ideas Jeremy! And thank you for checking them out :-)
Leandro Kondo
2,915 PointsHere's the favicon I've made for my portfolio: http://imgur.com/a/7mPPE
Dwayne Cyrus
8,878 PointsHere is the favicon for my portfolio website that I have been working on.
I would love to hear your thoughts: http://imgur.com/a/JPPQk
Eliot Winchell
8,341 Pointsthat looks awesome
Eliot Winchell
8,341 Pointsthat looks awesome
Dwayne Cyrus
8,878 PointsThanks a lot Eliot!
Errin E. Johnson
22,458 PointsHi Dwayne, I see you are also feeling the "golden ratio" , Great place to start...and expand from...:) looks good...i notice some blue with zoom but the ones you uploaded look nice...and clear..great job!
Errin E. Johnson
22,458 PointsStefan Osorio
16,419 Points"errinjohnson's images are not publicly available" You might want to change that ;)
Errin E. Johnson
22,458 PointsHow about now..I had to verify my email..new registration.
also link to full logo...where my idea is evolving. http://alchemymomentum.com/
Dustin Matlock
33,856 PointsLooks like it's working now.
Errin E. Johnson
22,458 Pointsthank you Dustin
Errin E. Johnson
22,458 PointsI was amazed how challenging this was...:) My favicon started out as a logo and tried to get favicon done before contest...just couldn't get the clarity i wanted ...but i got a lot of practice.. and would love the feedback because this is a start to my biz logo...
Tina Chen
2,725 PointsHi Errin- for your favicon, I would use just the curved shape in your logo and leave out the A&M. It's identifiable and more striking that way. For you logo, I love the shape and idea. My only thought is the shape looks like it's going down. Perhaps it can be flipped horizontally or rotated so that the momentum moves upward?
Errin E. Johnson
22,458 Pointsinsightful, Tina you got the momentum part...i will work on it...thank you for your feedback..im on the right track. :)
Mireille Pasos
35,469 PointsCONGRATS, Tina! It was an amazing entry!
Errin E. Johnson
22,458 PointsCongrats Tina...great job!
Jake Choi
30 PointsGreat!
Nick Pettit
Treehouse TeacherNick Pettit
Treehouse TeacherIf you're interested in learning more about favicons, here's a blog post I wrote!