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.

favicon

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:

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 ChromeInternet ExplorerFirefoxOperaSafari
<link rel="shortcut icon"
href="httр://mysite.ru/myicon.ico">
YesYesYesYesYes
<link rel="icon" href="httр://mysite.ru/image.ico">YesYes (с IE 11)YesYesYes
<link rel="icon" type="image/vnd.microsoft.icon" href="httр://mysite.ru/image.ico">YesYes (с IE 9)YesYesYes
<link rel="icon" type="image/png" href="httр://mysite.ru/image.png">YesYes (с IE 11)YesYesYes
<link rel="icon" type="image/gif" href="httр://mysite.ru/image.gif">YesYes (с IE 11)YesYesYes
<link rel="icon" type="image/x-icon" href="httр://mysite.ru/image.ico">YesYes (с IE 9)YesYesYes

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.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011 - 2021 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen