Add a favicon to Blogger

Check out Doc's Tech Notes’ new favicon in the address bar. It should look like this, . Here's how to add your own favicon to your Blogger blog.  

Create a favicon
:: Using Gimp or another image editor, create or modify an image so it is roughly a square
:: Save the bitmap image to your Desktop – I recommend saving as a .png no more than 128 x 128 pixels Convert the image to an .ico file
:: Visit http://tools.dynamicdrive.com/favicon/ and follow the directions – it's that easy
:: Download the favicon.ico file to your Desktop  

Upload the favicon.ico image to a storage location
:: Locate online storage that is accessible via a simple URL - in my case I sent the favicon.ico file to my web hosting space for GUOM at http://www.giveusoneminute.com/images/favicon.ico - you could also use the free Dropbox
:: Upload the file using either an FTP client or a web form, whichever your storage site allows
 
Add the favicon code to the Blogger template
:: Load Blogger Dashboard
:: Select the blog to modify
:: Select Layout
:: Select the Edit HTML tab
:: Place the cursor within the Edit Template text box (area that contains the HTML) and click
:: Use the browser's find feature (CTRL or CMD + F) to locate the following tag:

</head>

:: Paste the following code BEFORE the tag

<!-- My Favicon --> <link href='http://www.yoursavedlocation.com/images/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

:: Hit the Save Template button  

Test the favicon
:: Load Blogger page
:: Save site to Bookmarks - favicon should now appear in the URL bar in your Bookmarks

You now have a shiny new favicon. Not tested on all browsers, but does work with Firefox. Technorati Tags: favicon, favicon.ico, blogger, blog, html, images, .ico, .png, docstechnotes