Friday, September 24, 2010

Favicon Walkthrough - Edit HTML (3/3)

Categories: ,
Last month, I need a custom icon (favicon). It was for my other blog, I want to make it look fancy. So I stumbled around the web to find out how to create my own favicon and how to put in my blog on Blogger. It was confusing and I don't remember much what happened during that time but I finally came out victorious.

Goal(s): Add Custom Favicon to my blog on Blogger
Time Taken: 27 August 2010 - 30 August 2010 (3 Days)

Step by Step to Adding Favicon to Blogger:
1) Create Custom Favicon for Free
2) Upload Favicon on Free Web Host
3) Edit HTML Codes to Display The Favicon (you're here)

HTML Codes for Favicon

If you use .ico file, use this code:
<link href='link to your .ico file' rel='shortcut icon' type='image/x-icon' />

Example:
<link href='http://www.example.com/favicon.ico' rel='shortcut icon' type='image/x-icon' />

If you use other file type such as .PNG, .JPG and .GIF, use this code:
<link href='link to your file' rel='icon' type='image/file_type' />

Example:
<link href='http://www.example.com/favicon.png' rel='icon' type='image/png' />

Thank you to IconJ for the correct codes. Don't look at the codes on FAQ section. That one was outdated.

Not all file format can be used for favicon, so pick one of the popular file types like .PNG, .JPG, .BMP and .GIF to avoid wasting time.

IconJ also mentioned in its FAQ section that Internet Explorer only support .ICO files for favicon. I don't know if this fact is also outdated or not but I use both codes just to be safe.

Other than that, I use lower case for file_type in the second example. I don't know if it will work with capital letters too.

Where to Add the Favicon Codes?

You have to put these codes on the head section of your HTML file.

For Blogger user:
  1. Login your Blogger account.
  2. Go to Design tab.
  3. Go to Edit HTML.
  4. Search for <head>.
  5. Insert the favicon codes after <head>.
  6. When you're done, click Save Template.

Yay, we're done! The default favicon should change to your custom favicon almost instantly. If it doesn't, wait for a few hours before checking your codes for errors. Good luck!

No comments:

Post a Comment

Semua komen akan ditapis terlebih dahulu sebelum disiarkan. Apa pun, saya ucapkan ribuan terima kasih kerana sudi komen :)

Thank you for leaving your comments :) but please be informed that all comments will be screened before they are posted on this site.

Subscribe to: Post Comments (Atom)