favicon на все случаи

В этой записи я не буду рассказывать о том, как сделать фавики, лишь расскажу, какие они бывают и для чего нужны. Описанное ниже не правило, а лишь рекомендации, которым стараюсь следовать сам.

Favicon для браузера
Разные браузеры могут подхватывать различного размера иконки, что может выглядеть не очень симпатично. Для того, чтобы этого избежать можно сделать иконки нескольких размеров и позволить браузеру выбрать самому.
Мне нравится идея делать самый маленький фавик ico, а остальные png. К слову, png не поддерживает Internet explorer, поэтому от ico лучше не отказываться:

• иконка ico размером 16×16, к заголовку страницы добавляем:
  <link rel="icon" href="/favicon.ico" sizes="16x16" type="image/x-icon" />
• иконка png размером 32×32, к заголовку добавляем:
  <link rel="icon" href="/favicon.png" sizes="32x32" type="image/png">
• иконка png размером 64×64, к заголовку добавляем:
  <link rel="icon" href="/favicon-64.png" sizes="32x32" type="image/png">

Для любителей можно нарисовать иконку в формате svg. Однако svg поддерживается небольшим количеством браузеров:

• <link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml">

Favicon для мобильных устройств

Для того, чтобы при использовании сайта в качестве мобильного приложения на айфоне или айпэде ярлык на спригборде отображался симпатично, необходимо указать особую инструкцию и добавить png-иконку размера 57×57 пикселей:

• <link rel="apple-touch-icon" href="/favicon-i.png" />

Вероятно есть какие-то еще иконки, о которых мне тоже хотелось бы узнать.