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.

11 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.

Busana Muslim Casual Dan Trendy 2015 said...

In the grand pattern of things you get a B- with regard to effort. Where exactly you actually misplaced everybody was first on the particulars. As people say, details make or break the argument.. And that could not be much more correct right here. Having said that, let me inform you what exactly did give good results. The writing is incredibly convincing which is probably the reason why I am making an effort in order to opine. I do not really make it a regular habit of doing that. Next, whilst I can certainly notice the leaps in logic you make, I am not sure of how you appear to unite the points which in turn make the actual final result. For right now I will yield to your issue but trust in the near future you actually link your facts better.

Model Baju Pesta Orang Gemuk said...

Extraordinary this put up is totaly unrelated to what I used to be looking google for, nevertheless it was listed at the first page. I guess your doing one thing proper if Google likes you sufficient to place you on the first page of a non related search.