HTML Иконка сайта (Favicon)

Иконка сайта или Favicon — это маленькое изображение, отображаемое рядом с названием страницы в вкладке браузера.

Как добавить иконку сайта в HTML?

Вы можете использовать любое понравившееся вам изображение в качестве иконки вашего сайта. Вы также можете создать собственную иконку на специализированных сайтах вроде favicon.cc.

Совет: Favicon — это маленькое изображение, поэтому оно должно быть простым и иметь высокий контраст.

Иконка сайта отображается слева от названия страницы в браузере, вот пример:

Пример favicon

Чтобы добавить фавикон на ваш сайт, сохраните файл изображения либо непосредственно в корневую папку вашего веб-сервера, либо создайте в корневой директории папку «images» и поместите туда своё изображение. Обычное название файла фавикона — «favicon.ico».

Далее добавьте элемент <link> в ваш файл «index.html» сразу после элемента <title>, следующим образом:

<!DOCTYPE html>
<html>
<head>
  <title>Название моей страницы</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>Это заголовок</h1>
<p>Это параграф.</p>

</body>
</html>

Теперь сохраните файл «index.html» и перезагрузите страницу в вашем браузере. Теперь ваша страница должна отображать ваше изображение фавикона слева от названия страницы.

Поддерживаемые форматы файлов фавиконов

Следующая таблица показывает поддержку форматов файлов для фавиконов различными браузерами:

БраузерICOPNGGIFJPEGSVG
EdgeДаДаДаДаДа
ChromeДаДаДаДаДа
FirefoxДаДаДаДаДа
OperaДаДаДаДаДа
SafariДаДаДаДаДа
HTML Иконка сайта (Favicon) - Назад HTML Элемент picture Вперёд – HTML Иконка сайта (Favicon) HTML Заголовок страницы
To top