В инструкции рассмотрены следующие вопросы:

• Зачем нужен favicon для сайта?
• Где взять иконку для сайта?
• Как установить иконку на сайт?
• Как объявить Apple Touch icon и плитку для Windows 10?

Зачем нужен favicon для сайта?

Favicon (англ. favorite icon — «избранный значок») — это небольшое изображение, которое ассоциируется с конкретным веб-сайтом. Вы наверняка замечали, что у каждого сайта есть такая иконка:

Иконка отображается в следующих местах:

• в закладках и вкладках браузера,
• в результатах поиска (Яндекс, Google),
• в каталогах и рейтингах, загружающих favicon сайтов,
• на панели задач и рабочем столе операционной системы.

Favicon помогает пользователям быстрее находить сайт среди вкладок браузера или в результатах поиска, повышая узнаваемость ресурса.

Где взять иконку для сайта?

По умолчанию все сайты uCoz используют стандартный favicon. Чтобы создать собственную иконку сайта, вы можете воспользоваться одним из следующих способов:

• Найти готовый файл иконки с расширением .ico (например, на сайте icons8.ru),
• Преобразовать изображение в формат иконки с помощью онлайн-сервисов или специальных программ,
• Создать иконку самостоятельно в графическом редакторе (например, GIMP).

Кроме формата .ico, можно использовать иконки в формате .png. Такие изображения могут иметь разрешение до 180×180 пикселей.

Как установить иконку на сайт?

Когда ваши иконки (в форматах .ico и .png) будут готовы, загрузите их в корень сайта с помощью файлового менеджера. Корень сайта — это то, что вы видите первым при входе в файловый менеджер, не переходя в другие директории:

Система автоматически заменит стандартный favicon.ico на загруженный вами файл. Через некоторое время иконка отобразится во вкладках браузера, в закладках и в поисковых системах.

Как объявить Apple Touch icon и плитку для Windows 10?

Apple Touch icon используется не только на iOS, но и на других платформах. Чтобы иконка корректно отображалась, следует указать несколько размеров:

<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">

Для Windows 10 используются плитки (tiles), которые также можно объявить в коде:

<meta name="msapplication-square70x70logo" content="tile-70x70.png" />
<meta name="msapplication-square150x150logo" content="tile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="tile-310x150.png" />
<meta name="msapplication-square310x310logo" content="tile-310x310.png" />