Address Bar Logo

Have you ever noticed the little logo on the address bar that every website has? Blogger has the little orange logo with the funny shaped B. I started paying more attention because I have too many websites I like to bookmark just below the address in my browser. I started deleting the name of the sites because for most of my favorite sites, I can use just the logo. But I had 2 of my blogs there, and they both have the same little orange logo. I started wondering if you can put your own logo on. After a little research, I've figured it out. It's such a little thing, but sometimes the little things make it more fun.

First, pick one element or just a couple of letters to use for the logo. Start looking at the logos for your favorite websites and you'll see that they are so tiny that they really can't have much detail. For this blog, I chose the big gerber daisy from the header. Make a new document that is about 22x22 pixels big. This is tiny! I dragged my element onto the new document and shrunk it way down. It looks very pixely and not nice at all if you are zoomed in, but if you zoom way out so it's about the size of the logos on your browser, you will see about how it will look. Save your logo as a jpg.

You actually need your file to be a .ico file, but PSE doesn't have that as an option. There are some websites that will convert your file for you. One I used is http://www.coolutils.com/online/image-converter/. It's very quick to upload your jpg, choose ICO, and download.

The next step took me a little more time to figure out because you have to upload your .ico file to a hosting site. I use photobucket for my backgrounds, but they don't support .ico. Neither does Blogger. After looking at several sites, most of which had strange names that I wanted to steer clear of, I found one that is fast, simple, and you don't even need an account, which I like. Go to http://picturestack.com/?p=. Click Browse, find your .ico file, and click Upload To The Stack. Just like that, it is uploaded. Just make sure to keep that window open until you finish changing the HTML code in the next step. Since you don't have an account, I don't know if you'd be able to look your file up after it's been added if you lose the address. You will need the address for the Direct Link.



Now, from your blog, click Design at the top, then Edit HTML.

Type the above text in the Find feature of your browser. It's in the /* Footer section. Right above that, type in the following line, as seen below. Replace the address between the 's with the direct link for your icon.

Make sure to do the Preview before Save Template. In the preview, your logo should show up on the Tab of your browser and just to the left of the address bar. It will only show when you are viewing your blog, not while editing anything.

Congratulations! You should now have a cute, little detail added to your already cute blog.