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
- Go to http://www.animatedfavicon.com/ and then click the Browse button to locate the image you want to use from your computer.
- Then click the Create Favicon button.
- Then you can see a preview below.
- Click the Download Your New Favicon button.
- It is a Zip file that you can either open or save to your computer (to later open and extract).
- 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!
Nice post!
I also use
http://www.getfavicon.org
to check how my favicons are displayed in different browsers.
Cheers
Never even heard of this – will look into it.
Thanks,
Frank
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!
Awesome Blog. Great advice.
the first time i i hear it.i think i will think about use http://www.getfavicon.org
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.
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!
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!