Как называется значок рядом с названием сайта


Подробное руководство по фавикону для сайта

Все важные знания о фавиконах: зачем нужны, как выбрать сделать и установить на сайт для разных разделов и устройств. Обновленный материал.

Что такое фавикон

Favicon (от англ. FAVorites ICON — «значок для избранного») — значок сайта или страницы.

Значок отображается:

Сайты с фавиконами в выдаче Яндекса

В Google фавиконки не отображаются. Поисковик периодически тестирует эту функцию, так что они могут появиться в будущем.

Фавиконки в выдаче Google (тест)

Хотя в результатах иностранного поисковика фавиконов нет, они все равно отображаются на вкладках браузера и в закладках.

Зачем нужен фавикон

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

Favicon привлекает внимание к сайту. Без иконки сниппет меньше заметен взгляду, кажется, что ему чего-то не хватает.

Сайт без фавикона в выдаче среди прочих

Иконка для сайта — элемент бренда. Пользователь лучше запомнит логотип из фавикона и свяжет его с брендом, если будет видеть его на сайте и других площадках.

Логотип компании в фавиконе

В закладках и истории проще искать нужный сайт не по тексту заголовка, а по опознавательной картинке — знакомому фавикону.

Закладки в Google Chrome

Браузеры запрашивают файл favicon.ico и если не находят строку с указанием фавикона, сервер отмечает в логах ошибку 404.

К примеру, такую:

Failed to load resource: net::ERR_EMPTY_RESPONSE (20:00:55:963 | error, network) at <a href="http://localhost:8383/favicon.ico">http://localhost:8383/favicon.ico</a>

Какую картинку выбрать для фавикона

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

Фавикон с чашкой для сайта о кофе выглядит гармоничнее

Раньше любая иконка бросалась в глаза, потому что не все сайты их ставили. Сейчас выделиться сложнее, по запросу «как варить кофе» сайт без фавикона нашелся только на восьмой странице. Привлечь внимание лучше яркой контрастной иконкой, иногда для этого ставят стрелку, указывающую на сайт.

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

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

Как создать favicon для сайта

Есть три самых распространенных способа:

  1. Специальный плагин для Photoshop
    Позволяет работать этому популярному редактору изображений с форматом ico.
  2. Специальные программы для изготовления фавиконов
    Они специально «заточены» для изготовления иконок для сайта.
  3. Онлайн генератор favicon
    Самый простой и доступный способ — загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.

Загрузите квадратную картинку в генератор от PR-CY, он создаст архив с файлом ICO, в котором будет несколько вариантов фавикона, в том числе ретина иконки.

Панель бесплатного генератора фавикона

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

  1. Создайте картинку для фавикона с именем favicon.ico.
  2. Готовый файл нужно сохранить в корневом каталоге сайта. 
  3. Если вы захотите использовать разные фавиконы для разделов сайта, скопируйте путь к изображению  https://sitename.ru/favicon.ico. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
  4. Добавьте ссылку на размещенный файл в HTML-код главной:
...
 <link rel="icon" href="https://sitename.ru/favicon.ico" type="image/x-icon">
 ...

Атрибут "rel" указывает на тип ресурса. Большинство браузеров распознают "icon", для Internet Explorer нужен "shortcut icon".

...
 <link rel="shortcut icon" href="<img="" src="https://sitename.ru/favicon.png">" type="image/x-icon">
 ...

От формата файла зависит тип передаваемых данных. Для ICO это "image/x-icon" или "image/vnd.microsoft.icon", для PNG — "image/png" и аналогично для других форматов.

Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel="apple-touch-icon". 

Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.

Как установить разные favicon для отдельных страниц

Разным страницам сайта можно указать разные фавиконки, чтобы они различались на вкладках. К примеру, веб-мастер может установить разные цвета одной иконки для блога, каталога и форума или для главной и разных сервисов, как у PR-CY:

Фавиконы на разных разделах одного сайта


Как установить разные фавиконки разделам сайта:

  1. Фавикон для главной и остальных страниц назовите favicon.ico, для отдельных разделов укажите названия по этим разделам, чтобы не запутаться.
  2. В коде нужной страницы пропишите путь к другой фавиконке раздела:
<link rel="icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon_blog.ico" type="image/ico">

Размеры фавиконов для браузеров и устройств

С технической точки зрения быстрее и проще сделать одну иконку ICO, PNG или SVG для всех устройств. С точки зрения юзабилити лучше сделать несколько для разных устройств и браузеров, потому что они могут отличаться внешне — где-то требуется больший размер, где-то достаточно небольшого файла.

Если мобильный пользователь захочет добавить ссылку на сайт на главный экран смартфона, в Android и iOS иконкой для ссылки станет фавикон.

Фавиконы сайтов на экране смартфона

Если это возможно, ориентируйтесь на каждую платформу, с которой пользователи могут открыть сайт.

Достаточный пакет фавиконок для популярных браузеров

Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16x16, 32x32 и 48x48.

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

<link rel="icon" type="image/ico" href="/icons/favicon.ico">
 <link rel="icon" type="image/ico" href="/icons/favicon.ico">
 <link rel="shortcut icon" href="/icons/favicon.ico">

Дополнительно можно добавить файлы для мобильных устройств.

Android

Обычно используют файл .png размером 180x180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

<link rel="manifest" href="/manifest.json">

Пример кода:

{
 "name": "%title%",
 "icons": [
 {
 "src": "\/android-chrome-36x36.png",
 "sizes": "36x36",
 "type": "image\/png",
 "density": "0.75"
 },
 {
 "src": "\/android-chrome-48x48.png",
 "sizes": "48x48",
 "type": "image\/png",
 "density": "1.0"
 },
 {
 "src": "\/android-chrome-72x72.png",
 "sizes": "72x72",
 "type": "image\/png",
 "density": "1.5"
 },
 {
 "src": "\/android-chrome-96x96.png",
 "sizes": "96x96",
 "type": "image\/png",
 "density": "2.0"
 },
 {
 "src": "\/android-chrome-144x144.png",
 "sizes": "144x144",
 "type": "image\/png",
 "density": "3.0"
 },
 {
 "src": "\/android-chrome-192x192.png",
 "sizes": "192x192",
 "type": "image\/png",
 "density": "4.0"
 }
 ]
 }

С помощью файла-манифеста у сайта, который пользователь вынес на главный экран смартфона, будет настроенный качественный фавикон.

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:

<meta name="msapplication-TileColor" content="#da532c">
 
 <meta name="msapplication-config" content="/icons/browserconfig.xml">

Apple

Для iOS иногда используют размер 57x57, но рекомендуют лучше делать иконку PNG размером 180x180. В документации Safari такие называются Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах. 

В rel нужно указать “apple-touch-icon.png”.

Пример кода:

<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью link rel="mask-icon".

Пример кода:

<link rel="mask-icon" href="mask.svg" color="red">
 <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

<meta name="msapplication-TileColor" content="#da532c">
 <meta name="msapplication-config" content="/icons/browserconfig.xml">

У Microsoft есть «Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

<browserconfig>
 <msapplication>
 <tile>
 <square70x70logo src="/mstile-70x70.png">
 <square150x150logo src="/mstile-150x150.png">
 <square310x310logo src="/mstile-310x310.png">
 <wide310x150logo src="/mstile-310x150.png">
 <tilecolor>#da532c</tilecolor>
 </wide310x150logo></square310x310logo></square150x150logo></square70x70logo></tile>
 </msapplication>
 </browserconfig>

Зачастую для сайта хватит фавикона одного или трех размеров, чтобы они выглядели нормально. Но лучше уделить немного времени и отдельно прописать файлы для разных ОС и браузеров, чтобы фавикон выглядел качественно на любом устройстве в выдаче поисковика, на вкладке, панели закладок и на экране смартфона.

html - Как создать небольшой значок рядом с вкладкой веб-сайта для моего сайта?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании

Загрузка…

.

Учебное пособие по иконам



Как добавить значки

Чтобы вставить значок, добавьте имя класса значка к любому встроенному элементу HTML.

Элементы и широко используются для добавления иконы.

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


Font Awesome 5 иконок

Чтобы использовать значки Free Font Awesome 5, перейдите по ссылке fontawesome.com и войдите в систему, чтобы получить код для использования на своих веб-страницах.

Узнайте больше о том, как начать работу с Font Awesome, в нашем Font Awesome 5 глава.

Примечание: Скачивание или установка не требуется!

Пример




yourcode .js ">






Попробуй сам "

Font Awesome 4 иконки

Чтобы использовать значки Font Awesome 4, добавьте следующую строку в раздел своей HTML-страницы:

Примечание: Скачивание или установка не требуется!

Пример










Попробуй сам "

Bootstrap 3 иконки

Чтобы использовать глификоны Bootstrap 3, добавьте следующую строку в раздел своей HTML-страницы:

Примечание: Скачивание или установка не требуется!

Пример










Попробуй сам "

Примечание: Глификоны не поддерживаются в Bootstrap 4.

Для получения дополнительной информации о Bootstrap 3 и Glyphicons посетите наш учебник по Bootstrap 3.


Google Иконки

Чтобы использовать значки Google, добавьте следующую строку в раздел своей HTML-страницы:

Примечание: Скачивание или установка не требуется!

Пример





облако
избранное
вложение
компьютер
трафик


Попробуй сам "

Чтобы просмотреть полный список ВСЕХ значков (font awesome, bootstrap и google), посетите Ссылка на значок.



.

Иконки W3.CSS



Библиотеки значков

С W3.CSS вы можете использовать любую библиотеку значков, например:


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

Для вставки значка:

  1. Включите библиотеку значков из CDN (сети доставки контента) в раздел .
  2. Добавьте имя класса значка к любому встроенному элементу HTML.

Совет: Элементы и широко используются для добавления иконы.

Для управления размером значка измените свойство font-size значка или используйте один из w3- размер классы:

  • W3-крошечный
  • W3-малый
  • W3 большой
  • W3-xxlarge
  • w3-xxxlarge
  • W3-Jumbo

Некоторые иконки Font Awesome


fa fa-home


fa fa-bar


fa fa-стрелка-влево


fa fa-стрелка-вправо


fa fa-search


fa fa-close


fa fa-refresh


fa fa-trash


fa fa-male


fa fa-car


fa fa-грузовик


fa fa-plane

Пример



W3.CSS






Попробуй сам "

Некоторые значки Google Material Design

дом
дом

меню
меню

arrow_back
arrow_back

arrow_forward
arrow_forward

поиск
поиск

закрыть
закрыть

обновить
обновить

удалить
удалить

человек
человек

направления_автомобиль
направления_машина

local_shipping
local_shipping

local_airport
local_airport

Пример



W3.CSS


главная
поиск
облако
удалить


Попробуй сам "

Некоторые значки начальной загрузки


дом


меню-гамбургер


arrow_back


arrow_forward



поиск


удалить


обновить


мусор


Пример



W3.CSS






Попробуй сам "

.

CSS-иконок



Как добавить значки

Самый простой способ добавить значок на HTML-страницу - использовать библиотеку значков, например Font Awesome.

Добавьте имя указанного класса значка к любому встроенному элементу HTML (например, или ).

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


Font Awesome Icons

Чтобы использовать значки Font Awesome, перейдите на fontawesome.com, войдите в систему и получите код для добавления в раздел своей HTML-страницы:

Узнайте больше о том, как начать работу с Font Awesome, в нашем Шрифт Отличный урок 5.

Примечание: Никакой загрузки или установки не требуется!

Пример










Результат:

Попробуй сам "

Для полного ознакомления со всеми значками Font Awesome посетите наш Справочник по значкам.



Иконки начальной загрузки

Чтобы использовать глификоны Bootstrap, добавьте следующую строку в раздел вашей HTML-страницы:

Примечание: Никакой загрузки или установки не требуется!

Пример










Результат:

Попробуй сам "

Google Иконки

Чтобы использовать значки Google, добавьте следующую строку в раздел своей HTML-страницы:

Примечание: Никакой загрузки или установки не требуется!

Пример





облако
избранное
вложение
компьютер
трафик


Результат:

Попробуй сам "

.

Смотрите также