HTML favicon: creating and adding
What is favicon?
Favicon (abbreviation of Favorite icon) is an icon, also known as a shortcut, a web site icon or a bookmark icon. Favicon is a regular graphic image (picture) associated with a particular Web page or Web site. Browsers that support adding favicon usually display it in the address bar and in tabs next to the page name, some browsers use it as an icon for a shortcut stored on the desktop. Search engine Yandex, gave the favicon great value and displays it along with the results of the search.
Creating
To create favicon you can use almost any graphic editor, but the format of the image you choose should be 16x16, 32x32 or 64x64 pixel, using 8-bit or 24-bit color. The image must have a PNG extension (W3C standard), GIF or ICO.
When creating an image, pay attention to the following nuances:
- Favicon should be made in the same style as the site, as it is a kind of business card of your project.
- The image you want to use as a favicon should be very easy to understand, and you should use just a few elements.
- Watch for what would favicon, the most transferred the essence of your site, business, project.
- Create a picture better so that it would cause the visitors of your site association. For example, phone icon, for mobile phone salon.
Adding favicon
To add favicon to a web page at the beginning of an HTML document, you will need to enter just one line with the <link>
tag, where you need to specify the rel
attribute to indicate to the browser that we are adding an icon, the href
attribute containing the address of our image, and an attribute type
that shows which image format we use:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page title</title> <link rel="icon" href="path/favicon.ico" type="image/x-icon"> </head> <body> </body> </html>
Note: please note that you can specify your own favicon for each Web page or for each section of your site.
The table shows the various options for adding favicon and provides support for browsers:
Google Chrome | Internet Explorer | Firefox | Opera | Safari | |
---|---|---|---|---|---|
<link rel="shortcut icon" href="httр://mysite.ru/myicon.ico"> | Yes | Yes | Yes | Yes | Yes |
<link rel="icon" href="httр://mysite.ru/image.ico"> | Yes | Yes (с IE 11) | Yes | Yes | Yes |
<link rel="icon" type="image/vnd.microsoft.icon" href="httр://mysite.ru/image.ico"> | Yes | Yes (с IE 9) | Yes | Yes | Yes |
<link rel="icon" type="image/png" href="httр://mysite.ru/image.png"> | Yes | Yes (с IE 11) | Yes | Yes | Yes |
<link rel="icon" type="image/gif" href="httр://mysite.ru/image.gif"> | Yes | Yes (с IE 11) | Yes | Yes | Yes |
<link rel="icon" type="image/x-icon" href="httр://mysite.ru/image.ico"> | Yes | Yes (с IE 9) | Yes | Yes | Yes |
Do not underestimate the importance of favicon, especially today, when there are billions of sites and pages on the Internet, some of which are your competitors. The site icon, as well as the logo, promotes its memorization and recognition. You should not miss the additional opportunity to improve your resource.