Заметки о решаемых задачах АйТишников

Сделал - запиши. Нашёл - сохрани :)

Прошу прощения за рекламу на сайте. Я постарался сделать это максимально ненавязчиво и по минимуму. При чтении заинтересовавших вас статей она не будет вам мешать.
И если есть возможность поставить мой сайт в исключения у блокировщика рекламы, я буду очень признателен вам.

Как правильно разместить фавиконку (favicon) на сайте

Как правильно разместить фавиконку (favicon) на сайте

 

 

 

Для начала ознакомимся с рекомендациями Яндекса - фавиконка.

Если кратко, то:

Рекомендации по формату и размеру фавиконки

Размер: 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 соответственно.

 

05 июня 2022, 20:51    Александр Интернет 0    43 0

 

 

 

 



Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.