Поменять иконку сайта — различия между версиями
Vitaliks (обсуждение | вклад) (Новая страница: «'''Актуально для версии 18.''' == Задача == <p> Поменять иконку сайта (favicon), которая отображается…») |
Vitaliks (обсуждение | вклад) |
||
| Строка 11: | Строка 11: | ||
</p> | </p> | ||
=== Первый способ === | === Первый способ === | ||
| − | Загрузить в корень сайта файл с именем favicon.ico с новой иконкой. Иконка применяется ко всем подстраницам сайта если на этих страницах иконка не указана другим способом. | + | Загрузить в корень сайта файл с именем '''''favicon.ico''''' с новой иконкой. Иконка применяется ко всем подстраницам сайта если на этих страницах иконка не указана другим способом. |
=== Второй способ === | === Второй способ === | ||
| − | Явно указать местоположение файла иконки в коде страницы. Для этого | + | Явно указать местоположение файла иконки в коде страницы. Для этого внутри элемента <head> страницы необходимо разместить следующий код: |
<source lang="html4strict"> | <source lang="html4strict"> | ||
| − | <link rel="icon" type="image/ | + | <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> |
</source> | </source> | ||
| − | Атрибут href содержит абсолютный или относительный URL к файлу иконки. | + | Атрибут '''''href''''' содержит абсолютный или относительный URL к файлу иконки. |
Форматом файла так же может быть png или gif, размером 16x16 или 32x32 и с 8-битной или 24-битной глубиной цвета. | Форматом файла так же может быть png или gif, размером 16x16 или 32x32 и с 8-битной или 24-битной глубиной цвета. | ||
При этом атрибут type должен содержать MIME-тип формата (например, image/png для PNG). | При этом атрибут type должен содержать MIME-тип формата (например, image/png для PNG). | ||
| − | + | ==== Иконка для мобильных устройств ==== | |
| − | + | Для различных мобильных устройств необходимы иконки различных размеров поэтому для указания размеров иконок есть дополнительный атрибут '''''sizes''''' в котором можно указать размеры иконки. Если браузер устройства не найдет иконки подходящего размера, то он выберет самую близкую по размеру иконку большего размера, нежели рекомендуемый. Поэтому лучше указывать иконки нескольких размеров: | |
| − | + | <source lang="html4strict"> | |
| + | <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" /> | ||
| + | </source> | ||
| + | Если вам необходимо что-бы иконка вашего сайта хорошо отображась на всех устройствах и операционных системах можно воспользоваться сервисом типа этого: | ||
| + | https://realfavicongenerator.net/ | ||
=== Внимание === | === Внимание === | ||
При смене иконки браузер может довольно долго сохранять в кэше предыдущую версию изображения. Для того, чтобы увидеть изменения, полностью очистите кэш вашего браузера или откройте ваш сайт в другом браузере. Поисковые системы также могут закэшировать иконку, и она сменится при следующей переиндексации вашего сайта. Это обычно занимает от 2 до 4 недель. | При смене иконки браузер может довольно долго сохранять в кэше предыдущую версию изображения. Для того, чтобы увидеть изменения, полностью очистите кэш вашего браузера или откройте ваш сайт в другом браузере. Поисковые системы также могут закэшировать иконку, и она сменится при следующей переиндексации вашего сайта. Это обычно занимает от 2 до 4 недель. | ||
[[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]] | [[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]] | ||
Версия 14:35, 31 мая 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 недель.
