Type in key words and search my blog here:

Loading

Tuesday, June 23, 2009

Favicon Update

This is to update a previous post, and has current links.

A favicon is the icon that shows up in the address line. I have a scrolling “E” in my address bar instead of the default orange blogger icon. To get directions on making a scrolling favicon click HERE.

To change your icon is a multi-step process, but once you do, it’s really very simple.

Step 1 - Create an icon.
Icons must be very simple. Otherwise you will not be able to tell what they are. They are usually about 16 x 16 pixels or 32 x 32 pixels, so you can see they are quite small. You can create an icon in many ways. I usually create mine in a 100 x 100 size, and the image converter resizes it for me. I also save it as a JPG.
1. You can create one in some photo editing programs
2. You can create an image and convert it in an online converter, like Online Image Converter.
3. You can select a pre-made icon from sites like Free Icons Web. 4. You can also create an animated file (GIF) and upload to your favorite photo hosting site like Photobucket or Scrapbook Flair. Make sure your image is no larger than 48 x 48 pixels. I made an animated image you can see HERE on my Real Test Blog. So really, if you want to make a GIF file (like my flashing RTB on my Real Test Blog) you do not have to make an .ICO file.

Step 2 – Upload your icon or your GIF file.
1. You will need to upload your icon to a photo hosting site that accepts .ICO files (icon files). The one is use for ICONS is PicPanda.
2. Save your icon link (the one on PicPanda says SEND to friends link) to paste in your code.

Step 3 – Back up your template
Backup your template before making any changes. Click HERE to see how.

Step 4 - Add the code. Did you backup your template?
1. Look for the following code in your HTML by going to the LAYOUT TAB, then selecting HTML, this part of the code is near the top of your HTML:

<title><data:blog.pagetitle/></title>

or if you have this in your code:

<b:include data='blog' name='all-head-content'/>

Directly after the above code, you will add your FAVICON CODE:

<link href='Direct ICON LINK HERE' rel='shortcut icon'/>

2. Preview your blog before saving. You should see the Favicon in your address bar. Give your page plenty of time to load. Make sure it is something you want and like.
3. If you are satisfied with your Favicon, then select SAVE.
Occasionally, the online ICO hosting site may be down, and your icon will not show up. This is generally temporary, and nothing to be concerned about.

If you add the Fairy Dust Mouse Trails, this code follows that long piece of code.

Here's to more happy scrapping, and
Hugs from the heart,
Jeanette

3 comments:

  1. Whenever I try to find an answer to something it is here! I appreciate the help!

    Here are the blogs you have helped me with!

    www.brookemattnelson.blogspot.com
    www.ahhhscrap.com

    thanks!

    Brooke

    ReplyDelete
  2. hi, i'm citra and i have applied ur tutorial to my blog. at first it succeed but suddenly it changed to the boring orange blogger icon, i've tried to fix it again but nothing changed, can u tell me what made it happen?

    my blog is:
    YOUR BLOG NAME HERE

    thx u so much :)

    ReplyDelete
  3. hi, i featured you on my blog as my appreciation for your blog tutorials, check it out!
    btw, can we change the font color of the blog address? thx :)

    ReplyDelete

Thanks for taking time to leave a comment. I would love for you to include your blog address

Just copy and paste the following in your comments and add your blog address and blog name, and you will easily post it in your comments. Don't leave any spaces!

<a href="YOUR BLOG ADDRESS HERE/">YOUR BLOG NAME HERE</a>

-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-

Here's to more happy scrapping, and
Hugs from the heart,
Jeanette

ONE SIZE TEMPLATE

ONE SIZE TEMPLATE
Blog Background Template