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 trial

Design

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Forum 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.

Nick Pettit
Nick Pettit
Treehouse Teacher

If you're interested in learning more about favicons, here's a blog post I wrote!

Here'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
STAFF
Nick Pettit
Treehouse Teacher

Hi 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.

I must say I knew the established graphic designer was going to win! Congratulations, Tina!

Tina Chen
Tina Chen
2,725 Points

Thanks 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
Tina Chen
2,725 Points

I'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

good job! looks great!

Samuel Webb
Samuel Webb
25,370 Points

This looks fantastic :)

Tina Chen
Tina Chen
2,725 Points

Thanks Jennifer and Samuel!

Your logo does have that I want a donuts effect..i think you spot on for favicon. :)

I like that one!

Very Nice!

Hi 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicole Vest
Full Stack JavaScript Techdegree Student 12,743 Points

Thanks 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicole Vest
Full Stack JavaScript Techdegree Student 12,743 Points

Thanks 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!

Like 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.

Looks k.

I 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

http://i.imgur.com/XKqChqN.png

Santiago Barrionuevo
Santiago Barrionuevo
14,176 Points

These are my first humble favicons: http://imgur.com/a/4bO4R

You have no chance! :D

Jorge Luis Comba
Jorge Luis Comba
3,249 Points

Gracias por el saludo! Muy bueno lo tuyo! A seguir!

Devin Scheu
Devin Scheu
66,191 Points

FTW 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
Stefan Osorio
16,419 Points

Here's my submission: (Intended for a blog about cooking and activism ^^) http://imgur.com/NJApzI1

Hi! 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
Santiago Barrionuevo
Santiago Barrionuevo
14,176 Points

Muy bueno! Saludos de Argentina también!

Jon Bogdonsky
Jon Bogdonsky
3,218 Points

My submission http://imgur.com/hJzZ2PU Great submissions everyone!

Here'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!

http://imgur.com/Uqq48k4

Nathan Newell
Nathan Newell
7,634 Points

Here is my design :) I look forward to seeing all the submissions!! http://imgur.com/Poj79Zy

Ansif I
Ansif I
3,300 Points

Hi 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!

Here is my favicon, it is my First and Last name initials "Enrique Guzman" = EG: http://imgur.com/a/E7LWw

chrism325
chrism325
5,570 Points

That's a pretty wicked design, nice work!

Thanks Chris !! Yours is pretty neat.

Thanks Andrew !! Hope anyone of us win.

Erik Cruz
Erik Cruz
10,381 Points

My favicon is a skull apple on a stick, I tried to keep as much detail as possible. =) http://imgur.com/EBEeG8t

My world cup themed entry: Brazil Flag Favicon

Single images: 64x64 32x32 16x16

Here's my go.. it's from a location tracking service I am working on.. it's part of the logo.. http://imgur.com/tfPHGDI

Thanks!!

The favicon has to be of TreeHouse or any other company / personal name we like?

Nick Pettit
Nick Pettit
Treehouse Teacher

Great question! It can be for anything. :)

What about the img format? One of the big three (jpg, png, gif) is OK or only ico format?

In order for an icon to show up in the title tag of html it must be in .ico format.

Cornel DV
Cornel DV
1,865 Points

I 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
Nick Pettit
Treehouse Teacher

JPG, PNG, and GIF are all fine, although I recommend you use PNG for the best visual fidelity.

what's the logo? is for TreeHouse?

Nick Pettit
Nick Pettit
Treehouse Teacher

It can be for anything you'd like!

Cornel DV
Cornel DV
1,865 Points

I tried to make the Treehouse frog as favicon! Here you go http://imgur.com/TYIcBCY

Hey Nick, here's my shot.

Decided 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

Here 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

I 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
chrism325
5,570 Points

This was a lot of fun to make! Thanks for the challenge! http://i.imgur.com/oLxFr1p.png

chrism325
chrism325
5,570 Points

All 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

Logo I created for my portfolio.

Holt Hunter
Holt Hunter
4,629 Points

Here is my favicon It is for the website Scrapic.com that we are making. http://imgur.com/a/eSnQ6

Rodger Voelkel
Rodger Voelkel
21,736 Points

I 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

Here is my submission. This is my first try at making favicons from scratch. I hope you like them. http://imgur.com/MoFu8A7

Robert Komaromi
Robert Komaromi
11,927 Points

Here 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
Jennifer Crawshaw
17,878 Points

Here 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.

Great 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
Jennifer Crawshaw
17,878 Points

Thanks for the ideas Jeremy! And thank you for checking them out :-)

Leandro Kondo
Leandro Kondo
2,915 Points

Here's the favicon I've made for my portfolio: http://imgur.com/a/7mPPE

Dwayne Cyrus
Dwayne Cyrus
8,878 Points

Here 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

that looks awesome

that looks awesome

Hi 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!

Stefan Osorio
Stefan Osorio
16,419 Points

"errinjohnson's images are not publicly available" You might want to change that ;)

How about now..I had to verify my email..new registration.

also link to full logo...where my idea is evolving. http://alchemymomentum.com/

Looks like it's working now.

thank you Dustin

I 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
Tina Chen
2,725 Points

Hi 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?

insightful, Tina you got the momentum part...i will work on it...thank you for your feedback..im on the right track. :)

CONGRATS, Tina! It was an amazing entry!

Congrats Tina...great job!