Tuesday, November 13, 2007

Adding a Custom Icon to the Address Bar

One of your colleagues asked about replacing the Blogger icon on the address bar with your own icon.

Here's one of the better articles (please read the article before implementing this)

http://www.mattwardman.com/blog/2007/04/18/how-to-make-your-blog-stand-out-add-a-favicon-to-blogger/

The key here is that you are using XML rather than straight HTML.

The information for this goes in the head section of the document. Here's what the code looks like.

<link href="http://www.mattwardman.com/favicon.ico" rel="icon" type="image/ico" /><link href='"http://www.mattwardman.com/favicon.ico" rel='"shortcut icon" type="image/ico" />

Notice the end / in each tag us outside the " marks. This means it is actually closing the tag. Without it, it will not work. Also, if you cut and paste, you need to make sure that the quotation marks paste correctly.

  • "icon" refers to the icon in the address bar and tab
  • "shortcut icon" refers to the icon that shows up in your bookmarks
Make sure you read the article--don't just start messing with your template.

Blogger allows you to save a backup of your template. I encourage you to do this BEFORE you start editing it.

To get to the point that you can use the above code in Blogger, you will need to go into Customize | Template | Edit HTML

Find the tag and then paste the code (with links to your icons in it) on the next line. Make sure you don't over right anything.


2 comments:

graduate said...

Could we use the mass comm server to store our icon?

YoungbloodProf said...

sure can