I was asked recently, what do you call that little icon that some websites have in the browser tab or bookmark? Can we make those for our sites?
It’s called a favicon, and it’s pretty easy to make and implement. The hardest part is probably figuring out how to make something look good at just 16×16 pixels. Look up at your browser tab right now to see a very handsome example. Once the favicon is designed, it’s fairly easy to implement it on a website.
Favicon design specs
The favicon must be designed at 16×16 pixels. They support alpha transparency, so it’s fine to give it rounded corners or any kind of irregular shape. Once the design is done, you can export it as a high-quality png file. Then a developer can format the png as a special type of .ico file and implement it in the site. Piece of cake.
Favicon dev instructions
To start, you’ll need the 16×16 pixel png file from art.
Go to http://www.favicon.cc*
Click “Import Image,” Browse to your image, and Upload.
On the next page, click the “Download Favicon” button at the bottom.
Once you’ve downloaded the .ico file, make sure the file name is “favicon.ico”
Add the file to the root of your website — not in the images folder.
Add this code to the top of every page of your site:**
<link rel=”shortcut icon” href=”favicon.ico”>
Favicons add a nice touch of style and professionalism to a website, and they’re easy to do, so we should always include one.
*There are a ton of sites that can do this for you; just Google “create favicon online” (without quotes).
**In theory, if you’ve made your favicon correctly and placed at the root of your site, you shouldn’t need this line of code at all, but it couldn’t hurt to throw it in there. This line is useful if you want to keep your favicon somewhere other than the root (in which case you’d have to include the relative path, of course).