Home / Articles / Programming languages / Markup languages / HTML & CSS / How to add an icon in browser's address bar and bookmarks for a website

How to add an icon in browser's address bar and bookmarks for a website

How to add an icon in browser's address bar and bookmarks for a website
 
How to add an icon in browser's address bar and bookmarks for a website
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


As you probably already know, some websites on the Internet have small icons (favicons) that are displayed by browsers somewhere next to the name of the website. Webmasters come up with some kind of recognizable and vivid image containing website logo and attach it to the website. People recognize the website more by a picture than by name - that's how our brain works.

Favicons in browser

Creating favicon.ico file

The file name of the icon should be favicon.ico, no other options. There are still old standards which are very adamant about this specific file name, so it is better not to experiment. The website icon is usually 16x16 pixels and is in the ICO format - standard graphic format of Windows icons. And while other browsers are able to display GIF, JPEG and PNG icons, as said before it's better not to experiment.

Color depth should not exceed 256 colors, that is 8 bits. You can make the icon bigger (32×32 or 48×48 with color depth of 32 bits, but then it will occupy more space and, again, there will be problems with older IE).

How to create the icon?

Adobe Photoshop can't save graphic images in ICO format, but you can connect to it a plugin which helps it to understand ICO format.

For Windows, there are other icon editors, they also can do the trick. Take for example Greenfish Icon Editor Pro - a simple and free editor. Icon editor is also included in the MS Visual Studio package for developing websites.

The standard graphics editor GIMP for Unix, contains ICO format saving option and perfectly understands all the nauseas, including layer support and 32-bit colors. So in Unix, no problems expected.

If you don't have any of these programs, then, instead, you can try using any free online converters, a bunch of them are on the Internet. They can usually save any image format into a pristine ICO file.

Icon location

The icon itself is located in the root of the website and to ensure that everything would work properly, the information about its location should be indicated in the head tag of HTML page.

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

What do these two entries mean?

The entry in "shortcut icon" installs its own icon, shown in the browser's address bar.

The entry in "icon" installs a different kind of icon and it, in turn, creates a Windows saved link to your website. In a perfect world it would be great to save the icon in a bigger size - 32×32 or 48×48 pixels. But the small one will have to do.

Type "image/x-icon" is a MIME-type of file, this means that it's the above mentioned icon in ICO format. As we said before, website icon can be specified even with a GIF image, but it's not recommended. However, GIF format is more advanced, it has transparency and ability to create animated images. Although, there is one way around this limitation:

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

The browser always chooses the last of these icons, on the condition that it recognizes the type of icon. Thus, those browsers that recognize GIF will choose GIF, others will choose ICO. Thus, the user with a more "apt" browser will see a more beautiful picture. Still, ICO-version should always be specified, as other icons of MIME-types are useless when dealing with Microsoft Windows icons (URL-files), moreover, you also use it on the desktop, and in folders.

Differences in displaying website icons in various browsers

Have to say that when using website icon there is no single standard accepted by all browsers. Therefore, the behavior of different browsers while loading the icons will vary. Nowadays most browsers do recognize different formats. Except IE which is the worst of them. So all about it we'll talk in detail.

Here's where the interesting part begins. The history of favicon.ico began with the long forgotten IE version 5.0, when this browser showed the icon only if stored in the favorites (bookmarks). Hence the name - favorite icon. Therefore, if you don't see in IE the icon of your website, first save it to favorites and then restart your browser. If after this IE still doesn't display it, then try to clean your browser cache.

Internet Explorer always tries to take the picture from the root directory of the website and always assumes it is named favorite.ico. Even if the icon is not specifically described in the HTML document. If such file is not on the server or icon described in the HTML document is under a different name - IE still stupidly will ask for /favicon.ico from server and, of course, will receive 404 error as a response. And that’s it, these are the all steps performed by IE. It considers the icon absent and will not display it. By the way, this is where all the errors.log in Apache are coming from, with warnings like "404 GET favicon.ico". Yes, it's IE developers to blame, they are the reason why IE consumes so much of the server disk space. To avoid this, create file whose name ends favicon.ico with at least zero size. It won't display, but at least you won't litter your server logs.

Actually, up till version 6.0 nothing had changed. And by the way, if icon picture size contains more than 16×16 - IE doesn't recognize it, as well.

Yet starting from Internet Explorer 7, according to Microsoft's version IE shows these icons not only for few websites, but for all of them. Icon search algorithm has also changed a bit. IE is now looking at what was indicated in the document and considers this entry a priority. If favicon.ico absence it follows default, the old fashioned way - from the root of the website.

The other modern browsers also support icons, but unlike IE, they are always directed by the link "shortcut icon" and don't look for the icon in other places. Besides, they typically support icons with different graphic formats and sizes (in the latter case using scaling to achieve the desired result).

Conclusions

Create favicon.ico with the size 16×16 pixels, and not a pixel more, place it in the root of your website and be sure to set its path in HTML. Thus, you will achieve maximum cross-browser compatibility.

Possible problems

If the icon didn't pop up, make sure that your server sends the icon to the browser and displays it, instead of transmitting it as a file and prompting to save it. This can be simply verified by typing in the browser address bar of your website and the name of the icon, for example http://yourwebsite.com/favicon.ico, provided, of course, that the icon is in the root directory.

In the second case, your server is not configured to display .ico files. To change this situation you need to create in the root of the website the following file - .htaccess file and add to it the following line:

AddType image/x-icon .ico

Well, or to add it directly to the main config file of the Apache - httpd.conf.


 

Read also

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation