Favicons are those cute little icons that are displayed next to a webpage’s URL, bookmark or internet browser tab. It helps you to brand your website or blog. After all, most folks are familiar with the white B with the orange background. I don’t even have to mention the owner of the favicon, everyone knows who it is. Similarly, you can brand your blog.
I recently found a very easy way to create favicons. In the past I used to take an image and make its small enough so that it would display properly next to the URL or the blog/webpage title. It was a matter of trial and error. On several occasions my favicon ended up looking like a colorful blob (I still have a few colorful blobs on one or two of my blogs).
Imagine my and excitement when I found a website that converts images into favicons. Visit the Dynamic Drive site and upload the image from which you wish to create a favicon. Just make sure the image is smaller than 150 KB and is in gif, jpg, png or bmp format. For more versatility, use a transparent gif or png. Doing so will display a seamless background no matter where your favicon appears.
Once you upload your image all you have to do is click the “Create Icon” button and download your favicon.
How to Make the Favicon Display Next to the URL
First you have to upload the favicon to your server. Make sure you take note as to where you place the favicon because you’re going to link to it later.
Next add the code to your webpage. Here’s where a little (very little) HTML coding comes into play. Open the source code of your webpage or if it’s a WordPress blog, go to the header template (header.php). To access the template log into your WordPress blog and go to Appearance, click on Editor and then search for the header.php template. The header template will have code that has the tags <head><title><meta> and more.
Somewhere in between the opening and closing header tags insert the following code:
<link rel=”shortcut icon” href=”http://www.domain.com/favicon.ico”>
Be sure to substitute the ” http://www….ico” with your own domain, location and name of your favicon.
Disclaimer: Each WordPress template handles coding differently, so if you don’t feel comfortable fooling around with the code then don’t do it. If you do, make sure you keep a copy of the original code so that you can always return the code back to its original condition if you screw it up (I’m telling you this from experience).
Save the file, navigate to your website and reload the page to view the favicon.