I added a favicon to this site. See it in the tab?
I created the graphic, and then found an online Favicon Generator. Honestly, I don’t even recall which one I used. I think they’re basically the same for the most part, since they just take your image and convert it to a 16X16 pixel graphic. They also give you the code to plug into your site.
In short, all you need to do is:
- Take your square graphic, convert it to favicon size (16X16 pixel) and save the file titled “favicon.ico.” If you use an online favicon generator, they create the file and you download it.
- Upload and save your “favicon.ico” file to the root level of your website.
- Insert the following chunk of code into the HEAD section of your pages (at the very least on your site’s main index page).
<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico”>
- That’s it. You should see it pretty quickly (sometimes there’s a lag).
If you really want to geek out on tweaking and perfecting your favicon, check out the GitHub Favicon Cheat Sheet.