Добавление favicon

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 16
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
Замечали маленькую иконку во вкладке браузера рядом с названием сайта? Это и есть Favicon. Это не просто украшение, а важный элемент брендинга, который помогает пользователям быстро опознать ваш сайт среди множества открытых вкладок или в списке закладок. Добавление такой иконки — одна из первых задач при создании сайта. Делается это с помощью специального тега <link> внутри секции <head> документа. В этих заданиях мы пошагово разберем, как подключить favicon к странице: от добавления самого тега до указания всех необходимых атрибутов для разных форматов иконок, включая классический `.ico`, современный `.png` и масштабируемый `.svg`.
Список тем

Добавление тега для иконки

id: 37894_favicon-add-link-tag

Для подключения favicon, как и для подключения CSS-стилей, используется один и тот же тег. Ваша задача — вставить в секцию <head> правильный тег, который устанавливает связь с внешним ресурсом.

Определение типа связи: rel

id: 37894_favicon-add-rel-attribute

Теперь, когда тег на месте, нужно объяснить браузеру, что именно мы подключаем. Для этого используется атрибут, определяющий тип отношения (relation) между страницей и файлом. Добавьте этот атрибут.

CSS
body {
  margin: 0;
  background-color: #f4f4f9;
  font-family: sans-serif;
  padding: 20px;
}
p {
  font-size: 18px;
  color: #333;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <title>Мой сайт с Favicon</title>
  <link input1="icon" href="https://naytikurs.ru/img/11s.svg">
</head>
<body>
  <p>Мы указываем тип связи.</p>
</body>
</html>
Чтобы указать, что подключаемый ресурс является иконкой сайта, используется атрибут `rel` со значением `icon`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Указание пути к файлу: href

id: 37894_favicon-add-href-attribute

Браузер знает, что ему нужна иконка, но не знает, где её найти. Добавьте атрибут, который указывает путь к файлу иконки.

CSS
body {
  margin: 0;
  background-color: #f4f4f9;
  font-family: sans-serif;
  padding: 20px;
}
p {
  font-size: 18px;
  color: #333;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <title>Мой сайт с Favicon</title>
  <link rel="icon" input1="https://naytikurs.ru/img/12s.svg">
</head>
<body>
  <p>Теперь браузер знает, где искать иконку.</p>
</body>
</html>
Как и в ссылках `<a>`, для указания пути к ресурсу используется атрибут `href`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Указание MIME-типа для PNG

id: 37894_favicon-add-png-type

Хотя современные браузеры часто определяют тип файла автоматически, хорошей практикой является явное указание MIME-типа. Добавьте атрибут `type` с правильным значением для изображения в формате PNG.

CSS
body {
  margin: 0;
  background-color: #f4f4f9;
  font-family: sans-serif;
  padding: 20px;
}
p {
  font-size: 18px;
  color: #333;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <title>Мой сайт с Favicon</title>
  <link rel="icon" href="https://naytikurs.ru/img/1.png" type="input1">
</head>
<body>
  <p>Указание типа файла помогает браузеру быстрее его обработать.</p>
</body>
</html>
Для PNG-файлов используется MIME-тип `image/png`. Это значение нужно подставить в атрибут `type`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Favicon в формате PNG с указанием размера

id: 37894_favicon-png-with-sizes

Для растровых иконок, таких как PNG, можно предоставить браузеру подсказку о размере изображения. Это помогает ему выбрать наиболее подходящую иконку, если их несколько. Добавьте атрибут для указания размера и его значение '32x32'.

CSS
body {
  margin: 0;
  background-color: #f4f4f9;
  font-family: sans-serif;
  padding: 20px;
}
p {
  font-size: 18px;
  color: #333;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <title>Мой сайт с Favicon</title>
  <link rel="icon" type="image/png" href="https://naytikurs.ru/img/4.png" input1="input2">
</head>
<body>
  <p>Атрибут размера полезен, когда у вас есть несколько иконок разного разрешения.</p>
</body>
</html>
Используйте атрибут `sizes` со значением `32x32`, чтобы указать размер иконки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Использование SVG в качестве Favicon

id: 37894_favicon-svg-type

Векторные SVG-иконки — отличный выбор для favicon, так как они идеально масштабируются без потери качества. Укажите правильный MIME-тип для подключения иконки в формате SVG.

CSS
body {
  margin: 0;
  background-color: #f4f4f9;
  font-family: sans-serif;
  padding: 20px;
}
p {
  font-size: 18px;
  color: #333;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <title>Мой сайт с Favicon</title>
  <link rel="icon" href="https://naytikurs.ru/img/11s.svg" type="input1">
</head>
<body>
  <p>SVG-иконки выглядят четко на любых экранах, от обычных до Retina.</p>
</body>
</html>
Для файлов SVG (Scalable Vector Graphics) используется специальный MIME-тип: `image/svg+xml`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Сборка полной строки для favicon

id: 37894_favicon-full-recap

Давайте закрепим знания. Соберите полную строку для подключения favicon, заполнив пропуски для тега, типа связи и пути к файлу.

CSS
body {
  margin: 0;
  background-color: #f4f4f9;
  font-family: sans-serif;
  padding: 20px;
}
p {
  font-size: 18px;
  color: #333;
}
HTML
<!DOCTYPE html>
<html>
<head>
  <title>Мой сайт с Favicon</title>
  <input1 input2="icon" input3="https://naytikurs.ru/img/5.png">
</head>
<body>
  <p>Все части на месте. Отличная работа!</p>
</body>
</html>
Вам нужно вставить тег `<link>`, затем атрибут `rel` со значением `icon` и атрибут `href` с путем к файлу.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру