Place Your Own Favicon Instead Of Blogger Orange 'B'

Searching here and there for a short tutorial about how to show my own favicon instead of that blogger orange 'B' letter. Since blogger is now in the second version from the past, so many tutorials out there simply did not working anymore. Some tutorials suggesting to place it above the <head> but that method valid no longer. Then I found out the right way.

Favicon video tutorial for blogspot blogger.



Simple method on placing your own favicon:
1. Create your own image, real favicon size is 16x16 pixels but I recommend you to make your favicon image at 32x32 pixels size.
2. Upload your image. I usually save images on blogger just by creating new post, upload the image into the post but instead of Publish Post, I just hit Saved - save as draft. Copy the uploaded image url.

eg: MyFunDarkSide uploaded favicon image on saved post (not publish)
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/_3bUxl5eR4j8/S8MSvJsAFVI/AAAAAAAAADo/c_aUqXKlPuw/s1600/favicon.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_3bUxl5eR4j8/S8MSvJsAFVI/AAAAAAAAADo/c_aUqXKlPuw/s320/favicon.png" /></a></div>
The blue text is MyFunDarkSide favicon image url. Leave it there.



3. Go to Layout> Edit HTML> tick on Expand Widget Templates. Copy the below code and place it right above your </head>.
<link href='http://2.bp.blogspot.com/_3bUxl5eR4j8/S8MSvJsAFVI/AAAAAAAAADo/c_aUqXKlPuw/s1600/favicon.png' rel='shortcut icon'/>
<link href='http://2.bp.blogspot.com/_3bUxl5eR4j8/S8MSvJsAFVI/AAAAAAAAADo/c_aUqXKlPuw/s1600/favicon.png' rel='icon' type='image/png'/>
Replace the blue url with your own favicon image url.
Rewrite that red png text with your own favicon image format eg: jpg, bmp

4. Preview your blog, if everything is working fine (your favicon is there). Save template. Done.

This technique did not really remove that blogspot default 'B' favicon. Just placing your code lowest possible before </head>, your favicon image are then been placed on top of that blogger 'B' favicon. That is how CSS works, the last code are placed on top of the previous, totally masking what laying behind it.

P/S: Tested working on Firefox and Chrome, IE as usual is an outlier.
P/S: MyFunDarkSide is using PNG image as favicon since .png allows me to have transparent background around my rounded shape panda head.

3 comments:

  1. Сonѕidеr runnіng а contest or offering a free pгoduct tiρ shеet that accompanieѕ the interviеw.
    Internal oг External Sound Мixeг "All windows systems come with a internet sound mixer they all differ so you may need to review your manual or online sources to figure out how to enable or use it. A MOBILE APP GIVES THE STATION A DIRECT MARKETING CHANNEL TO COMMUNICATE WITH THEIR LISTENERS.

    Also visit my blog :: mouse click the following website page

    ReplyDelete
  2. or you can change by clicking layout in the up you see favicon like a gadget and click edit and select new jpg file it must be 32*32 pixels. and have fun more details @ www.tipsofit.blogspot.com

    ReplyDelete