HTML :: Установка иконки для сайта

Что такое иконка сайта?

Как вы могли уже заметить, когда страница сайта открыта в браузере, во вкладке отображается не только заголовок страницы, но также и маленькая иконка, которая располагается перед заголовком и помогает нам отличать страницы одного сайта от страниц других сайтов (см. рисунок №1). Это особенно удобно, когда в браузере одновременно открыто много различных страниц, принадлежащих разным сайтам. Кроме того, иконка веб-сайта отображается рядом с ссылкой при добавлении страницы сайта в закладки браузера, в истории браузера, а также в некоторых поисковиках, например, Яндексе, где иконки сайтов располагаются опять же перед заголовками страниц сайтов, выданных по текущему поисковому запросу. Так что же все-таки представляет из себя иконка сайта?

Иконка сайта (от англ. favorites icon) – это специальный значок сайта, который отображается в браузерах пользователей и позволяет более точно идентифицировать страницы данного сайта. Обычно иконка сайта представляет собой небольшой служебный файл favicon.ico в виде изображения размером 16х16 пикселей, которое располагается в корневой папке сайта.

Рис. №1. Пример содержимого корневой папки сайта

Как видно из скриншота выше, иконка действительно помогает сделать сайт оригинальным и запоминающимся, тем самым привлекая внимание большего количества пользователей. Так что отнестись к созданию иконки сайта следует подобающим образом, иначе рядом с его страницами будут отображаться однообразные пиктограммы текущего браузера. Кроме того, отсутствие иконки сайта относится к правилам дурного тона и говорит скорее всего о неопытности веб-мастера либо временных неполадках на сайте.

Как создать иконку для сайта?

Для создания иконки сайта нужно воспользоваться либо специальной программой, либо одним из онлайн сервисов в Интернете, либо создать квадратное изображение размера 16х16 и более пикселей самостоятельно, сохранив его в виде файлика favicon.ico (как можно легко догадаться, имя файла представляет собой сокращение от словосочетания favorites icon). При этом хотелось бы сделать пару уточнений:

разрешается использовать иконки и больших размеров, а точнее 32х32, 48х48 и более пикселей, однако браузеры в основном все равно сжимают их до стандартного значения в 16х16 пикселей;
несмотря на то, что на сегодняшний день стандартным универсальным форматом для иконки, который поддерживают все основные браузеры, является формат ICO, большинство браузеров поддерживают также форматы PNG, JPEG и GIF.

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

Установка иконки на сайт

После того, как иконка будет готова ее необходимо поместить в корневую папку сайта. Именно там браузеры по умолчанию будут искать ее для дальнейшего отображения на экране. При этом иконка будет отображаться рядом с заголовками всех страниц сайта. Если же необходимо разместить иконку в другой папке или для какой-то страницы требуется установить свою иконку, следует воспользоваться тегом <link> (см. пример №2).

HTML

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<!-- Указываем кодировку страницы -->
	<meta charset="utf-8">	

	<!--  Зададим базовый адрес  -->
	<base href="https://site.name/">
	
	<!-- Иконка отобразится во вкладке возле данного заголовка страницы -->
	<title>Использование «link» для установки иконки сайта</title>

	<!-- Подключаем к странице иконку в формате ICO -->
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	
</head>
<body>
	Если необходимо подключить иконки других форматов, 
	следует использовать следующие конструкции:
    	
	<link rel="icon" href="favicon.jpeg" type="image/jpeg">
		
	<link rel="icon" href="favicon.png" type="image/png">
		
	<link rel="icon" href="favicon.gif" type="image/gif">
   
</body>
</html>

Пример №2 Использование элемента «link» для подключения иконки сайта

Как видно из примера, в теге <link> необходимо прописать абсолютный или относительный путь к файлу иконки, в качестве значения атрибута rel указать "icon", а в атрибуте type сообщить mime-тип подключаемого изображения.

Смена иконки сайта

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

Если же иконка расположена в папке, отличной от корневой, то следует поместить в данную папку новую иконку, а старую удалить (хотя, если форматы иконок будут отличаться, то старую иконку можно и не удалять). Далее, если формат новой иконки будет отличаться от формата старой, нужно будет обязательно прописать в теге <link> новые значения атрибутов href и type, т.к. при смене формата изображения изменится как расширение файла (а значит и путь к нему), так и его mime-тип.

HTML :: Установка иконки для сайта

Что такое иконка сайта?

Как создать иконку для сайта?

Установка иконки на сайт

Смена иконки сайта

Быстрый переход к другим страницам