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.
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:
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” />
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.
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.
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.
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.