Type in key words and search my blog here:

Loading

Sunday, December 14, 2008

Do you like my Favicon?

A favicon is the icon that shows up in the address line. I have an “E” in my address bar instead of the default orange blogger icon. 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 pxls or 32 x 32 pxls, 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 download this simple icon creator that you just drop in your image and it converts and saves it with the same name to the same file with an .ico extension.
4. You can select a premade icon from sites like Free Icons Web.

Step 2 – Upload your icon.
1. You will need to upload your icon to a photo hosting site that accepts .ico files (icon files). The one is use is Oogle Toogle
2. Save your icon link (I always select the direct link, the last one) to paste in the code.

Step 3 – Back up your template
1. 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>

Directly after this code, you will add your FAVICON CODE:

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

3. 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.
4. If you are satisfied with your Favicon, then select SAVE.
Occasionally, the online site may be down, and your icon will not show up. This is generally temporary, and nothing to be concerned about.

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

9 comments:

  1. ooo my word jeanette! i can not believe you 'are still learning'!! what you know about html etc is AMAZING! thanks so much for stopping by my blog, comments mean so much to me. i think i will linger here a while, there is a LOT to learn!
    much love and thanks for all the help!
    mel xxxxx

    ReplyDelete
  2. Wow Jeanette, such a cool new site! I haven't done anything with my blog, too busy, but maybe I can use a few of your tips!

    Wishing you + yours a wonderful Christmas!

    ReplyDelete
  3. Thank you so much for all the info, it's amazing how simple things get when someone explains it, lol!
    Wonderful site and I so love the look!

    ReplyDelete
  4. I found your link in the comment you left on my blog. What a nice idea for a blog. I tried your instructions to edit te Favicon and had no trouble getting it to change the icon but at 32 x 32 it was too small to see. What am I doing wrong. When you size to 32 X 32 what dpi do you use?

    ReplyDelete
  5. this site really is stunning - you are in my coffee cup!!!

    ReplyDelete
  6. just brilliant tut on the favicon - mine is too small to really see, but I do have my own instead of the Big Red B!!!! Thank you!

    ReplyDelete
  7. I'm loving your site, very informative. I have a question though. I went to Oogle Toogle and created a Favicon, I can see it there but where do I get the code? Cathy
    http://cathyzscrapz.blogspot.com/

    ReplyDelete
  8. This worked on the 1st time for me! As always, very clear instructions.

    Cara

    ReplyDelete
  9. thank you so much. such lovely clear instructions as usual! I now have a little toucan favicon for my Toucan Scraps blog ... perfect!

    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