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

Development | Amber | Комментировать запись

Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.

В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.

Примечание: Найти все мануалы этой серии можно по тегу html-practice.

Фавикон – это небольшое изображение, которое находится на вкладке браузера слева от заголовка веб-страницы.

В этом мануале мы расскажем, как добавить иконку сайта – favicon – в адресную строку браузера с помощью HTML. В качестве фавикона вы можете использовать любое изображение, но, учитывая небольшой размер иконки, рекомендуем использовать простые высококонтрастные изображения. Сегодня существуют специальные сайты (типа favicon.cc), которые позволяют создавать пользовательские иконки.

Чтобы добавить такой значок на свой сайт, создайте в каталоге проекта папку images (если у вас еще нет такой папки) и сохраните здесь изображение, которое вы хотите использовать в качестве фавикона. Если у вас пока что нет такого изображения, вы можете использовать наш логотип.

Читайте также: Добавление изображения на веб-страницу с помощью HTML

Затем добавьте в файл index.html элемент <link> (в примере он выделен красным), поместите его прямо под элементом <title>. Теперь ваш код должен выглядеть так:

...
<title> My First Website </title>
<link rel="shortcut icon" type="image/svg" href=”Favicon_Image_Location”/>
...

Обязательно укажите относительный путь к файлу вашего изображения вместо Favicon_Image_Location. Сохраните файл index.html и перезагрузите его в своем веб-браузере. Вкладка вашего сайта в браузере теперь должна содержать фавикон.

Теперь вы умеете добавлять иконку сайта в адресную строку браузера с помощью HTML.