How to Create and Add Animated Favicon to Blogger Blog

...
Animated Favicons are logos or emblems which are shown in the tab of the web browser. You can also add a non-animated Favicon to your blogger blog or to a website. Favicon gives and identity to your website, you can use both your logo or a specially created image as your favicon. It is better to use a icon which is very clear to see even it is too small in size, because the browsers tab will be small in size and the favicon too.

Benefits of using a favicon on your blog/ website.

  • Helps to easily identify your website if there are many tabs opened in the browser.
  • The icon reminds the visitor of your site when they see it somewhere else.
  • Cause to immerse in the mind of the visitor.
  • It gives an Identity to your website/ blog

How to Create a perfect image to use as Favicon

  • You must use perfectly square image  (ie. 100 Pixels x 100 Pixels), otherwise your image look like a frog gone under the vehicle tire.
  • You can use a large squire image but when it is converted as a favicon which shrink to small. That is why I recommend you to design your icon image in 16px X 16px size (unit in pixel).
  • See my blog icon in your browser tab. Which is very clear that is 'M' . But I have seen some one use a complex icon and which is very difficult to get understood.
  • You can use Image Editors to create your icon like Photoshop,CorelDRAW, Illustrator etc.
  • If your want to make an animated image you can use Adobe Image Ready or new versions of Photoshop.

How to Convert an image into icon format.

There are several website providing icons and facility to create icons. Favicon.cc , animatedfavicon.com are some of them.

  1. Create an image that you would like to use. You can use any image size. Our favicon generator will resize you imageto be the perfect animated favicon ico. It is better, if you use perfectly square (ie. 100 Pixels x 100 Pixels).
  2. Submit your image to the form below and after a couple of seconds you'll get your image back compressed and resized for use as a favicon.ico. Download and keep it.
  3. Now go to your blogger dashboard and go to  create a new Post.
  4. There, Upload your just downloaded icon image.
  5. Now you have uploaded the image to blogger
  6. Right click on the image and click on COPY IMAGE URL / LINK LOCATION
    7. Change a Favicon from Blogger blog Dashboard easily, Code to add or place a Favicon on blogger blog
    mobihackman.in Favicon on Layout
  7. Now go to your Layout page and the top left of your page elements you can see a block for favicon (as shown in image)
  8. Just click on Edit and Paste the IMAGE URL you copied in the step #6. (Or you can Upload the image here also.)

I uploaded favicon in the Layout but does not work. [Perfect Solution]

For those who the favicon doesn't work even after it is uploaded at the Layout of their blog can follow these steps.
  1. Do till the #6th step I have instructed at above
  2. After that Go to your Blogger Dashboard >> Template >> Edit HTML (and proceed if ask)
  3. Now you will be shown a page filled with codes, at the left you can see a check box saying 'Expand Widgets' , Just check it
  4. Press Ctrl + F (To appear Search box on browser to search in page) and search for below code
 <b:skin>

      5. Paste this code just above it

<link href="your-favicon-links-goes-here" rel="icon" type="image/gif"/>

     6. Replace your-favicon-links-goes-here with your favicon's link location

I think this would helped you in creating and setting a favicon for your blog. If you like this blog please like us on Facebook and follow@mobihackman on Twitter

Ooo Woo ! It's Completed.. What is next

Finally you have done another step of your blog. Want more trick to increase the performance of your blog  just read following articles too.. It surely be benefited for a blogger


...

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)