Monday, January 31, 2011

Creating a Favicon for the not so HTML friendly Blogger

When it comes to HTML, I'm not the most tech savvy person. I've been wanting to create a favicon, they are so cute and I'm a little jealous of my fellow bloggers that have them. For those of you that don't know what a favicon is, it is the little logo that appears before a web address.

  In blogger it is the Orange B before the web address. You can see from this screen shot some of the sites in my favorites toolbar that have favicons. 

Once I found the correct code, entering it was a piece of cake to do...the hardest part was deciding on how to design the 32x32 pixel square. There's not a lot you can fit in there, so keep it simple.


Start by creating your favicon,  I used CorelDraw to design mine. Start with a blank square, I used a 30x30 pixel square. Once you convert it to an logo.ico file, it will be 16x16 px...that's the size it is on the web address bar. It is super TINY.

CorelDraw didn't give me the option of saving it as a Windows icon file, so I saved it as a jpeg. 

There are lots of free websites that will convert it to an .ico for you. I used Pro Draw

It was easy to use, just upload your .jpeg, bmp, tif, or other file, select the size 16x16 for a favicon. Generate and save the file on your computer. 


Now you need somewhere to host your file on the web. I used File Den a free hosting site, you can use whatever your personal preference is. After you've successfully uploaded you .ico it should give you the web address for it. If you use Pro Draw it will look like the screen shot below.
 
Now comes the tricky html nonsense. This is the link code you will need. After an hours of trial and error last night, I finally found a code that works at Happy Blogging.

The Link Code

<link href='{image url}' rel='shortcut icon'/>
<link href='{image url}' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='{image url}' rel='icon'/>
<link href='{image url}' rel='icon' type='image/vnd.microsoft.icon'/>
Where it says  {image url}  that is where you will insert the URL, you were given from your web hosting site. Paste your URL over {image url} in all four lines.

Finding where to paste the link code is what I struggled with yesterday. You have to paste it somewhere in the html code after <head> and before </head>.


This is where I cheated a little. On blogger to edit your sites HTML you go to the Design tab and click Edit HTML. There were more characters than I cared to read looking for <head> or </head>, so I copied all the HTML and pasted it into Microsoft Word.





After you have copied all of your blogs HTML and pasted it into Microsoft Word. Use the find option in the top right corner and search for </head>. After you've found </head> in your text you can click cancel and it will keep your page in the right spot for you to paste your link code. 

Paste the link code with your favicon URL in front of </head>. 


Select all and copy all of the text in Microsoft Word. Return to the Design tab and click Edit HTML. Delete all the text that is in this field and paste what you have in Microsoft Word. 


Click Save and Ta Da!!!!




I hope my directions aren't way out there, I tried to explain it the easiest way I could. This is a great way to personalize your blog...now to finish working on my Sara & Spice site revamp. 




No comments:

Post a Comment