Html значки для сайта: 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-тип.

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

Понятие файловой структуры сайта
Установка иконки сайта
Карта сайта
Вернуться к оглавлению учебника

Как установить фавикон (favicon) на сайт

#Поисковая выдача #Оформление сниппета

#88

Ноябрь’18

Фавикон (Favicon) — это иконка, которая отображается рядом с названием страницы во вкладке браузера. Также данный значок отображается в сниппете сайта на странице результатов поиска в некоторых поисковых системах, например Яндекс и mail.

ru.

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

Для установки favicon нужно иметь подходящее изображение. Оно должно быть размером 16×16 пикселей и иметь формат .ico. Фавикон можно создать самостоятельно или выбрать из существующих на специальных сайтах.

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

Для добавления favicon необходимо разместить следующий html код:

<link type=»image/x-icon» href=»/favicon.ico» rel=»shortcut icon»>
<link type=»Image/x-icon» href=»/favicon.ico» rel=»icon»>

В атрибуте href указывается адрес соответствующего файла.

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

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