Create a animated favicon for your Wordpress or BlogSpot blog

Written by Soumen Halder on 21 Mar, 2009 Under Blogging

animated-favicon Catch the eyes of your readers with an animated favicon by including a few line of codes into your template code. It is a neat trick to get your job done with really fascinating result.

Create an animated favicon:

If you really own good skills about Photoshop you don’t have to roam around here & there.
If you know a little bit try searching Youtube for proper video tutorials.
But if you don’t know anything about Photoshop, no need to panic. Follow to this website they will create one for you. All you need to provide is an image file(png, jpeg, …etc) of the following dimensions 16 x 16 pixels or 24 x 24 pixels as the ‘Source Image’ & then mark the ‘Animate Favicon’ checkbox and click ‘Generate Favicon.ico’. You’ll be able to select animation effects like scrolling text, borders etc. But they are not as well crafted as the ones designed using Photoshop. But as always something is better than nothing.

Copy the code to activate the animated favicon:

After you finally have an animated favicon file(.gif) upload it to the image folder under your active theme folder in case you have a blog on paid domain. Now insert the code below within the <head> … </head> tags in the header.php file of your active template.

<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”favicon.gif” type=”image/gif” >
Now if your blog is on a free domain then insert the code below within the <head> … </head> tags in the template code your blog. Now upload the .gif file to any image uploading services like Photobucket. Now copy the sharing url from there & put the url in the code replacing the URL word.

<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”URL” type=”image/gif” >