Type in key words and search my blog here:

Loading

Tuesday, February 10, 2009

Scrolling Favicon

Make your browser Favicon ROCK ‘N ROLL!

A scrolling favicon is the icon that shows up in the address line and is animated. I have an “E” and the words “So Easy!” 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. With the online converter with scrolling marquee, they accepted an icon as large as 600 x 600 pixels. You will to crop your icon to the very edge on all four sides.
1. You can create one in some photo editing programs. Keep your words short and sweet!
2. You can create an image and convert it in an online converter, like Animated FavIcon Online Creator. You will get a zip file. When you want to upload your GIF file to an online image host, you will look for the animated file when you unzip your download.
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. Leonie of Tatty Lover’s Blog also shared with me that you can just rename a jpg (if it’s the right size) as an ico file without converting it. That’s if you want to use just the icon. Use the above link for the scrolling Favicon.
4. You can select a premade icon from sites like Free Icons Web.

Step 2 – Upload your icon.
1. Since this is a GIF file, you can use any hosting site. I chose to continue using Oogle Toogle so I can’t confirm that other sites will work.
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.

If you’ve already created an Favicon, you can change it to a scrolling Favicon by following the steps above, and replacing the ico file you previously inserted with your new GIF code.

Many thanks for all the awards! Once I get through all the crazy paperwork at school I might have time to receive and distribute them. I have been crazy busy! Please let me know what’s the latest you want to try on your blog.

I know that WLW cannot do a photo spread as a PNG (transparent) file.

Also, I am working on trying to make a “one size fits all background,” but I have so many kinks to work through. If you have a large screen could you please check out my test blog at Grimes Family Scrapbook and please give me feedback? Since I only have one size on my desktop and laptop, I haven’t been able to see if my idea worked. I extended my borders (with a matching paper on the sides (about 1.25 inches each) and when I look at it, it looks very much the same. As always, questions WELCOME! We are learning this together!

10 comments:

  1. Oh my gosh!! I just saw your comment on my blog... you are so darn sweet! Thank you so much for stopping by and saying such nice things about my designs :) I hope you are enjoying your freebie!

    I'm honored to be on your favorites list over there ----> that's so cool!!! Thank you so much!!
    Tracy
    Trixie Scraps
    http://trixiescraps.blogspot.com

    ReplyDelete
  2. Hi Jeanette, You have an award over on my place, pop along and pick it up. Thanks for all the hard work you do here. I love it.
    PSPScrapper

    ReplyDelete
  3. Hi Jeanette, just for information, I uploaded my gif file to photobucket, it works like a charm.
    Hugs
    Peta

    ReplyDelete
  4. Hi!I really LOVE your blog & I want to let you know that you have an award ("LOOK HOW COOL BLOG")waiting for you at my blog.HUGS from far Japan ,CHINGJP

    ReplyDelete
  5. thanks Jeanette - am working on a new favicon - I have changed my blog's name to fit in with my store if you would like to change your links!! Thank you!!! xxx

    ReplyDelete
  6. there's no need for oogle toogle... i upload most of my pics withing blogger... take one of the old.. which no one's gonne read for sure..

    or even upload it in a draft...

    and then u get a link when u click view html code, until u do not delete the post, the image will stay uploaded.

    ReplyDelete
  7. Thanks Rishi, but this post has been updated! Put this link in your browser, and thanks for the helpful information.

    http://easycustomblogs.blogspot.com/2009/06/favicon-update.html

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. I am loving your blog. these customs are fabulous..I just opened my blog yesterday. I am having so much fun. My first blog so it is learn as I go.. lol I am hoping to be up and running soon. Just wanted to show you some love for all of the help I have received so far from your blog. So grateful.. Hugs to you always from the heart.. Mystical

    ReplyDelete
  10. So sorry completely forget to leave my blog address.. ;) Here is it and have a fabulous day!!

    mysticalcreationsningthemes

    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