Поменять иконку сайта
Актуально для версии 19.
Содержание
Задача
Поменять иконку сайта (favicon), которая отображается браузером в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.
Решение
Большинство современных браузеров не требуют указания ссылки на иконку в коде страницы и в случае его отсутствия берут favicon.ico из корня сайта. Существует несколько способов установить иконку для сайта.
Первый способ
Загрузить в корень сайта файл с именем favicon.ico с новой иконкой. Иконка применяется ко всем подстраницам сайта, если на этих страницах иконка не указана другим способом. Также фавикон, загруженный в корень сайта, применяется ко всем сайтам в мультисайтовости. Если необходимо для сайтов сделать разные иконки, вам подойдет второй способ.
Второй способ
Явно указать местоположение файла иконки в коде страницы. Для этого внутри элемента <head> страницы необходимо разместить следующий код:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Атрибут href содержит абсолютный или относительный URL к файлу иконки. Форматом файла так же может быть png или gif, размером 16x16 или 32x32 и с 8-битной или 24-битной глубиной цвета. При этом атрибут type должен содержать MIME-тип формата (например, image/png для PNG).
Иконка для мобильных устройств
Для различных мобильных устройств необходимы иконки различных размеров поэтому для указания размеров иконок есть дополнительный атрибут sizes в котором можно указать размеры иконки. Если браузер устройства не найдет иконки подходящего размера, то он выберет самую близкую по размеру иконку большего размера, нежели рекомендуемый. Поэтому лучше указывать иконки нескольких размеров:
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png" />
Если вам необходимо чтобы иконка вашего сайта хорошо отображалась на всех устройствах и операционных системах можно воспользоваться сервисом типа этого: https://realfavicongenerator.net/
Внимание
При смене иконки браузер может довольно долго сохранять в кэше предыдущую версию изображения. Для того, чтобы увидеть изменения, полностью очистите кэш вашего браузера или откройте ваш сайт в другом браузере. Поисковые системы также могут закэшировать иконку, и она сменится при следующей переиндексации вашего сайта. Это обычно занимает от 2 до 4 недель.
