TechnoMeg: How To Add A Favicon To Your Blog

Do you see the tiny flower on the EcoMeg tab and address bar of your browser, above?  As you might have already surmised, it's my logo.

In this teeny tiny (16x16) form it is called a FAVICON ("favorite icon").  It adds a bit of flair and professionalism (wait, do those to together?) to your website.

Note: to add a favicon you will need to modify your HTML code in Blogger.  It is always a good idea to save a copy of your code before you make any modifications.  To do this: from the Blogger Dashboard, click Settings, Basic, Blog Tools, Export Blog, and save a copy.

Now, here is how I made my favicon:

1. Chose my image.
2. Uploaded it to www.Photobucket.com
3. Resized it to 16x16 (click edit, then resize, then enter 16x16, save)

How I affixed it to my EcoMeg tab and the browser address bar:

1. Still in Photobucket, looking at your flavicon, click Share, then More Options, then Get Link Code.
2. Copy the Direct Link for Layout Pages (the URL in that pale yellow box, below) and paste that URL into the following code:
   
   
   
   

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

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

   <link rel="shortcut icon" href="YOUR FAVICON IMAGE URL HERE" />

    <link rel="icon" href="YOUR FAVICON IMAGE URL HERE" />

   
   
3. From your Blogger Dashboard, click Layout, then Edit HTML.  Find the following line of code and paste the code from #2 right above it:    </head>
4. Click "PREVIEW" to see how it looks.  If your Favicon is there, click SAVE TEMPLATE and you're done.

Notes: a) You can also build a favicon and enjoy free hosting of it at ICONJ.  b) Examine the head section of your html to see if blogger has embedded its own favicon - if it has, you can substitute the url for your own favicon.