Поменять иконку сайта — различия между версиями
Whoa (обсуждение | вклад) |
Vitaliks (обсуждение | вклад) |
||
| Строка 38: | Строка 38: | ||
При смене иконки браузер может довольно долго сохранять в кэше предыдущую версию изображения. Для того, чтобы увидеть изменения, полностью очистите кэш вашего браузера или откройте ваш сайт в другом браузере. Поисковые системы также могут закэшировать иконку, и она сменится при следующей переиндексации вашего сайта. Это обычно занимает от 2 до 4 недель. | При смене иконки браузер может довольно долго сохранять в кэше предыдущую версию изображения. Для того, чтобы увидеть изменения, полностью очистите кэш вашего браузера или откройте ваш сайт в другом браузере. Поисковые системы также могут закэшировать иконку, и она сменится при следующей переиндексации вашего сайта. Это обычно занимает от 2 до 4 недель. | ||
| − | [[ | + | [[category:Вопросы и уроки разработки сайтов на UMI.CMS]] |
Версия 13:16, 28 июня 2018
Актуально для версии 18.
Содержание
Задача
Поменять иконку сайта (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 недель.
