Jump to content

Websites and the upper-left icon.

Genecks
in Computer Science

Featured Replies

When I bookmark a website in Mozilla Firefox, I notice there is a small icon (avatar?) logo next to the name.

 

The areas of concern are circled in red.

 

websitelogoavatars7nn.th.jpg

 

How could I obtain the same result with my website when someone bookmarks it?

Those are called favicons. You can add one by creating (uploading) a favicon.ICO or favicon.GIF file inside your site's directory.

Put this inside your <head> tag:

<link rel="shortcut icon" href="favicon.ico" type="image/ico">

 

EDIT: You can put any URL in place of "favicon.ico" (like: http://www.geocities.com/outrage_from_hell/favicon.ico)

Ideally you'd use this:

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

because IE and Mozilla do it different ways (IE does it the second way, contrary to standards).

But really, you don't need either. If you have a file called favicon.ico in the same directory; your browser will find it depending on what mood it is in.

The only time I use the '<link rel="icon".....' comment is if I want to use different icons on different sections of the site. Otherwise I simply drop a "favicon.ico" file into the root directory as described above. As long as the "favicon.ico" file is placed in the root directory in this way most browsers will automatically find it.

 

For those who use Photoshop CS2 they can find free plugin for Photoshop that allows one to save graphics files as ICO files. My advice is to create them as 32x32 images and convert them to indexed color with no more than 32 colors. This can significantly reduce the file size.

  • Author

Automatically find it?

 

Are you saying most browsers look through the root director to find this file, in other words, I don't have put it on an individual page?

Yep, they do a recursive search throughout the entire path. This is because IE implemented it first (it was originally an icon that would only show up when you bookmarked a site, i.e. added it to your favorites) and that's the behavior Microsoft chose, so everyone copied it

That's why, in most server error logs, you'll find a bazzilion 404s from browsers looking for www_root/favicon.ico.

That's why, in most server error logs, you'll find a bazzilion 404s from browsers looking for www_root/favicon.ico.

That's how I first learned about favicon.ico. Years ago when Microsoft first implemented it, I started to notice 404s for favicon.ico, so I investigated to find out what it was.

But really, you don't need[/u'] either. If you have a file called favicon.ico in the same directory; your browser will find it depending on what mood it is in.

 

hahaha yah "depending on what mood it is in"...

 

I think my browser may be going through a bout of depression at the moment... lmao.

Archived

This topic is now archived and is closed to further replies.

Go to topic listing

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.