How To Make An Animated Scrolling Text Favicon

A Favicon is an image that appears in the Address Bar and Tab when you are on a website.The Favicon you use can become a kind of Logo associated with your blog.On Blogger the Blogger Orange B Logo is used as the Favicon on all blogs but you can easily change it.In a recent post i showed you how you could use a Favicon you found on other websites, so i wanted to add a post showing you how to make a totally unique Favicon.Here i will show you how to create a 'Scrolling Text Favicon' for your blog.A scrolling text favicon is just as it sounds, you can have the name of your blog, URL of your blog or any text scrolling across the Favicon.Along with the text will be a icon, logo or any image you choose.

Below is an animated Favicon for a Test Blog with the text 'This is my blog' and an image of the Blogger 'B' within a folder .You can see how that Scrolling text Favicon looks in action here : Test Blog



So lets see how you can create a Animated Scrolling Text Favicon for your blog, and then how to add a Favicon to your blog.Many Bloggers have not changed their favicon and stick with the default Blogger B, i will also show you how you can use the Blogger Favicon just adding your own scrolling text.

How To Create An Animated Scrolling Text Favicon

Step 1. Follow this link to ww.FaviconGenerator.org

Step 2. Scroll to the bottom of the page on FaviconGenerator were you will see the options to upload the image you want to use and add the scrolling text you want added.

Note - If you want to use your current Favicon it may be a .ico image which are not accepted.In this case use a image converter, here is a link to a Image Converter.

Note 2. If you want to find an image to use check out this post - , or use Google image search and in the options on the left select size exactly 16 x 16.

Note 3. If you want to use the Blogger B just right click on this image and save :



Step 2. Once you have added your image and text click generate, the page will refresh and a preview of your animated scrolling favicon will be at the bottom of the page.

Step 3. You now want to save your new animated Favicon, right click on the preview (Make sure it's the animated version) and save it.You can now upload your animated favicon to Blogger or any image host website.

Your Favicon is now ready to use.

How To Use Your Animated Favicon On Blogger

Step 1. In your dashboard click 'Design/Layout' > 'Edit Html'

Step 2. Copy the code below and place it in your template directly below
(You will find at the very top of your Html)

Note : Replace ADD-YOUR-FAVICON-URL-HERE with the URL of your new animated Favicon.

Step 3. Save your template and your favicon will be in place.

Thats your animated favicon, Check out more of our Great Design Tips for your blog.

Post Your Comments, Views And Questions Below.