Для начала ознакомимся с рекомендациями Яндекса - фавиконка.
Если кратко, то:
Рекомендации по формату и размеру фавиконки
Размер: 120 × 120, 32 × 32 или 16 × 16 пикселей.
Формат: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Анимация не поддерживается.
Совет. Размер 120 × 120 пикселей или формат SVG позволяют отображать логотип сайта четче и заметнее на сервисах Яндекса.
Исходя из этого начнём работу по размещению favicon.svg
на нашем сайте.
Предварительно подготавливаем файл с фавиконкой (размером 120 × 120) в любом векторном редакторе (у меня - Inkscape) или же в онлайн редакторе (к примеру в таком).
Далее файл favicon.svg
размещаем в корне нашего сайта, опять же руководствуясь рекомендациями Яндекса — как установить фавиконку.
Разместив файл фавикон в корне нашего сайта, следующим шагом будет добавление записи в тег <head></head>
.
Добавляем строку следующего вида:
<link rel="icon" type="image/svg+xml" href="https://tavportal.ru/favicon.svg" />
Разберём эту строку, для понимания.
1. Атрибут rel
icon
- учитывается большинством браузеров;
shortcut icon
- учитывается браузером Internet Explorer.
2. Атрибут href
содержит адрес сайта с указанием имени файла-иконки favicon.svg
, расположенного в корневом каталоге.
3. Атрибут type
указывает на тип передаваемых данных, который зависит от формата файла:
- image/svg+xml
- указывается для формата SVG;
- image/x-icon
- указывается для формата ICO. Ранее наиболее распространенный формат для файлов-иконок сайтов.
- image/gif
, image/jpeg
, image/png
и image/bmp
- для форматов GIF, JPEG, PNG и BMP соответственно.
Вы должны авторизоваться, чтобы оставлять комментарии.
Комментарии ()