Adding a Christmas favicon to your website or blog

As you surf around the net you may notice that little icon that sits next to the URL in the address bar, the navigation tool bar or even the tabs in your browser, as you visit websites. A favicon is generally a 16×16px image that appears in your browser’s address bar, it’s kind of small, but makes a big impact.

Since today’s browsers automatically determine a favicon for each website, not having one can actually cause 404 errors in your server log. This can amount to wasted bandwith, but since it’s super simple to implement a favicon, this can be prevented. It’s easy and I’ll show you how.

First, you need a favicon. You can create your own, or find one on the web. Check out IconArchive to find a cute png icon, save it to your hard drive.

Then visit Dynamic Drive’s Favicon Generator to create your icon.

Now that you have your favicon, you’ll need to upload it to the root directory of your server.

To implement your favicon on your website, just place this code in the < head > of your website. WordPress users add the code to header.php. If you didn’t put your favicon in your root directory, be sure to add in the correct file path to your icon.

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>

Now, delete bookmarks leading to your site.
Clear your browser’s history, cache and your computer’s recycle bin.
If necessary, restart your computer.
Then, re-bookmark your website or blog and enjoy your new favicon!



Like this tutorial? I would love to hear from you in the comments…