Favicon and window title

It may be doubtful that the site icon and window title have something to do with web typography, I hasten to assure you. Have! Like the back of the book to its cover. I will not pour water and formulate the rules for the design of the icon and the title of the window, created to improve the convenience of navigating the tabs.

Icon

1. The site should have an icon, even a black square, even a circle. This is necessary in order for a user to distinguish a site in an endless row of tabs, in history or in favorites.
2. The icon is not obliged to repeat the site logo, after all 16 × 16. Here it is important to preserve the “readability” so that the icon does not turn into a colored spot. Its task is to visually identify the site. The icon may resemble a logo or contain company colors.
3. Using different icons for different content reduces distinctiveness, so it makes sense to use different icons only when absolutely necessary.
4. The icon can be used as an indicator of incoming messages or any changes, taking into account the preservation of distinguishability. For example:
   
   When playing media content, it is advisable to display an icon with a play icon so that the user knows “in which ear he has a buzz”! But it should be remembered that when adding to favorites, the icon that was displayed at the time of adding will be saved, so you should use it where there is a fast consumption of information (twitter, VKontakte, youtube, etc.), on sites intended for long continuous reading such indication can only distract.
5. The icon must be static and must not contain animation.
   Perhaps you would think that a small animation with a delay of 5-10 seconds may be useful, but imagine a situation when a user has several tabs open, say 5, even with such a delay, every 2 seconds the animation of one of the icons will play! And this creates extra work for the eyes.

Window title

1. The window title should contain text that is close in content to the first level header (it should be one per page). Those. he should inform the user of the page content.
2. The title should be short, no more than 5 words.
3. If the hierarchy is reflected in the header, then the order should be from smaller to larger, for example:
   «Favicon - Typography - Habrahabr»
   But not the other way around! Here it is important to remember that the icon identifies the resource, and the title identifies the content.
4. Punctuation marks are subject to the rules for ordinary headings: we omit the point, and leave question and exclamation marks.

Summary

As you can see the rules are very simple and subject to logic. And some are used for search engine optimization, so it is doubly useful. :)

Subtleties

It should be noted that Firefox, Safari and Opera (in IE did not check) differently understand and interpret the slash before the address of the icon, so it is better to omit it (slash). It should also be noted that Firefox caches the icons for a long time, so when changing the icon it makes sense to specify the version in the file name.
')

To help

For completeness, I will add links to icon generators.

• Favicon generator
  
• Favicon.cc allows you to create icons directly in the browser window, generates an icon on the fly and displays it in the browser and in a special window. Recommend.
  
• Favicon.com.mx
• Top 20 Generator Icons