How to associate an image to the browser tab next to the title.

Question

I've noticed, when building web pages, that most websites have their logo or a small image next to the on their associated tab in the browser. I'd like to start incorporating the title image into my designs but i'm not sure how to code it. Has anyone done it? I'm interested in how you went about it. Thanks Russell

James Anwyl · Accepted Answer

Its called a favicon. It's a .ico image file that normally sits in the root directory of your project. 
One way would be to create a .ico file using a favicon generator (http://www.favicon-generator.org/) or you could make one yourself in a program like photoshop. Its a good idea to include different sized icons for different browsers and screen-resolutions. 
Check out this CSS Tricks article (https://css-tricks.com/favicon-quiz/) for a better explanation than I could ever give.
Hope this helps :)
EDIT: 
More useful links:
1 (http://www.jonathantneal.com/blog/understand-the-favicon/)
2 (http://stackoverflow.com/questions/4014823/does-a-favicon-have-to-be-32x32-or-16x16)

Steven Parker · Answer

:point_right: What you are describing is known as a *favicon".
Treehouse just happens to have a workshop on the topic:  How to Make a Favicon (https://teamtreehouse.com/library/how-to-make-a-favicon).

Russell Sawyer · Answer

Thanks guys.  Those are some great resources.  :)

Welcome to the Treehouse Community

Looking to learn something new?

Russell Sawyer

Russell Sawyer

How to associate an image to the browser tab next to the title.

3 Answers

James Anwyl

James Anwyl

Steven Parker

Steven Parker

What you are describing is known as a *favicon".

Treehouse just happens to have a workshop on the topic: How to Make a Favicon.

Russell Sawyer

Russell Sawyer