I’m sure you’ve seen them: shortcut icons. All the “cool” sites have them. Here’s how to put one on your Blogger blog.
Firefox, newer versions of Internet Explorer, Safari, Opera, Chrome, and other web browsers will all honor a favicon link tag in your page’s header, so it’s good to add an icon tag on your page. And it’s easier than you think.
First, you need to get an icon. Most of the blog kits at Design House Digital come with icons.
For this example, I’m using a favorite icon from Melissa Esplin’s Love Song Blog Kit. I can use the file format .gif, .jpg, or .png.
First, I upload the icon to blogger as a picture gadget. This is gadget temporary; it’s just one way to get the file up onto the blogger server. I go to Layout > Page Elements > then click one of the “Add a Gadget” buttons. For detailed instructions, see this post about adding elements to a page.
Once I have uploaded it, I preview my post. I do “view source” and then CTRL+F (find) and enter part of the favicon’s file name. I highlight the favicon’s web address and copy it.
Next, I go into Layout > Edit HTML and check “Expand Widget Templates.” I want to put a new tag in the header, so I use a tag like the one below (pasting in my own favicon’s web address in there).
<title><data:blog.pageTitle/></title>
<link rel=”SHORTCUT ICON” href=”http://1.bp.blogspot.com/_1m0JRGzh46c/S567LcQrZbI/AAAAAAAAAHk/SFKzO37Kbfg/S220/lovesongBK_favicon-1.png” />
Now I just need to click “Save Template” and view my blog to see my pretty little custom favicon.
A warning: These won’t show up properly in Internet Explorer. For IE, you have to save the file in .ico format and upload it to a server somewhere. Blog sites and image hosting sites won’t allow you to upload .ico files to these sites, so you’re stuck with .jpg or .png shortcut icons unless you have your own web server.
Hope you find this helpful. Happy Blogging!
Related posts
Tags: Blogger Tutorials, Blogs, Mary Shaw, Melissa Esplin, Tutorials
cool! I will have to try this at some point!
Co za interesujaca strona.