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.
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'/>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.
<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'/>
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.
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