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 Homeblogs_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!

Pin It on Pinterest