Creating and Adding a Favicon in Blogger or Typepad

While re-designing or creating a blog, you may want a matching favicon. What is a Favicon?  It's that small image in the address bar you see when you visit your own or someone else's blog.

Michelle Laycock wrote a tutorial here:
http://laycockdesigns.com/typepad-tips/favicon-favicon-favicon/

But I'm just adding to it and use this other site as well:
http://www.animatedfavicon.com/

Creating the Favicon

1. Go to http://www.animatedfavicon.com/ and then click the Browse button to locate the image you want to use from your computer.
2. Then click the Create Favicon button.
3. Then you can see a preview below.
4. Click the Download Your New Favicon button.
5. It is a Zip file that you can either open or save to your computer (to later open and extract).
6. In the zip file the only file you need is the one named "favicon.ico". That is the file you need.

In Typepad

• Go to the File Manager (Library, File Manager) and you are at "Home" by default. Then go to your blog's folder (such as mine is blogs_by_heather).  So the address would then read "Home\<your blog's name>" such as Home\blogs_by_heather.
• That shoud do it (if not you can also put a copy in the Home directly).

In Blogger

• Create and use an existing Photobucket account (www.photobucket.com) or other online image storage application. Upload the image and get the URL of the image you just updated, favicon.ico. In Photobucket it is the "Direct Link" you want to later copy. Leave Photobucket open.
• Then go back to Blogger.
• Go to Layout and Edit HTML.
• Find the Page Title area:
  <title><data:blog.pageTitle/></title>
• and copy and paste this information beneath it.
  <link href='your image file URL' rel='shortcut icon' type='image/x-icon'/>
• Then go back to Photobucket and copy the Direct Link for the favicon.ico.
• Then go back to Blogger's Edit HTML and in the code above and replace the "your image file URL" by pasting in the Direct Link from Photobucket (or other image storage source).
• Save and you're done.

Happy Blogging!

Comments

[natural diet pills]

Heather, thanks for the quick tutorial on how to create a favicon. I've always wanted to know how bloggers do this, but just assumed it was too complicated. Anyway, I'll be trying it out. thanks!

[Suzanne Rogers]

I checked my site and saw a nice little favicon. Great to see that I have managed to place the file correctly.Thanks for the easy to follow instructions!

[Lemonade Diet Pills]

I've noticed that most CMS users have the standard CMS favicon. Or use icons which arent designed to be that small. I love the design of your blog by the way - how the "curves" follow you down for a bit, then stop and everything else scrolls within them.

[ffxiv gil]

the first time i i hear it.i think i will think about use www.getfavicon.org

[MT4 Trade copier]

Awesome Blog. Great advice.

[Heather]

Thank you so much! I've tried about 3 other ways to add a favicon to blogger--none of which has worked! Your article was perfect!

[Frank P]

Never even heard of this - will look into it.

Thanks,

Frank

[favicon]

Nice post!

I also use

www.getfavicon.org

to check how my favicons are displayed in different browsers.

Cheers