Sunday, April 17, 2005

[Misc] How do I get a personalized icon?

How do I get a personalized icon? You know - the kind that you see just before the http in a url. They also show up in the tabs.

Food bloggers I have noticed with these nifty little decorations include Brownie Points, Elise's Simply Recipes and the new, very engaging Travellers Lunch Box from Scotland.

I don't think I have seen it on blogger sites so I suspect it is something that only comes with certain software. Software I probably don't have and hmmph, frankly, I am a little envious.

9 comments:

Ugo Cei said...

That little image is called a "favorite icon" since it's the icon that is shown next to the page title in a browser's favorite list (bookmarks). The simplest way to have a favicon in your website is to configure your webserver to serve a small image in .ICO format when requested for the http://hostname/favicon.ico

You can see mine here: http://www.divinocibo.it/favicon.ico
It's not small but the browser will shrink it. Usually it's just 16x16 pixels.

Derrick Schneider said...

Which may only be something you can do if you host your own server, since I doubt blogspot gives you much in the way of disk access. On the other hand, if it lets you upload images, it might let you upload an ico file, and you could just put it at the top level of your blog.

Sam said...

Derrick (or anyone), could you elaborate on exactly how one might "just put it at the top level of your blog"
all this coding stuff is such a struggle!

Derrick Schneider said...

Sam,

The blogspot universe is one I don't know, but I'll do my best to explain.

Forgive me if this all stuff you already know. The simplistic view of any web site is a set of files sitting on some hard drive somewhere (in reality, it's more complex, though it's good enough for yours and mine). Your website is mapped to some directory on that hard drive, so when a person types www.obsessionwithfood.com, they're actually fetching files from /home/xxx/xxx/xxx/webpages, where at least one of those xxx's is my account name.

So. If you put your favicon.ico into that directory, it's at the "top level" because it's at the top of the tree of that site as far as the web browser's concerned. It looks for www.obsessionwithfood.com/favicon.ico when it hits the site. It doesn't look for www.obsessionwithfood.com/images/favicon.ico (where I keep most of my pics), because the images directory isn't the top level.

How does all this map to blogspot? I have no idea. Does blogspot let you decide where pictures should go (i.e., can you specify a directory location)? If so, you might be able change that to just /, upload the favicon.ico, and then change it back. But that's all just guesswork.

Elise said...

Hi Sam,

If you host your blogger blog on your own server (it is an option) you can add a favicon. I don't think you can do it if you are using Blogger's hosted service.

For those hosting their own blogs, there are instructions on how to create a favicon here: http://www.golivein24.com/tips/favicon/. You just need to create a 16 pixel by 16 pixel graphic and save it with a .ico extension (so instead of .jpg or .gif, use .ico). Photoshop lets you do that. I don't know about the other imaging software.

Elise said...

Actually, I should clarify. If you host your blogger blog on your own host, you should be able to host your own favicon. I haven't done it, but I don't see no reason why you shouldn't be able to.

ejm said...
This comment has been removed by a blog administrator.
ejm said...

(I erased the previous post because there was an error)

If you have a Blogger hosted blog you can put an icon on your page:

Just make sure that whichever server is hosting your icon allows hotlinking to remote sites and/or ask to allow your blogger blog to hotlink from your webhost.

Go to the template area of your blog and put the following coding in the header area underneath
<title><$BlogPageTitle$></title>

It should look like this:

<title><$BlogPageTitle$></title>

<link rel="shortcut icon" href="http://yourwebhost.com/favicon.ico" />
<link rel="icon" type="image/x-icon" href="http://yourwebhost.com/favicon.ico" />


You don't necessarily have to use favicon.ico either. You can use whatever icon name you like.

I set up a blogger hosted blog just to see how blogger works and have added an icon. Take a look at the source code to see.

Just remember, as ugo cei said, icons should ideally be 16x16. But many are 32x32.

Here is the icon for my site:
http://etherwork.net/favicon.ico

and here is the favicon that I used to use (this is the one that I put onto the blogger blog):
http://etherwork.net/images/ejmico.ico

The only drawback is that the remotely hosted icons don't necessarily show up in the URL window. But they DO show on the tabs in Mozilla and Netscape.

Arthur said...

Here is a link to a tool to convert image files into .ico files that can be used as favicons:

http://www.chami.com/html-kit/services/favicon/

Maybe it will be useful.