START A COURSE

The HTML and CSS Blog:

The Favicon: Create an Icon for Your Site

What You Learn in This HTML Lesson

In this HTML post you’ll learn how to make a favicon—that little icon next to the url. You’ll learn how to install the new favicon on your site. I’ll also point you in the direction of some useful favicon galleries in case you don’t want to take the time to make your favicon yourself.

The Favicon

Once you start to learn the structure of HTML a lot of things just start making sense. Where before you saw a web page, now you see bunch of columns and images. You can just about imagine where the divs are, even though they’re invisible. You see a pop up, and think, “Oh that’s probably javascript.” But a favicon exists outside of the web page, so it trips people up. Some of the less detail-oriented coders don’t even notice the favicon at first, and then one day, they think, “Hey, how come my web page doesn’t have a cool little icon next to the URL? What the heck is that thing? How do I get one?”

Actually, favicons are very simple to make. Let’s get started!

The Favicon: What Is It?

Favicons are those little icons in the web browser next to your web address: favicon stands for Favorite Icon.

The Learn HTML With Song favicon looks like this:

What is a favicon? It's this.

Our favicon: the pink H

See it up top there?

You just have to have one; they are so cute and professional. Your favicon is visible in the browser, and also will display next to your page title when your page is saved as a favorite or bookmark.

How to Create A Favicon

Whether you’re in WordPress, Joomla, Tumblr or plain old HTML, making a favicon is simple. In order to create a favicon, you’ll need to create a graphic in .ico or.gif. or.png format, 8-bit color (256 colors maximum, rather than a 24-bit format, which has millions of colors). You can use an animated .gif if you are craving attention. You can create your favicon in a graphics program like Adobe Photoshop or Illustrator, or a free open-source program like GIMP or MS Paint. Make your favicon art 16 x 16 pixels.

Of course, 16 x 16 is very small, so you’ll want to keep it simple. You’ll likely zoom in a lot when designing your favicon; be sure to zoom back to 100% to make sure it works well at that size.

After uploading the icon to your root folder (on your web server), link to it with one line of code, in the head section of your page:

<link rel=”shortcut icon” href=”http://yoursitedomain.com/favicon.ico” />

The link tag can also be used to link to CSS stylesheets or JavaScript files.

DIY Favicon: Draw It yourself

Try creating your own favicon by drawing it in a free app, like Favicon.cc. You just draw with the pencil tool in the grid with any color you like. It’s easy and fun.

Favicon.cc is a favicon generator that lets you crete your own favicon by drawing or using photos

Favicon.cc is a favicon generator that lets you create your own favicon by drawing or using photos.

Favicon Galleries

If you don’t feel like making a favicon from scratch, there are plenty of favicon galleries that offer free favicons for you to download. Generally you just right-click, choose “save image as,” and the favicon is yours to upload. Or perhaps you just want to have a peek at these for inspiration.

The MpP Favicon Gallery

IconJ claims to have 18,000 favicons. They try to hook you to sign up and let them host your favicon for you, but now that you see how simple it is, just go right ahead and download what you like. Many animated gifs.

The Favicon Gallery Several hundred favicons, with a hover feature that shows you the icon nice and big.

Favicon Generator Gallery of sun favicons

Fresh Favicon has about 600 favicons.

Free Favicon has less than 400, but not a lot of clutter from corporate favicons that obviously wouldn’t work as a brand for your site.

Finally, you may want to check out the Favicon Generator. This let’s you convert an image into the tiny 16 x 16 pixel size. But be warned: complex pictures won’t work out too well. You can also browse their most recent creations.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.