photo p1_zpsc8a7232f.png  photo j2_zpsc3f43514.png  photo p2_zpse73671a0.png  photo j2_zpsc3f43514.png  photo p3_zps456abd62.png  photo j2_zpsc3f43514.png  photo p5_zps95486d0f.png  photo j2_zpsc3f43514.png  photo p4_zps481d5f13.png
Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Wednesday, June 25, 2008

How To Create a Favicon in Blogger - Works For Me Wednesday

Last week I created my very own little favicon.

For those that don't know, according to Icon J, a favicon is a "little icon that appear next to the web address at the top of your browser. The little icon is an special .ICO icon format and named FavIcon (short for "favorites icon"). And it also appears in your browser' Tabs and Bookmarks."

Basically it helps your website stand out in a list of websites. But, I just think it's really cute! So I created one of my very own last week. And several of you asked how I did it.

It was quite easy actually. I found this website using my best friend Google and it really did all the work.

Step 1. I already had an image that I wanted to use so I just went to Icon J's favicon generator and this website to all the work. I browsed my computer until I found the image I wanted to use and then I hit "Upload It".

Step 2. Icon J's will do a little work and then it will come up with two options - Direct Down Load or Hosting the Favicon for you. I chose to have them host it. It's free and that seemed to be the easiest method for me. So I went with the Direct Link option.

Step 3. Copy the HTML code that they generate for you under the Direct Link method.

Step 4. Here's where it gets just a little tricky. You will need to edit your Blogger template. I got a little nervous doing this. You should always back up your template before you change it. Just a little note - if you mess up your template - I won't know how to fix it! So, please proceed cautiously!

Now go to your blog and click on "Layout" in the Dashboard. Then click the "Edit HTML" tab.

Now you will need to search for the word “title” , this should be inside the header tags.You should find something that looks like this:

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

Just after that line, paste the text you copied from Icon J's in Step 3. After you have pasted it, click "Save Template".

That's it! That's all you have to do! You should now have a cute little favicon!

For more great tips and tricks, head on over to Works For Me Wednesday at Rocks in My Dryer.


post signature