что такое фавикон, как его создать и добавить на сайт

Что такое favicon

Классический favicon (иконка для сайта) – это ICO-файл с размером 16 × 16 с поддержкой 16 или 24-битных цветов и прозрачности. Намного позже он появился в формате 32 × 32, но старые браузеры все еще уменьшают его до 16 × 16.

Это что-то похожее на визитную карточку сайта. И чем ближе по стилю визитная карточка к стилю сайта, тем лучше. Хороший фавикон – тот, который запоминается и создает ассоциации с брендом.

Favicon Checker

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

Почему favicon имеет значение

Основная цель использования фавикона – это улучшение удобства пользования сайтом. Этот файл присутствует практически во всех современных популярных браузерах и вкладках браузера. Изначально фавикон был создан для быстрого визуального поиска необходимого сайта среди тысяч закладок в Интернете. Сейчас же он является удобным символом идентификации сайта при большом количестве открытых вкладок. А в некоторых поисковых системах (например Яндекс, а с 2019 года и Google), фавикон появляется и в результатах поисковой выдачи напротив каждого сайта.

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

Примеры фавиконок

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

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

Как создать фавикон для сайта

Вы можете самостоятельно создать фавикон в фоторедакторе или же использовать онлайн сервисы.

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

Чтобы понять, какие вообще варианты фавиконок могут быть, изучите примеры на этих ресурсах:

Проверьте сайт на ошибки SEO

Никакой favicon не влияет на удобство использования сайта, но отсутствие тегов Title и Description может привести к потере трафика.

Аудит сайта

Создание иконки в Photoshop

Основная проблема в том, что Photoshop не поддерживает файлы формата «.ico». Поэтому необходимо загрузить и установить его плагин из Telegraphics.

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

После этого выберите папку IMAGE, перейдите к IMAGE SIZE и измените его на 16 × 16 пикселей. Не забудьте удостовериться, что вы не размываете его, нажав кнопку RESAMPLE IMAGE и BICUBIC SHARPER. Если вы удовлетворены результатами, откройте папку FILE и нажмите SAVE AS.

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

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

1. Загрузите фавикон на ваш сервер. Затем пропишите его адрес для FTP-сервера. Нажмите Enter, войдите в систему и просто загрузите файл в корневую папку.
2. Измените HTML-страницу сайта. Найдите и загрузите файл «header.php» или «index.html» с сервера. Если ваш сайт сделан на HTML, вы должны вставить код в область head файла index.html:

<link rel="shortcut icon" type="image/x-icon" href="http://yourwebsite.com/favicon.ico">

Если вы работаете с WordPress, вставьте код в область head файла header.php:

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url') ?>/favicon.ico">

Nataliya Fialkovskaya

SEO specialist

Nataliya is SEO expert at Sitechecker. She is responsible for blog. Can’t live without creating valuable content about SEO and Digital Marketing.

Создание favicon для сайта 2020 / Хабр

Что такое favicon и для чего он нужен?

Favicon

– это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

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

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

Какой формат использовать для favicon?

Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

О каких платформах пойдет речь в этой статье?

• Десктопные браузеры
• Chrome на Android
• Иконка закладки в iOS (PWA)
• macOS
• Windows

Десктопные браузеры

Начнем, пожалуй, с классического десктопа.

Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">

Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер

icoconvert

. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).

Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.

Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.

Chrome на Android

Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.

<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

Android Chrome полагается на манифест веб-приложения. Любой сайт может использовать манифест для того, чтобы ссылаться на некоторые значки.

Сам файл манифеста формата json и объявляется следующей строкой:

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

Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса

RealFaviconGenerator

.

{
 "name": "My Application",
 "short_name": "App",
 "description": "Application OK",
 "lang": "ru-Ru",
 "start_url": "/",
 "scope": "/",
 "display": "standalone",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "icons": [
  {
   "src": "\/res\/img\/icons\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/res\/img\/icons\/android-icon -96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png"
  }
 ]
}
 
 

Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью

background_color

.

Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192×192.png, которая объявлена у вас в коде.

Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.

Иконка закладки в iOS (PWA)

iOS Safari ожидает увидеть

apple touch icon

. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание

apple touch icon

.

Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.

Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:

<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

В коде нужно добавить атрибут

rel=«apple-touch-icon»

и указать размер с помощью sizes.

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

apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.

При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.

Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.

macOS

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

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

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

В коде нужно добавить атрибут

rel=«mask-icon»

. Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте

color=»#e52037″

.

SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».

При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.

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

Windows

С Windows нужно немного запариться, чтобы сделать хорошо.

Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.

С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).

Пример добавление тегов метаданных в разметку веб-сайта для больших плиток:

<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">

Данной строкой мы указываем цвет фона плитки:

<meta name="msapplication-TileColor" content="#2b5797">

Можно указать имя вашего веб-сайта:

<meta name="application-name" content="My Application">

Что такое

browserconfig

? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.

Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:

<meta name="msapplication-config" content="…/browserconfig.xml">

Сам файл будет выглядеть следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="…/mstile-70x70.png"/>
            <square150x150logo src="…/mstile-150x150.png"/>
            <square310x310logo src="…/mstile-310x310.png"/>
            <wide310x150logo src="…/mstile-310x150.png"/>
            <TileColor>#ffc40d</TileColor>
        </tile>
    </msapplication>
</browserconfig>

В

browserconfig

файле определены изображения для различных размеров плитки.

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.

В следующем списке приведены некоторые рекомендации по использованию различных размеров:

• Small — 70×70 (Рекомендуемый размер: 128×128)
• Medium — 150×150 (Рекомендуемый размер: 270×270)
• Wide — 310×150 (Рекомендуемый размер: 558×270)
• Large — 310×310 (Рекомендуемый размер: 558×558)

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

mstile-70×70

. То же самое нужно проделать с остальными размерами.

Подготовка favicons

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

Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.

Заключение

Последовательность подключения в разметке веб-сайта:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">

<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">

С помощью последней строки кода «

theme-color

» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

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

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

Фавикон для сайта — ИТ Шеф

Статья, в которой рассмотрим, как сделать правильный favicon для сайта.

Фавикон (favicon) – это значок, который связан с определённым веб-сайтом или веб-страницей. Наличие фавиконки у сайта позволяет, как правило, сделать его более узнаваемым. Это связано с тем, что данный веб-сайт (каждая его страница) будет иметь значок, посмотрев на который пользователь будет знать, что это за ресурс. Иконку favicon сайта можно увидеть в различных элементах браузера, таких как вкладка, адресная строка, история посещений (журнал), панель закладок и др. Кроме этого иконку фавикон можно также обнаружить в результатах поиска Яндекс рядом с названием сайта. Ещё иконка favicon используется при размещении ссылки (на страницу сайта) на главном экране операционных систем iOS (Safari), Android (Chrome), Windows 8 и 10.

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

Процесс установки иконки favicon на сайт, как правило, начинается с её создания. Из-за того что требования к разрешению и формату иконки favicon на различных устройствах разные лучше её сначала подготовить в векторном формате svg (масштабируемой векторной графике). Это действие позволит, используя одно изображение (svg), получить в отличном качестве значок favicon как с разрешением 16×16 пикселей, так и с 512×512.

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

Главная страница сайта inkscape.org

Подготовка изображения для favicon

Рассмотрим основные действия по подготовке изображения в формате svg для favicon.

Изображение, которое будет использоваться в качестве иконки favicon сайта, можно нарисовать, или получить через поиск картинок сервиса Google или Yandex. Поиск изображения (значка) желательно осуществлять в формате svg. Но если найти подходящей иконки в формате svg не удаётся, то можно выбрать и другой формат (например, png или jpg). А потом в программе Inkscape с помощью специального инструмента перевести её в векторную графику (векторизовать растр).

Например, рассмотрим, как с помощью программы Inkscape можно подготовить изображение (иконку двери) в формате svg для фавикон.

1. Используя сервис «Google Картинки» находим подходящие изображение двери и сохраняем его на компьютер.Изображение двери, найденное через поиск «Google Картинки»
2. Открываем программу Inkscape и создаём в ней новый файл.
3. Устанавливаем странице любой размер в пикселях с одинаковыми значениями по ширине и высоте (например, 260×260).
4. Импортируем найденное изображение двери. Если картинка имеет растровый формат (png, jpg), то дополнительно выполняем её преобразование в вектор (правая кнопка мыши на изображении -> Векторизовать растр).Векторизованный растр двери
5. Размещаем изображение по центру области содержимого страницы (высоту изображения устанавливаем равной 260 пикселей с сохранением пропорций изображения). В горизонтальном направлении (если ширина изображения меньше 260 пикселей) выравниваем её по центру.Выравнивание изображения по центру содержимого страницы
6. Сохраняем файл (например, под именем door.svg).

Примеры, подготовленных изображений (красная стрелка, лампочка, бабочка, часы, сердце и книга) для фавикон (для скачивания — в контекстном меню картинки выбрать пункт «Сохранить картинку как…»):

Генерация иконки favicon для всех платформ

Генерацию иконки фавикон для всех платформ (iOS, Android, PC, MAC и др.) осуществим онлайн на сайте http://realfavicongenerator.net/.

Главная страница сайта realfavicongenerator.net

Для этого необходимо нажать на кнопку «Select your Favicon picture» и выбрать в диалоговом окне подготовленное изображение (door.svg).

После этого необходимо настроить цвета фона и ввести название приложения для операционной системы Android (Chrome).

Настройка фавиконки сайта для iOS (Safari)Настройка иконки favicon для Android (Chrome)Настройка фавиконки сайта для операционных систем Windows 8 и 10Настройка favicon для закреплённых вкладок браузера SafariНастройка параметров генерации favicon для сайта

После этого выбираем опцию «I will place …», которая говорит о том, что полученные файлы фавикон необходимо положить в корень сайта. Это действие обеспечит её поддержку в большинстве браузеров.

Далее нажимаем на кнопку «Generate your Favicons and HTML code».

После этого действия сервис realfavicongenerator.net осуществит генерацию иконки favicon и HTML-кода. Результат данной операции будет выведен на экран.

Основные шаги, которые необходимо выполнить для того чтобы установить favicon на сайт

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

После выполнения подготовительных операций приступим к подключению favicon на сайт. Все основные действия по добавлению иконки на веб-сайт приведены на странице «Install your favicon».

Основные шаги:

1. Скачивание сгенерированного пакета (favicons.zip).Содержимое пакета favicon (форматы png, svg, ico)
2. Распаковка его в корень сайта
3. Вставка HTML-кода представленного на странице в секцию head ваших страниц:

   <link rel="apple-touch-icon" href="/apple-touch-icon.png">
   <link rel="icon" type="image/png" href="/favicon-32x32.png">
   <link rel="icon" type="image/png" href="/favicon-16x16.png">
   <link rel="manifest" href="/manifest.json">
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
   <meta name="theme-color" content="#ffffff">

Например, на CMF MODX подключение favicon (HTML-кода) к страницам обычно осуществляется в чанке, с помощью которого выполняется формирование раздела head документа.

Проверка favicon у сайта

Проверка favicon сайта осуществляется с помощью ссылки, представленной в 4 пункте (check your favicon). Данное действие также можно осуществить через главное меню Favicon -> Favicon checker.

Чтобы приступить к валидации favicon сайта выбираем в представленной форме протокол сайта (http:// или https://), вводим доменное имя и нажимаем на кнопку «Check Favicon».

Валидация фавиконки сайта

После этого убеждаемся, что favicon сайта прошёл проверку на сервисе realfavicongenerator.net и корректно отображается на всех платформах.

Индексация фавикон сайта поисковыми системами

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

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

• Яндекс — https://favicon.yandex.net/favicon/имя_домена
• Google — https://www.google.com/s2/favicons?domain=имя_домена

Вместо имя_домена необходимо указать имя домена (например, itchief.ru).

Примечание: использование в качестве favicon анимированных изображений (gif) поддерживаются только некоторыми браузерами (Firefox). В других браузерах в качестве favicon будет использоваться статичное изображение.

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

Фавикон – английское слово favicon, переводится «значок для избранного» (сокращено от FAVorites ICON), логотип сайта и одна из главных частей веб-страницы, графическая картинка с форматами 16х16 или 32х32 пикселей (размер должен быть кратким восьми). Для фавикона используют формат 16х16, другие размеры не будут выдаваться браузерами. Отображается в верхней строчке браузера, вблизи с адресом сайта. Если иконку не установить или сделать его не правильно, то в окне браузера будет виден не логотип сайта, а иконка используемого браузера.

Зачем нужен favicon?

Этот рисунок нужен не для «украшения» браузера. Наличие или отсутствие faviconа на веб-странице, учитывается Яндрексом поведенческим фактором ранжирования. Все фавиконы показываются поисковыми системами, и сайт выглядит более привлекательно в посиковой выдаче.

Пример: На запрос пользователя, Яндрекс предложил две или более идентичных веб-страницы. У одного из них есть favicon, который привлек его больше, чем стандартный текст. Благодаря логотипу, он перешел на просмотр более понравившегося сайта. Если читатель добавит такой сайт в закладку, то фавиконка будет отображаться в полоске, соответственно человек не забудет про такую страницу и увеличится кликабельность.

Каким должен быть фавикон и где должен находиться?

Для хорошего сайта фавикон обязательно должен быть установлен в обязательном порядке. Он делается в формате ICO — это расширение поддерживается всеми браузерами. Картинку можете сделать самостоятельно, взяв за основу любую фотографию или изображение. Можно пользоваться графическим редактором, можно выбрать подходящий вариант на любом из множества онлайн-сервисов. А проще всего, выбрать уже готовый, набрав в поисковой строке «коллекция фавикон».

Обратите внимание: изображение должно быть названо favicon.ico. В коллекциях очень часто предлагают варианты с расширением gif, поэтому скачивайте картинку и обработайте ее в специальной программе Snagit – наведите курсор на изображение, нажмите правой кнопкой на мышь, откройте с помощью приложения Snagit и сохранить картинку как — выбирайте расширение ico.

Фавикон можно хранить в любой папке, но поисковые машины и браузеры, ищут эмблемы по этому адресу searchtimes.ru/favicon.ico, поэтому, чтобы логотип был всегда доступным, сохранять рекомендуется в корневой директории веб-страницы.

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

Добавить favicon на сайт можно 2-мя способами:
1. Сохраненную картинку с ico расширением и размером 16х16 пикселей, переназовите на favicon.ico.
2. Загрузите иконку в основную папку domains/ваш сайт/public_html/ или в панель управления хостингом.

На некоторых сайтах, для завершения установки фавикона, нужно вписать код html в файл заголовка (header.php), между тегамии.

<link rel="shortcut icon" href="ваш сайт/favicon.ico" type="image/x-icon" /> 
<link rel="icon" href="ваш сайт/favicon.ico" type="image/x-icon" />

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

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

Забрендируй это: 10+ лучших генераторов фавиконов

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

Одним из этих миниатюрных элементов является фавикон — такой маленький, но такой важный значок. Неудивительно, что это именно фавикон, который мы вспоминаем, когда думаем об определенном бренде. В конце концов, когда у нас открыто несколько вкладок или у нас есть определенная страница, отмеченная закладкой, именно благодаря этому маленькому изображению мы обнаруживаем то, что ищем, за секунды. Добавление значка на ваш сайт займёт всего пару минут, но сделает ваш сайт безупречным. Однако создание идеального значка на вашем компьютере может быть сложной задачей, особенно если вы не являетесь профессиональным графическим дизайнером. К счастью, всемогущий Интернет оказал нам большую помощь в этом вопросе: существует множество онлайн-генераторов значков, которые вы можете использовать, чтобы получить то, что вам нужно.

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

Это сайт, который предоставляет инструменты, необходимые для создания вашего favicon. Ондовольно простой и удобный, поэтому вы легко научитесь его использовать. Посетитель сайта будет иметь 4 вкладки для навигации, 3 из которых представляют разные пути для получения своего идеального значка. Первый вариант представляет собой настоящий генераторзначков, которыйпозволит вам создать свой фавикон с нуля.Вы можете выбрать текст, который хотите разместить на нем, затем размер шрифта, цвет и стиль и, наконец, цвет и форму фона. Если у вас уже есть изображение, логотип или значок для вашего бренда, и вы просто хотите преобразовать его в формат фавикона, вы можете сделать это, щелкнув вторую вкладку, которая приведет вас к онлайн-конвертеру. Наконец, третья вкладка позволит вам преобразовать смайлы в значки, если вам понадобится что-то в этом роде. В дополнение ко всему этому, если вы столкнетесь с какой-либо проблемой при создании или размещении своего значка на сайте, четвертая вкладка предоставит вам некоторые из руководств о том, как решить эти проблемы.

---

Этот генератор позволяет создавать значки для любого типа браузера, платформы или технологии. Все, что вам нужно сделать, это отправить изображение размером не меньше 70 × 70, дождаться, пока генератор сотворит чудеса, и готово — вы получите свой фавикон в считанные секунды. В дополнение к этому, Real Favicon Generatorпозволяет вам протестировать и получить предварительный просмотр того, как ваш значок отображается на разных платформах, с помощью опции проверки значков.

---

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

---

Этот красочный бесплатный веб-сайт предлагает вам возможность создать значок из загруженного изображения. Есть два типа форматов, в которых вы можете загрузить свой значок — .ico и .png формат. Кроме того, новинка, которую Favic-o-matic привносит по сравнению с другими генераторами значков, — это возможность получить все возможные размеры значков, которые могут вам понадобиться для разных систем и платформ. Помимо этого, вы также можете использовать специально разработанный favic-o-meter, чтобы проверить, как ваш значок будет выглядеть в разных браузерах и на разных устройствах. К сожалению, этот генератор не дает вам возможности создать свой значок прямо на сайте, но есть много других полезных вещей, которые восполняют этот недостаток.

---

Как следует из названия, этот генератор обладает расширенным набором функций. Он не только предоставляет вам потрясающие фавиконы, но и помогает создавать значки приложений различных типов. Говоря об иконках, вы можете создать совершенно новую самостоятельно или загрузить существующий файл в формате png, jpg или даже gif и преобразовать его в значок. Кроме того, если вы спешите и ищете готовый значок, вы можете просмотреть галерею, в которой собраны сотни значков, и найти свой идеальный вариант. Favicon & App Icon Generator также позаботился о том, чтобы вы не тратили слишком много времени на поиск того, что вам нужно, и оставил вам возможность фильтровать все выбранные значки в галерее по цвету или букве, которые они содержат.

---

Этот простой инструмент позволяет создавать уникальный значок или загружать файлы в формате png, jpeg, jpg и gif, размер которых не превышает 2 МБ. После того, как вы получили значок, который искали, вы можете загрузить его и просто добавить полученную часть кода в код вашего веб-сайта. Это так просто. В дополнение к этому, на главной странице Favicon Generator вы также найдете подробное объяснение того, как получить значки Retina, которые будут одинаково хорошо работать на различных системах и устройствах. Если у вас случайно возникнут дополнительные проблемы и вопросы, на которые вам нужны ответы, есть также раздел часто задаваемых вопросов, который может помочь вам решить их самостоятельно.

---

Это немного сложный генератор, в хорошем смысле. Этот современный сайт предлагает вам3 возможности создать идеальный значок, и все это совершенно бесплатно. Первый вариант, как и многие другие, позволяет вам самостоятельносоздать свой значок с помощью редактора,который поставляется с множеством полезных инструментов и разных цветов на ваш выбор. Второй способполучить идеальный фавикон — использовать генератор. Этот тип генератора, конечно, предназначен для значков, которые обычно содержат инициалы бренда, однако мы должны указать, что количество букв на значок ограничено двумя. После того, как вы выбрали буквы, вы можете изменить их цвет, стиль шрифта или дизайн всего фона. И последний вариант касается конвертера изображений, поэтому, если у вас уже есть логотип вашего бренда, вы просто хотите иметь меньший размер и формат .ico, все, что вам нужно сделать, это загрузить и преобразовать его. Все созданные вами значки, естественно, можно загрузить как в формате .png, так и в формате .ico, и, кроме того, вы можете получить их в 4 разных размерах (16 × 16, 32 × 32, 96 × 96, 256 × 256).

---

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

---

Если вы находитесь в самом начале создания своего бренда, это для вас. Logaster — это профессиональный онлайн-инструмент, основной задачей которого является предоставление клиентам всевозможных брендовых продуктов. Если вам нужно создать логотип, визитную карточку или даже подпись в электронной почте, в Logaster есть все. Конечно, фавиконы не исключение. Однако для того, чтобы получить фавикон, вам сначала нужно также создать на нем логотип. К сожалению, чтобы использовать все эти удобные функции, вам нужно выбрать платный пакет, а цены варьируются от 13,99 евро до 44,99 евро.

---

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

---

Самый простой генераторзначков,который найдете. Он генерирует значки, сенсорные значки Apple и HTML-заголовки для любого типа устройства или браузера. Все, что вам нужно сделать, это перетащить изображение, которое вы хотите превратить в один из этих значков, и готово!

---

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

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

Favicon — что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы иконок

Обновлено 24 января 2021

1. Что такое Фавикон и зачем он нужен для сайта
2. Как создать Favicon
3. Онлайн генераторы и галереи иконок
4. Как установить или поменять Favicon на сайте

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Разговор в сегодняшней статье пойдет о так называемых иконках Favicon.ico. Мы разберемся, что такое фавикон, почему в обязательном порядке его нужно устанавливать на своем сайте и как самому создать иконку нужного размера.

Чуть ранее я уже писал про то, где можно взять иконки для сайта и упомянутые там сервисы (в той статье) можно использовать для поиска подходящих вариантов Favicon.ico, но есть и специальные онлайн-генераторы (favicon generator), как отечественные, так и зарубежные, а также специализированные коллекции и галереи с подходящими по размеру фавиконами. Ну, и естественно мы поговорим о том, как настроить и подключить их к своему сайту.

Что такое Фавикон и зачем он нужен для сайта

По сути Favicon — это обычный значок (изображение небольшого размера 16 на 16 пикселей, иконка). Но для владельца сайта он может очень много значить. Однако, обо всем по порядку.

Само по себе название «фавикон» произошло от английского словосочетания FAVorites ICON, означающего — иконка для «Избранного» (так называются закладки в браузере Internet Explorer). Зачем она нужна? Очевидно, что так гораздо проще отыскивать взглядом нужную вам закладку, ибо легче искать знакомый значок, чем читать названия сайтов.

Раньше картинку Favicon вы могли видеть в адресной строке браузеров, перед URL-адресом открытой страницы (в моем IE9 так до сих пор и осталось), но после того, как все браузеры стали поддерживать вкладки, то данный значок мигрировал как раз на эти самые вкладки. Зато, когда их открыто очень много, именно фавиконы позволяют понять какая вкладка какому сайту соответствует:

Само собой, что и свое изначальное значение Favicon.ico не утратил, он по-прежнему используется в закладках всех браузеров для быстрого визуального поиска нужного сайта среди тысяч закладок (взгляните на верхнюю панель вашего обозревателя и убедитесь в этом).

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

У Яндекса имеется специальный бот для индексации фавиконов под названием YandexFavicons (у них даже апдейты бывают, после которых и имеет смысл проверять наличие нового и обновленного Favicon.ico рядом с вашим сайтом в выдаче), в задачу которого входит сбор и обновление иконок для всех сайтов. Робот Яндекса, специализирующийся на их индексации, посещает сайты с периодичностью от нескольких дней до одного месяца (апы, соответственно, очень редкие получаются).

Поэтому не стоит ждать того, что недавно созданный в online generator или сделанный самостоятельно фавикон сразу же появится в поисковой выдаче Яндекса рядом с описанием вашего ресурса. Должно будет пройти какое-то время. Яндекс, после того как найдет Favicon.ico у вас на сервере, преобразует ее в формат PNG (из графического формата ICO) и с этого момента фавикон вашего сайта будет доступен по адресу:

http://favicon.yandex.net/favicon/ktonanovenkogo.ru

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

Если у вашего проекта Favicon еще не настроен, то самое время задуматься о его создании и установке, т.к. это позволит вам привлекать большее количество посетителей с страниц Яндекса (из поисковой выдачи), ибо рядом с адресом вашего проекта будет красоваться эта иконка, побуждая пользователей выбрать вас, а не соседа по выдаче).

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

Важно, чтобы используемый вами фавикон привлекал внимание, ибо именно это может привести к существенному увеличению количества посетителей, пришедших к вам с поиска. Да и пользователи будут чаще находить ваш сайт среди множества открытых в браузере вкладок или среди сотен закладок.

В общем, выгода создания яркого и запоминающегося значка (мини-логотипа) для своего сайта очевидна (прежде всего это узнаваемость «бренда» и все хорошее, что из этого следует). Осталось только понять, как его создать и поставить на свой сайт, а также, что из себя должен представлять этот графический файл? На второй вопрос ответить проще — по определению Favicon должен быть сохранен в формате ICO, размещен в корне сайта (хотя, можно и другом месте), а его размер при этом должен составлять 16 на 16 пикселей.

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

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

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

Как создать Favicon онлайн и где можно скачать их коллекцию

Давайте я сначала приведу примеры сервисов (так называемых favicon generator), где можно не имея особых навыков сконструлить вполне себе достойный мини-логотип для своего сайта, ну, или хотя бы автоматом переделать подходящую картинку в формат, необходимый для загрузки фавикона на сайт.

1. Faviсon.cc — довольно-таки удобный онлайн-генератор фавиконов. Используя его вы можете, например, создать свою иконку с нуля (полный эксклюзив), нарисовав ее попиксельно. Для этого вам нужно будет нажать в левой части окна сервиса на кнопку «Create New Favcon».

   В центре страницы генератора расположена область, где каждый квадратик является пикселем вашей будущей фавиконки. Ваша задача состоит в закрашивании разными цветами этих квадратиков. Для закрашивания одного квадратика цветом нужно поставить галочку в правой части окна сервиса в поле «Color Picker», выбрать на расположенной там же палитре нужный цвет и щелкнуть по нужному квадратику. Для удаления неправильной закраски поставьте галочку в поле «transparent» и щелкните по квадратику, в результате чего он станет бесцветным (прозрачным).

   Для перемещения пикселя по холсту генератора вам нужно будет поставить галочку в поле «move». Результат своих трудов в реальном масштабе вы сможете наблюдать в области «Preview» под холстом. Если созданный вами Фавикон вам подходит, то нажмите на кнопку «Download» для его сохранения к себе на компьютер. В результате вы получите графический файл, который сможете затем скачать и загрузить на сервер хостинга.

   Теперь вы знаете как сделать мини-логотип для своего сайта с нуля. Но если вы графическими талантами не обладаете, то можете на сервис онлайн генератора загрузить любую картинку для будущего фавикона, которая будет служить болванкой. Картинка может быть абсолютно любого размера и формата. Для загрузки файла значка на онлайн сервис вам нужно будет нажать в левой части окна сервиса на кнопку «Import Image».

   В открывшемся окне, нажав на кнопку «Обзор», найдите на своем компьютере подходящее изображение. Затем выберите, что делать с соотношением сторон вашей картинки при преобразовании его в формат 16 на 16 (квадрат). Это актуально, если загружаемое вами изображение не квадратное. В этом случае возможны два варианта: оставить соотношение сторон неизменным (Keep dimensions), либо преобразовать картинку к квадратному виду (Shrink to square icon). Во втором случае изображение будущей фавиконки будет искажено по одной из осей.

   Для загрузки в online generator и преобразования вашей картинки нужно будет нажать на кнопку «Upload». Созданная из него Favicon.ico будет доступна к редактированию точно так же, как и нарисованная вами. Когда закончите колдовать над шедевром, то нажмите на кнопку «Download» для того, чтобы скачать его к себе на компьютер.

   На этом онлайн сервисе также имеется возможность использовать коллекции фавиконов, созданные другими его пользователями и выложенные в общий доступ. Для того, чтобы посмотреть имеющиеся в галереи экспонаты, вам нужно будет нажать в левой части окна либо на кнопку «Latest Favicons» для просмотра коллекций отсортированных по дате создания, либо на кнопку «Top Rated Favicons» для просмотра галерей отсортированных по рейтингу.
2. Favicon.ru — когда-то этот сервис был значительно проще описанного выше онлайн генератора, но последнее время он стал практически его аналогом, но только на русском языке. Favicon.ru позволяет не только преобразовывать любое имеющееся у вас изображение (на компьютере или в интернете) в формат ICO с размером 16 на 16 пикселей, но и дает возможность нарисовать его с нуля попиксельно.

   Этот вариант online favicon generator примечателен, пожалуй, только тем, что он отечественный. Поэтому он и попал в эту статью. Итак, для работы с ним вам нужно на главной странице вверху нажать на кнопку «Выберите файл» и указать путь до нужного изображения на вашем компьютере. Загруженное и преобразованное в формат Favicon.ico изображение можно будет подкорректировать, а затем сохранить к себе на компьютер. Все просто и удобно.

3. Logaster.ru — это онлайн генератор логотипов, но помимо логотипов он еще создает и фавикон. В отличии от всех других сервисов, вам не нужно рисовать дизайн фавикона или конвертировать ее с логотипа.
   Для того, чтобы создать фавикон, сначала необходимо ввести название сайта или компании и выбрать вид деятельности. Сервис предложит готовые к использованию несколько десятков шаблонов фавикона. Более подробно, как создать фавикон, можно прочитать здесь. После создания Favicon.ico, вы можете скачать файл к себе на компьютер в формате ICO или PNG.

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

Подборка онлайн генераторов, коллекции и галереи фавиконов

Если вам по каким-либо причинам не понравились описанные выше favicon generator, то могу предложить попытать счастье на одном из следующих бесплатных онлайн-сервисов:

1. FaviconGenerator — позволяет преобразовать в нужный формат фавикона любое загруженное с вашего компьютера изображение (загружать можно картинки в формате PNG, JPEG, JPG, GIF).
2. AntiFavicon — достаточно интересный Favicon Generator. На нем вы можете создать фавикон с надписью. Текст надписи вам нужно будет ввести в поля «Top text» и «Bottom tex», а цветовую гамму — настроить в области «Colors».
3. FavIcon from Pics — еще один простой онлайн сервис — указываете путь до картинки на своем компьютере, преобразуете и скачиваете результирующий файл в формате ICO и GIF.
4. DeGraeve — достаточно мощный Favicon Generator, по функционалу похож на рассмотренный ранее Faviсon.cc. Здесь тоже можно сделать все либо с нуля, либо загрузить изображение, которое в последствии можно подкорректировать и скачать уже в формате ICO подходящего размера.
5. Generator — позволяет как генерировать фавикон из загруженного изображения, так и создать ее с нуля в специальном редакторе.
6. Онлайн редактор иконок favicon.ico — ну, как бы, все при нем — и создание фавиконов с нуля, и доработка уже имеющегося изображения.
7. Online Favicon — очень функциональный инструмент для создания и редактирования мини-логотипов
8. Free Favicon Generator — на случай, если ничего из выше предложенного списка вас не устроит.
9. Фавикон-генератор — простенько и со вкусом…

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

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

Если у вас нет желания или возможности (вы не художник и ни когда им не были), то проще всего будет попробовать поискать в галереях с коллекциями бесплатных фавиконов:

1. Favicon.cc — 55 тысяч различных вариантов на все случаи жизни. Имеются также анимированные фавиконы, которые правда будут видны только в браузере FireFox

Если вы знаете еще какие-то подобные ресурсы, то я добавлю ваши ссылки в этот список.

Как установить Favicon на сайт и прописать путь до него

Ваш браузер и поисковый робот Яндекса будут искать фавикон прежде всего в корневой папке вашего сайта. Поэтому можно просто подключиться к сайту по FTP и загрузить в его корневую директорию (обычно это папки public_htm или htdocs) ваш файлик Favicon.ico (лучше его название писать с маленькой буквы). Откройте теперь ваш ресурс в каком-нибудь браузере и посмотрите, не поменялась ли пиктограмма на вкладке. Поменялась? Нет? Ну, ничего страшного.

Если поставить фавикон таким образом у вас не получилось, то возможно вам придется очистить кэш вашего браузера, т.к. часто бывает, что из кэша загружается старая версия. Можете попробовать открыть ваш сайт в FireFox, у меня он лучше всего реагирует на проводимые изменения без очистки кэша. Если дело не в кэше браузера, то это значит, что для вашего сайта задано другое место для favicon, отличное от корневой папки. Как это проверить?

Откройте исходный код любой страницы вашего сайта. Чтобы посмотреть ее исходный код, достаточно будет щелкнуть по странице правой кнопкой мыши и выбрать соответствующий пункт контекстного меню (например, «Исходный код» в старой Opera, либо «Исходный код страницы» в Мазила Фаерфокс, либо «Просмотр кода страницы» в Google Chrome, либо «Просмотр HTML-кода» в IE) или нажать сочетание клавиш Ctrl+U. Теперь поищите в верхней части кода страницы строку, задающую путь до favicon.ico.

Она может выглядеть примерно так:

<link rel="shortcut icon" type="image/ico" href="http:путь_до_вашей_иконки/favicon.ico" />

Также возможен и такой вариант задания служебной гиперссылки link:

<link rel="icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon">

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

В Joomla Favicon обычно живет в папке с используемым вами шаблоном (путь до нее в Joomla 1.5 прописывался в файле index.php из каталога этого же шаблона,а вот в Joomla 3 все стало несколько сложнее). Т.е. для смены фавикона в Джумле достаточно будет пройти по этому пути и залить туда свой файлик favicon.ico, а на вопрос о замене ответить утвердительно:

/templates/папка_с_используемым_шаблоном_оформления/favicon.ico

Файлик favicon в WordPress по умолчанию тоже может лежать в папке с используемой вами темой (там же и задается путь до него):

/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon.ico

В общем, если хотите задать или поменять путь до вашего фавикона, который бы поняли и браузеры, и поисковый робот Яндекса, то вам нужно будет прописать в соответствующем файле шаблона Joomla, WordPress или любого другого движка, между открывающим и закрывающим тегами HEAD, следующие строчки кода:

<link rel="shortcut icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon" />

В каком именно файле шаблона нужно прописать эти строки, зависит от движка вашего сайта. Например, в в WordPress вам нужно открыть на редактирование файл header.php из папки с используемой вами темой оформления: wp-content/themes/Папка_с_вашей_темой_оформления. Открываете header.php в редакторе и в самом его начале находите открывающий Html тег HEAD. В любом месте за ним, но до закрывающего HEAD прописываете одну из приведенных выше строчек кода с указанием пути до вашего графического файла мини-логотипа.

Как установить анимированный фавикон? В принципе, точно так же, как и обычный. Будет отличаться только код, вставляемый в шаблон вашего сайта, с помощью которого вы указываете браузерам и поисковому роботу Яндекса путь до нужного графического файла. Дело в том, что анимированный Favicon будет иметь расширение GIF, и, следовательно, в строках кода нужно будет прописать примерно так:

 <link rel="shortcut icon" href="/img/favicon.gif" type="image/gif" >
 <link rel="icon" href="/img/favicon.gif" type="image/gif" >

Вот и вся разница между анимированными favicon и обычными. Но следует учесть, что будет работать анимированная иконка только в FireFox, в остальных же браузерах она будет статичной. Яндекс же, при загрузке вашего анимированного фавикона, преобразует его в статичный формат PNG. Но, по-моему, овчинка выделки не стоит — устанавливать вместо обычного мини-логотипа для сайта анимированный не имеет особого смысла. Но это только мое ИМХО.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Фавикон (favicon) — иконка для сайта: инструкция

5. Как добавить favicon на сайт?

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

5.1 Загрузка в корневую папку сайта

Для отображения фавикона, поисковой робот Яндекса ищет необходимую картинку в корневой папке сайта. Поэтому чтобы добавить иконку на сайт, подключитесь по FTP к вашему сайту и загрузите файл с расширением .ico в корневую папку (public_html или htdocs). Предварительно назовите файл favicon.ico. Желательно, чтобы все буквы были в нижнем регистре. После этого браузер должен начать показывать выбранное вами изображение возле названия сайта. 

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

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

Как узнать путь до Favicon.ico на вашем сайте?

В коде страницы отыщите следующую строку, часть которой будет указывать путь к файлу. 

<lіnk rel="shortcut іcon" type="image/іco" hrеf="httр:путь_до_вашей_иконки/favicon.ico" />

Возможен и другой вариант написания ссылки: 

<lіnk rel="іcon" hrеf="http:путь_до_вашей_иконки/favicon.ico" tуpe="imagе/x-icon">

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

5.2 Добавить код ico в шапку сайта

Для того, чтобы красивые иконки для сайта отображались максимально качественно, они должны быть квадратной формы, а формат картинки должен быть с расширением jpg, bmp, gif или png. 

Сначала выбранное изображение нужно загрузить в каталог сайта с помощью файлового менеджера или FTP клиента. Если ваш хостинг расположен на базе Linux, используйте каталог public_html. Однако, каталог может отличаться в зависимости от хостинга или настроек сайта. 

Загрузите изображение в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP-клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов или в связи с вашими собственными настройками. 

Для отображения фавикона в шапке сайта, пропишите следующую строку между тегами <head> и </head> в коде сайта:

<lіnk rеl="shortсut іcon" type="іmage/png" hrеf="/favicon.png"/>

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

5.3 Как разместить фавикон на WordPress?

Метод 1. Воспользоваться панелью управления WordPress

С версией WordPress 4.3 и выше, используйте панель управления администратора для добавления фавикона. Зайдя в панель управления, откройте пункт меню “Внешний вид” и затем выберите раздел “Настроить”. В появившемся окне выберите “Свойства сайта”, “Выбрать изображение” и загрузите файл с иконкой, которая и станет новым фавиконом.

После этого сохраните изменения и откройте сайт для проверки отображения фавикона.

Метод 2. С помощью плагина All In One Favicon

Для установки плагина откройте раздел меню “Плагины”, выберите функцию “Добавить новый” и установите All In One Favicon. 

Как только установите плагин, откройте Настройки и выберите плагин All in one Favicon. В строках ICO Frontend и ICO Backend загрузите картинку будущего фавикона и сохраните изменения. Готово. Фавикон установлен. 

Быстрый совет: добавление значка на ваш веб-сайт

Натан Ролер

Что такое Favicon?

Значок . — это маленький значок, который браузеры отображают рядом с заголовком страницы на вкладке браузера или в адресной строке рядом с ее URL-адресом. Он также используется, когда вы добавляете страницу в закладки. Вот несколько примеров:

Вот пример меню закладок:

Но это еще не все. Некоторые веб-сервисы и поисковые системы (например, DuckDuckGo) даже используют значок:

Есть ли у вашего сайта фавикон?

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

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

Favicons добавляют дополнительный блеск, который ценят посетители (и клиенты).

Технические подробности

Размер

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

Что показывать

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

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

Формат изображения

Как следует из названия, значки должны использовать формат файла значков ( .ico ).Раньше конвертировать в этот формат было сложно. Однако благодаря простым бесплатным услугам это уже не так. Все, что вам нужно сделать, это создать изображение 16×16. Формат .ico поддерживает прозрачность, поэтому вы не ограничены созданием квадратного значка. Если вы хотите воспользоваться преимуществами прозрачности, используйте при создании изображения формат .gif или .png.

Когда у вас будет изображение 16×16, воспользуйтесь бесплатным сервисом, например favicon.cc, чтобы преобразовать его. Используйте опцию «Импортировать изображение», чтобы загрузить исходное изображение:

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

Сохраните файл на своем сайте (подробнее об этом ниже).

Куда он идет

Первоначально значки должны были называться точно favicon.ico и размещаться в корне вашего домена (например, http://www.yourdomain.com/favicon.ico ). Это означало, что у вас может быть только один значок на домен, точка. Однако по мере того, как значки стали стандартизированы, появилась большая гибкость. Сейчас есть два подхода:

Один значок для всего домена

Если вам нужен только один значок для всего домена, просто сохраните значок .ico в корневую папку вашего сайта. После загрузки он должен быть доступен по адресу http://www.yourdomain.com/favicon.ico . Как только вы загрузите файл, ваш браузер должен начать отображать значок для всех страниц вашего сайта. Если нет, очистите кеш браузера и перезагрузите страницу.

Фавиконы для отдельных страниц

Если вам нужен больший контроль (и чтобы быть немного более совместимым со стандартами), вы можете указать значки для каждой страницы. Чтобы использовать этот подход, сохраните .ico в любом месте вашего сайта, например в папке изображений / . Затем добавьте на свою страницу следующий код:

Обновите выделенный путь для ссылки на новый файл значка. Обратите внимание, что мы используем путь относительно сайта (начиная с косой черты), поэтому ссылка будет действительной независимо от пути к текущей странице.

При использовании этого подхода вы все равно захотите загрузить резервный значок на http: // www.yourdomain.com/favicon.ico для ситуаций, когда кто-то просматривает или добавляет в закладки не-HTML-контент (например, PDF-файл).

Давайте рассмотрим: как это сделать, простой способ

1. Создайте изображение 16×16. Если вам нужна прозрачность, используйте формат PNG или GIF.
2. Преобразуйте изображение в формат .ico с помощью бесплатного сервиса, такого как favicon.cc.
3. Загрузите новый значок на http://www.yourdomain.com/favicon.ico . Для более точного управления используйте приведенный выше код, чтобы указать значки для каждой страницы.

Заключение

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

Я надеюсь, что это руководство устранило тайну этих маленьких значков и дало вам возможность добавлять их на свои сайты!

Есть мысли или комментарии? Вы видели юмористический или креативный значок во время просмотра веб-страниц? Пожалуйста, поделитесь в комментариях!

Спасибо Дайан Д.за предложение этой статьи — она ​​получила подарочный сертификат Amazon на 15 долларов в качестве приза.

Как легко отображать свой значок фавикона в результатах поиска (2021)

Как отобразить ваш значок в результатах поиска — В этой статье я покажу вам, как отображать ваш значок в результатах поиска.

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

Предлагаемое мной решение было протестировано на веб-сайте WordPress, но оно применимо практически к любому веб-сайту.

Если у вас возникла та же проблема и вам нужна помощь, обязательно посетите наши службы поддержки через Интернет.

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

Это определение «значка», которое вы можете найти в Википедии (источник: wikipedia.org):

Фавикон (; сокращение от избранного значка), также известный как значок ярлыка, значок веб-сайта, значок вкладки, значок URL-адреса или значок закладки, представляет собой файл, содержащий один или несколько небольших значков, связанных с определенным веб-сайтом или веб-страницей. . Браузеры, поддерживающие фавикон, обычно отображают фавикон страницы в адресной строке браузера (иногда также в истории) и рядом с названием страницы в списке закладок.

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

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

Его используют большинство компаний и брендов.

По мнению некоторых, верно обратное, если вы не показываете значок (источник: quora.com):

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

Влияет ли фавикон на SEO?

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

Google уже много лет подчеркивает важность работы со страницами, а в последнее время представила Core Web Vitals.

Если вы хотите узнать об этом больше, обязательно прочтите мою статью о Core Web Vitals и часто задаваемых вопросах по Page Experience.

Как проверить, есть ли на моем веб-сайте значок Favicon?

Помимо простого просмотра вкладки браузера и проверки, отображается ли ваш значок, вы можете использовать инструмент тестирования значков с помощью SEO Site Checkup.

Как отобразить свой значок в результатах поиска

Для отображения вашего значка в результатах поиска вы должны добавить следующий тег в свой заголовочный файл:

Где «/path/to/favicon.ico» нужно заменить на URL вашего значка.

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

• Как файл значка, так и домашняя страница должны быть доступны для сканирования
• Ваш значок должен быть визуальным представлением бренда вашего сайта,
• Ваш значок должен быть кратным квадрату 48 пикселей, например: 48x48px, 96x96px, 144x144px и т. Д.
• URL значка должен быть стабильным (не меняйте его часто)
• Google не будет показывать какие-либо значки, которые он считает неприемлемыми, включая порнографию или символы ненависти.

Обратите внимание, что это не гарантия того, что ваш значок будет отображаться в результатах поиска.Снова Google:

Вы должны следовать этим правилам, чтобы иметь право на значок значка рядом с результатами поиска. Обратите внимание, что наличие значка в результатах поиска не гарантируется, даже если соблюдены все правила.

Источники

https://en.wikipedia.org/wiki/Favicon
https://www.quora.com/Does-having-a-favicon-for-your-website-affect-SEO
https://support.google .com / webmasters / answer / 92

? hl = en
https://stories.freepik.com/illustration/about-us-page/rafiki

.

Что, зачем и как создавать фавикон для вашего веб-сайта

В любое время дня у меня открыто около 20 вкладок в Chrome.Что помогает мне отслеживать, какие вкладки представляют собой маленькие значки, показанные ниже.

Я знаю, что мои Документы Google — это вкладки с синим блокнотом. Моя доска Trello — это вкладка с мини-доской Trello. Блоги HubSpot, на которые я ссылаюсь, — это вкладки со звездочками и так далее.

Эти значки известны как значки. Они не только могут помочь улучшить вашу видимость в браузере, полном открытых вкладок, но и укрепить узнаваемость вашего бренда.

Давайте подробнее рассмотрим, какие значки расположены ниже.Затем мы рассмотрим, как создать его с помощью генератора значков и добавить на свой сайт с помощью HTML.

Что такое значок?

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

У Google один из самых узнаваемых значков. Вы можете увидеть разноцветную букву G в адресной строке моего браузера ниже.

Вы также можете увидеть значки Gmail, Google Таблиц, Wiki HubSpot, Редактора Хемингуэя и других в моем списке закладок.

Favicons теперь даже появляются в результатах мобильного поиска в Google. Вы можете увидеть результаты моего последнего поиска — «как часто следует поливать суккуленты» — ниже.

Почему значки значков имеют значение?

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

Обратите внимание в мобильной поисковой выдаче, что на веб-сайтах Joy Us Garden и Easy to Grow Bulbs есть значки цветов, а на сайте The Succulent Source — серый земной шар.Это не имеет особого смысла для сайта о суккулентах, не так ли? Это потому, что глобус — это значок по умолчанию, который Google Chrome устанавливает для веб-сайтов, для которых нет настраиваемого значка.

Если я быстро просматриваю страницу результатов, я, вероятно, решу изучить Joy Us Garden и Easy to Grow Bulbs вместо The Succulent Source по нескольким причинам. Они не только появляются первыми в поисковой выдаче, но и их значки, URL-адреса, заголовки страниц и мета-описания указывают на то, что они являются веб-сайтами, посвященными всем растениям и имеющими ответ на мой вопрос.

Теперь изобразите эти три веб-сайта во вкладках браузера на рабочем столе. Было бы намного проще запомнить пользовательские значки Joy Us Garden и Easy to Grow Bulbs , чем значок по умолчанию для The Succulent Source . В море открытых вкладок я с большей вероятностью вернусь к вкладкам с настраиваемыми значками и проведу на этих сайтах больше времени.

Наконец, допустим, я нажимаю на каждый из этих сайтов. При посещении Joy Us Garden и Easy to Grow Bulbs я сразу замечаю, что пользовательские значки создаются на основе логотипов веб-сайта.Цветной логотип последнего показан ниже. Вы узнаете тюльпан как их значок.

Это помогает укрепить идентичность их бренда и сделать их сайт более запоминающимся. С другой стороны, при посещении The Succulent Source я впервые увижу их логотип. Они могли бы улучшить последовательность своего бренда, сопоставив свой логотип и значок.

Какой размер у фавикона?

Оптимальный размер значков — 16×16 пикселей.Так они отображаются на вкладках браузера, адресных строках и списках закладок. Однако в идеале вы должны создать свой значок в нескольких размерах. Таким образом, вы будете видеть правильно масштабированные версии на больших экранах, а не растянутую версию 16×16.

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

• 16×16 : размер значков браузера.
• 32×32 : размер значков ярлыков на панели задач.
• 96×96 : размер значков ярлыков на рабочем столе.
• 180×180 : размер значков Apple Touch.
• 300×300 : размер, требуемый Squarespace.
• 512×512 : размер, требуемый WordPress.

Теперь, когда мы понимаем, что такое значок, его назначение и размер, давайте посмотрим, как его создать.

Как сделать фавикон

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

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

Когда вы будете довольны своим логотипом, вы можете приступить к созданию своего значка. К сожалению, это не так просто, как сжать ваш логотип в квадрат 16×16 и прекратить работу. Например, на вашем логотипе может быть текст, который не будет разборчивым при уменьшении.

Вот почему вы хотите взять наиболее узнаваемую часть своего логотипа и сделать ее своим значком. Easy to Grow Bulbs сделал именно это, взяв тюльпан из своего логотипа и сделав его своим любимым значком.

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

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

Генераторы Favicon

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

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

Фавикон

Создать фавикон в Favikon очень просто. Вы просто загружаете изображение, обрезаете его, а затем загружаете получившийся значок в формате ICO или PNG. Ниже я загрузил значок ламы из The Noun Project .

Обратной стороной является то, что Favikon поддерживает только один размер: 16×16 пикселей. Чтобы узнать больше о размерах, воспользуйтесь инструментами ниже.

Favicon.io

С Favicon.io вы можете создать значок с нуля или из изображения, логотипа или эмодзи. Перед загрузкой вы можете просмотреть его в трех разных размерах.

Вы можете скачать результат в форматах ICO и PNG и в нескольких размерах. Возможные варианты перечислены ниже:

• android-chrome-192×192.png
• android-chrome-512×512.png
• apple-touch-icon.png
• favicon-16×16.png
• favicon-32×32.png
• Favicon.ico

Favicon.ico и генератор значков приложений

С помощью этого бесплатного инструмента вы можете загрузить изображение PNG или JPG и преобразовать его в форматы ICO и PNG еще большего размера.

Варианты загрузки перечислены ниже:

• apple-icon-57×57.png
• apple-icon-60×60.png
• яблоко-значок-72×72.pnf
• apple-icon-76×76.png
• apple-icon-114×114.png
• apple-icon-120×120.png
• apple-icon-144×144.png
• яблоко-значок-152×152.PNG
• apple-icon-180×180.png
• android-icon-192×192.png
• favicon-32×32.png
• favicon-96×96.png
• favicon-16×16.png

Создав значок в желаемом формате, вы сохраните его в корневом каталоге своего сайта. Затем вы можете создать ссылку на файл в формате HTML, чтобы разместить значок на своем сайте.

Прежде чем мы рассмотрим этот процесс ниже, важно отметить, что это относится к владельцам сайтов, которые создали свой сайт с нуля или с помощью фреймворка разработки, такого как Bootstrap CSS.Если вы использовали конструктор веб-сайтов или CMS, такие как WordPress или альтернативы WordPress, то процесс будет немного отличаться.

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

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

Допустим, вы сохранили свой файл PNG как «favicon.ico». Затем вы должны добавить следующий фрагмент кода в любое место между тегами:

Обратите внимание: : Ваш значок не обязательно должен быть помещен в корневой каталог вашего сайта — это обычно бывает. Если вы сохранили его в другом месте, просто убедитесь, что атрибут href указан правильно. Поэтому, если вы сохранили его во вложенной папке с именем «images», вы должны ввести .

Теперь предположим, что вы создали несколько размеров значков. Вы можете загрузить их все на свой сайт, добавив строку кода для каждого размера в раздел вашего HTML-файла.Если вы создали, например, версию 16 x 16, 32 x 32, 48 x 48 и 180 x 180, вы должны добавить следующий фрагмент кода:

Создание вашего Favicon

Фавиконы — важный элемент веб-дизайна.Они могут улучшить впечатления посетителей, укрепить ваш бренд и сделать ваш сайт более авторитетным. Не упустите их из виду, особенно если их легко создать и добавить на свой сайт. Вам просто нужен бесплатный генератор значков и некоторое знакомство с HTML.

Что такое фавикон, зачем он нужен вашему сайту и как его создать

31 января 2020 г. | Читать 12 мин.

Значок — это маленькое квадратное изображение, которое представляет веб-сайт в веб-браузерах.Если вы прямо сейчас посмотрите на адресную строку своего браузера, я уверен, что вы увидите несколько значков, в том числе значок SE Ranking. Как правило, значки значков содержат логотип, первую букву названия компании или просто изображение, которое отражает специфику веб-сайта, который он представляет.

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

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

От Internet Explorer к поисковой выдаче Google

Еще в 1999 году в Internet Explorer был введен значок «favicon» как способ помочь поисковикам отличить отмеченные закладки веб-страницы от других.А поскольку страницы с закладками назывались (и, вероятно, до сих пор) называются «Избранное» в Internet Explorer, слова «избранное» и «значок» были объединены вместе, чтобы создать новый термин.

1. В настоящее время значки отображаются прямо над адресной строкой независимо от того, добавлен ли веб-сайт в закладки или нет. И в случае небольшой вероятности, что на веб-сайте нет значка, браузер будет отображать общий символ браузера.

2. Помимо адресной строки, значки значков можно также найти в истории браузера.

3. Страницы, отмеченные закладками, также будут иметь значок, как на панели закладок…

4.… так и в разделе «Другие закладки».

5. С мая 2019 года Google использует значки в мобильной поисковой выдаче, плюс в начале 2020 года поисковая выдача для настольных компьютеров также получила новый вид.

Фавиконы привлекают внимание пользователей и повышают узнаваемость бренда. Если пользователи посетят веб-сайт с запоминающимся значком пару раз, они легко смогут отличить его от других в будущем. Подумайте об известном бренде, с которым вы взаимодействуете ежедневно — например, Facebook или Twitter — вы должны легко представить себе его значок с закрытыми глазами.

Иконки Facebook и Twitter выглядят точно так же, как их соответствующие логотипы. Итак, означает ли это, что все, что вам нужно для фавикона, — это минимизировать изображение логотипа и загрузить его на свой веб-сайт? Давайте углубимся во все технические детали и поговорим о том, что нужно для создания значка.

Соответствие техническим требованиям

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

Но с чего начать? Начните с выбора правильного формата и размера значка.

Формат Favicon

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

Раньше Internet Explorer поддерживал только этот формат файла, но современные веб-браузеры позволяют использовать значки PNG, а некоторые браузеры даже поддерживают значки GIF, JPEG и SVG.Единственным исключением являются более ранние версии Internet Explorer, такие как 10 и ниже — они совместимы только с файлами ICO.

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

Фавиконы в форматах файлов SVG, GIF и JPEG не так хороши с точки зрения совместимости с браузерами.Однако это может измениться в будущем. Формат SVG (масштабируемые векторные изображения) может стать новой нормой, поскольку его использование решит проблему создания нескольких значков разных размеров для обслуживания всех популярных устройств. Таким образом, хотя в настоящее время лишь несколько браузеров поддерживают значки SVG, другие вполне могут наверстать упущенное в ближайшее время.

Чтобы узнать, какие форматы значков поддерживаются разными браузерами, посетите веб-сайт «Могу ли я использовать». Здесь вы можете увидеть, например, какие версии браузеров совместимы с иконками PNG и SVG.

Размер фавикона

Классический фавикон имеет размер всего 16х16 пикселей. Некоторые старые браузеры по-прежнему используют крошечные квадраты, но если вы хотите, чтобы ваш значок хорошо смотрелся на современных устройствах, вам также придется создавать варианты значка с более высоким разрешением. В зависимости от типа ОС вам могут потребоваться следующие размеры:

Итак, какой размер значка предпочтительнее? Google рекомендует использовать максимально возможное разрешение 192 × 192. Недавно некоторые веб-мастера получили письмо от Google, в котором им предлагалось использовать значки с высоким разрешением, чтобы получать больше кликов.На данный момент Google просто растягивает существующие значки с низким разрешением, когда требуется больший размер, например, для домашнего экрана Android. В результате все изображения выглядят размытыми и мешают пользователю.

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

• Используйте квадратный значок.
• Favicon должен представлять только ваш бренд и не содержать неприемлемых символов (например, свастики) — иначе Google не покажет его и вместо этого будет использовать общий символ favicon.
• Файл Favicon должен быть доступен для поисковых роботов Google.

Теперь, когда атрибут размера был введен в HTML5, вы также можете легко указать несколько размеров одного и того же значка. Атрибут позволяет установить ширину и высоту значка, а также указать несколько значений, разделенных пробелом:

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

Обращение к Интернету за помощью в создании значка

Если у вас когда-нибудь возникнет идея просто изменить имя файла логотипа на favicon.ico, забудьте об этом, потому что он так не работает. Скорее всего, вы столкнетесь с множеством ошибок, когда дело доходит до отображения вашего значка в разных браузерах.

Можно ли этого избежать?

Конечно.На самом деле существует несколько способов создания фавикона веб-сайта, например:

1) Создайте его в графическом редакторе, таком как Photoshop, используя специальный плагин Favicon.ico.

2) Оформите его в специальных онлайн-сервисах (например, Katvin или favicon.cc), а затем загрузите оттуда в подходящем формате.

3) Используйте существующее изображение, например, вашего логотипа, и загрузите его в онлайн-генератор значков, такой как Favicon.io, Realfavicongenerator.net и т. Д.

4) Загрузите готовые значки из специальных баз данных, таких как Findicons с более чем 500 тысячами вариантов на выбор и IconJ с более чем 18 тысячами значков.

После загрузки сгенерированного значка остается только добавить его на свой сайт.

Украшение вашего сайта значком

Сначала загрузите свой значок в корневой каталог сайта с помощью файлового менеджера, такого как Filezilla. Затем все, что вам нужно сделать, это вставить следующий фрагмент кода в метатег:

   

  ... 

   

   

  ... 

    

Хорошо, теперь, когда мы выяснили все основные технические аспекты фавиконов, давайте перейдем к тому, что считается подходящим в дизайне фавиконов, а что следует полностью стереть из вашей памяти.

Простой не значит хуже в дизайне значка

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

И пока вы будете это делать, задайте себе следующие вопросы:

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

Может ли анимированный значок в формате GIF помочь вам отличаться от других? Или это будет просто бельмом на глазу для поисковиков, создающим эффект, который (скорее всего) создаст впечатление, будто ваш веб-сайт не завершил загрузку.

Вы четко понимаете свой значок, когда он имеет размер 16 × 16 пикселей? Сделайте все возможное, чтобы в вашем фавиконе не было мелких деталей, и не пытайтесь включить в него все мыслимые цвета.

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

Имейте в виду, что отличный значок всегда будет четким , простым и запоминающимся .

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

Проверка вашего значка на наличие критических ошибок

Просто погуглите свой веб-сайт, чтобы быстро проверить, как ваш значок отображается в поиске, или вы можете использовать этот пример ссылки, чтобы вывести только значок вашего сайта:

• http: // www .google.com/s2/favicons?domain=mysite.com

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

Однако, если ваш значок не отображается правильно или вообще не отображается в Google по какой-либо причине, начните с проверки следующих вещей:

1. Находится ли графическое изображение в корневой папке ресурса в файле ICO, PNG или GIF. формат?
2. Правильно ли написан код, ведущий к изображению на страницах ресурса?
3. Является ли значок понятным и уникальным?
4. Доступен ли файл значка для поисковых роботов?

Хочу отметить, что путь к изображению напрямую влияет на то, насколько хорошо отображается значок.Если вы хотите каким-либо образом удалить или отредактировать свой значок, все, что вам нужно сделать, это удалить или изменить файл favicon.ico (JPEG, GIF, PNG).

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

Почему нельзя обойтись без фавикона

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

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

Если вы уверены, что у вас есть значок, но наш аудит веб-сайта его не видит, значит, возникла проблема с индексированием или адрес значка веб-сайта неверен. Просмотрите все еще раз, чтобы убедиться.

Знаете, как говорят, что дьявол кроется в деталях? Что ж, ваш значок — это очень маленькая деталь, которая может повлиять на восприятие вашего сайта и бренда общественностью, их узнаваемость и даже объем трафика, который он получает от поиска, поэтому не стоит недооценивать ее.

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

Просмотры сообщений: 7 184

Эндрю — контент-маркетолог, писатель, редактор и ведущий вебинаров в SE Ranking, а также приглашенный участник в различных маркетинговых СМИ. Он увлечен контентом, маркетингом, социальными сетями и передовыми методами SEO и использует свой опыт, чтобы помочь компаниям более эффективно охватить свою глобальную аудиторию.Когда он не пишет о SEO и маркетинге, он может проводить время со своей кошкой, наслаждается видеоигрой, слишком много смотрит футбол или играет на гитаре (именно в таком порядке).

Как сделать значок Favicon маленьким и кэшируемым

Брайан Джексон

Обновлено 4 марта 2019 г.

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

Что такое значок?

Значок favicon или favicon.ico — это небольшой файл значка изображения, связанный с вашим веб-сайтом. Когда браузер попадает на ваш веб-сайт, он в фоновом режиме выполняет тихий поиск вашего значка.ico (примечание: вы можете не увидеть этого в некоторых инструментах тестирования скорости веб-сайта. WebPageTest действительно показывает favicon.co в своем каскадном анализе). Затем он отображается в различных местах, таких как вкладки в вашем браузере, а также на панели закладок. Обычно favicon.ico хранится в корне вашего веб-сайта.

Однако это больше не ограничивается значками веб-браузера для настольных компьютеров. Теперь у нас есть устройства iOS, устройства Android, устройства Windows 10, и все они имеют свои собственные размеры и типы файлов, которые они поддерживают для связывания значка.Устройства iOS используют сенсорный значок Apple с высоким разрешением для иллюстрации закладок и ярлыков на главном экране. IPhone требуется изображение 57×57, тогда как новый iPad с экраном Retina ищет изображение 152×152. Android Chrome также использует эти изображения, если находит их. А Windows 10 идет другим путем с выделенным набором значков и деклараций HTML.

Вам нужен фавикон? Ответ положительный. Каждый веб-сайт должен иметь связанный с ним значок. Поскольку браузер запрашивает этот файл, вы увидите ошибку 404, если ее нет.Поскольку favicon.ico находится в корне сервера, каждый раз, когда браузер запрашивает этот файл, отправляются файлы cookie для корня сервера. Уменьшение размера значка и уменьшение размера файлов cookie для корневых файлов cookie сервера повышает производительность при извлечении значка.

Как создать значок

Значок на самом деле может быть файлом PNG, GIF или ICO. Однако файлы ICO обычно используются чаще, чем другие, поскольку размер файла меньше и поддерживается во всех основных браузерах. PNG чаще всего используются на устройствах с iOS, Android и Windows 10.Сегодня мы сосредоточимся в первую очередь на создании favicon.ico для вашего веб-сайта.

Шаг 1

Значок обычно должен иметь размер 16×16 пикселей или 32×32 пикселя. И также рекомендуется держать его меньше 1 КБ или как можно меньше. Вы можете создать свой значок в любой программе, какой захотите, будь то Photoshop, Illustrator, Gimp, Paint или Sketch. Просто сохраните файл или переименуйте его в файл ICO, когда закончите. Он должен называться favicon.ico. (Подсказка: лучшая стратегия для сохранения небольшого размера — использовать векторы при работе с вашим логотипом / значком, прежде чем сохранять его.)

Вы также можете использовать онлайн-инструмент, такой как настоящий генератор значков, в котором вы можете загрузить PNG, JPG или SVG (векторный тип файла), и он сгенерирует для вас файлы ICO. Инструмент также имеет несколько отличных генераторов для встраивания ваших иконок в статические сайты и проекты, такие как:

Step 2

Затем вам нужно загрузить его на свой сайт. Просто загрузите его через FTP в корневой каталог вашего веб-сайта, и веб-браузеры, поддерживающие значки, найдут его. Если вам нужно или вы хотите поместить свой значок в другой каталог, вы можете просто добавить следующее в раздел вашего веб-сайта с указанием пути к нему.Например, приведенный ниже фрагмент будет, если у вас есть значок в папке с именем images.

Favicon в WordPress

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

Фавикон в Joomla

Если вы работаете на Joomla, вы должны загрузить фавикон.ico в каталог / joomla / templates / <ваш шаблон> . Обязательно ознакомьтесь с официальной документацией Joomla Favicon.

Favicon в Drupal

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

1. Перейдите на страницу admin / build / themes / settings / THEME или на страницу Drupal 7 admin / appearance / settings / THEME в области администрирования сайта (замените THEME названием вашей темы по умолчанию).
2. Выберите файл favicon.ico в разделе «Настройки значка ярлыка» на странице конфигурации темы и загрузите файл. (Можно указать путь для сохранения значка в папке темы).

Оптимизируйте свой значок

Оптимизируйте значок, сделав его кешируемым, чтобы избежать частых запросов на него. Поэтому важно использовать кеширование браузера, добавляя заголовки с истекающим сроком действия и используя управление кешем. Еще одна рекомендация — загрузить свой значок с вашего CDN.YSlow также рекомендует стараться, чтобы размер вашего значка не превышал 1 КБ. Во всяком случае, просто постарайтесь, чтобы ваша иконка была как можно меньше. Ниже вы можете увидеть, что наш значок на нашем тестовом сайте находится прямо под отметкой 1 КБ на 925 байтах.

Добавить Истекает срок действия заголовков в Apache, добавляя его в файл .htaccess . Обратите внимание на строку с изображением / значком x .

  ## СРОК КЭШЕНИЯ ##

    ExpiresActive On
    ExpiresByType image / jpg «доступ на 1 год»
    ExpiresByType image / jpeg "доступ на 1 год"
    ExpiresByType image / gif "доступ на 1 год"
    ExpiresByType image / png "доступ на 1 год"
    ExpiresByType text / css "доступ на 1 месяц"
    ExpiresByType text / html "доступ на 1 месяц"
    Приложение ExpiresByType / pdf "доступ на 1 месяц"
    ExpiresByType text / x-javascript "доступ на 1 месяц"
    Приложение ExpiresByType / x-shockwave-flash "доступ 1 месяц"
    ExpiresByType изображение / значок x "доступ на 1 год"
    ExpiresDefault "доступ 1 месяц"

## СРОК КЭШИНГА ##
  

Добавить Истекает срок действия заголовков в Nginx, добавив в конфигурацию вашего сервера.Обратите внимание, что включен тип файлов ico .

  сервер {
    слушать 80;
    имя_сервера example.com;

    расположение / {
        корень / var / www / example;
        index index.html index.htm;
    }

    расположение ~ * \. (jpg | jpeg | gif | ico | png) $ {
        истекает 365 дней;
    }

    расположение ~ * \. (pdf | css | html | js | swf) $ {
        истекает 30 дней;
    }
}
  

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

Cache-Control

Вы также можете использовать Cache-Control . Следующий фрагмент может быть добавлен к вашему файлу .htaccess в Apache, чтобы указать серверу установить заголовок Cache-Control max-age на 84600 секунд и на общедоступный для перечисленных файлов. Обратите внимание, что включен тип файлов ico .

  
    Заголовочный набор Cache-Control "max-age = 84600, public"

  

Этот следующий фрагмент можно добавить в файл конфигурации Nginx.В приведенном ниже примере используются директивы заголовка Cache-Control public и no-transform с настройкой срока действия, установленным на 7 дней. Обратите внимание, что включен тип файлов ico .

  расположение ~ * \. (Js | css | png | jpg | jpeg | gif | ico) $ {
    истекает 7 дней;
    add_header Cache-Control «общедоступный, без преобразования»;
}
  

Прочтите наш более подробный пост о том, как использовать Cache-Control .

Загрузите свой значок с CDN.

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

Чтобы загрузить значок с вашего CDN, вы можете просто обновить фрагмент в заголовке. Ниже приведен пример на нашем тестовом сайте. Мы указываем на наш значок, который находится на нашем CDN. Сделав это, вы также можете воспользоваться преимуществом Cache-Control и истекает срок действия заголовков на пограничных серверах CDN, и вам не нужно беспокоиться о них на исходном сервере.

А вот пример того, что мы запускаем на сайте KeyCDN, с парой вариантов значков и значка касания яблока.

Если вы работаете на WordPress, вы можете автоматически скопировать его в свою зону извлечения с помощью нашего бесплатного плагина WordPress CDN Enabler.

Сводка

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

Есть еще какие-нибудь полезные уловки или отсылки к фавиконам? Если да, не стесняйтесь делиться ими ниже.

Индекс /favicon.ico/cs/groups/ess_webasset/plcc/@paypalcredit/en/images/

 Имя Последнее изменение Размер Описание
 
 Родительский каталог
  Go Paperless.svg 28-янв-2020 06:52 71K
  Go_Paperless.jpg 28-янв-2020 06:52 48K
  LiveChat_Avail.svg 28-янв-2020 06:52 10K
  LiveChat_Unavail.svg 28-янв-2020 06:52 11K
  Mail_24.svg 23-фев-2021 10:18 1K
  PayPal_Spinner.gif 28-янв-2020 06:52 25K
  Phone_24.svg 23-фев-2021 10:18 1K
  RecurringPayments.jpg 28-янв-2020 06:52 33K
  RecurringPayments.svg 28-янв-2020 06:52 59K
  Настройка Alerts.svg 28-янв-2020 06:52 79K
  Set_Up_Alerts.jpg 28-янв-2020 06:52 53K
  access_fico.jpg 28-янв-2020 06:52 49K
  access_fico.svg 28-янв-2020 06:52 89K
  alert_notification.sv + 28-янв-2020 06:52 0K
  arrowback-30-blue.svg 28-янв-2020 06:52 1K
  arrowback-30-синий.zip 28-янв-2020 06:52 2K
  arrowback-30-blue_201 + 28-янв-2020 06:52 2K
  arrowback-blue.png 28-янв-2020 06:52 1K
  arrowback-blue.svg 28-янв-2020 06:52 1K
  arrowright-24-blue.pn + 28-янв-2020 06:52 1K
  arrowright-24-blue.sv + 28-янв-2020 06:52 1K
  arrowright-24-white.p + 28-янв-2020 06:52 1K
  arrowright-24-white.s + 28-янв-2020 06:52 1K
  auto-pay.svg 28-янв-2020 06:52 2K
  [email protected] 28-янв-2020 06:52 13K
  чернить.png 28-янв-2020 06:52 1K
  black.svg 28-янв-2020 06:52 1K
  [email protected] 28-янв-2020 06:52 1K
  [email protected] 28-янв-2020 06:52 1K
  blue-arrow.svg 28-янв-2020 06:52 1K
  calendar-blue.svg 28-янв-2020 06:52 4K
  calendar-grey.svg 28-янв-2020 06:52 4K
  calendar-icon.png 28-янв-2020 06:52 1K
  calendar-red.svg 28-янв-2020 06:52 4K
  cancelled.svg 28-янв-2020 06:52 1K
  отменено.png 28-янв-2020 06:52 1K
  cancled.svg 28-янв-2020 06:52 3K
  capClose.svg 22-сен-2020 13:07 1K
  cart.svg 22-июл-2020 11:58 1K
  carterror.png 06-апр-2020 12:37 1K
  carterror.svg 22-июл-2020 11:58 2K
  check- illustration.p + 28-янв-2020 06:52 1K
  check- illustration @ 2 + 28-янв-2020 06:52 3K
  check- illustration @ 3 + 28-янв-2020 06:52 5K
  check-illustration.pn + 28-янв-2020 06:52 1K
  check-illustration @ 2x + 28-янв-2020 06:52 3K
  check-illustration @ 3x + 28-янв-2020 06:52 5K
  проверил.png 28-янв-2020 06:52 1K
  checked.svg 28-янв-2020 06:52 1K
  check_1x.png 28-янв-2020 06:52 1K
  checked_3x.png 28-янв-2020 06:52 1K
  checked_checkbox.svg 14-окт-2020 18:11 1K
  choice-icon-on.png 28-янв-2020 06:52 1K
  choice-module.png 28-янв-2020 06:52 1K
  cloud-48.svg 28-янв-2020 06:52 1K
  cloud-icon.png 28-янв-2020 06:52 1K
  [email protected] 28-янв-2020 06:52 1K
  значок облака @ 3x.png 28-янв-2020 06:52 2K
  cloud.svg 28-янв-2020 06:52 1K
  critical.svg 28-янв-2020 06:52 1K
  cycle-60.svg 25-апр-2020 10:44 1K
  date-left-icon.svg 28-янв-2020 06:52 1K
  date-picker-right.svg 28-янв-2020 06:52 1K
  dismissable_notificat + 28-янв-2020 06:52 1K
  download-icon-disput. + 25-апр-2020 10:44 1K
  download-statement.sv + 06-апр-2020 12:37 1K
  error.svg 28-янв-2020 06:52 4K
  платеж.svg 28-янв-2020 06:52 1K
  [email protected] 28-янв-2020 06:52 11K
  free_fico.jpg 28-янв-2020 06:52 45K
  free_fico.svg 28-янв-2020 06:52 82K
  full-arrow-24-white.s + 28-янв-2020 06:52 1K
  green.svg 28-янв-2020 06:52 2K
  hover.svg 28-янв-2020 06:52 1K
  hover_unchecked.png 28-янв-2020 06:52 1K
  hover_unchecked_1x.pn + 28-янв-2020 06:52 1K
  hover_unchecked_3x.pn + 28-янв-2020 06:52 1K
  ic-critical.png 28-янв-2020 06:52 1K
  ic-critical.svg 28-янв-2020 06:52 1K
  [email protected] 28-янв-2020 06:52 1K
  [email protected] 28-янв-2020 06:52 2K
  icon-print.svg 14-окт-2020 18:11 1K
  illustration.svg 22-июл-2020 11:58 1K
  large-mail.svg 25-апр-2020 10:44 1K
  loading-spinner-40.sv + 24-янв-2021 20:31 1K
  mail.svg 28-янв-2020 06:52 1K
  почта @ 2x.png 28-янв-2020 06:52 1K
  not-active.png 28-янв-2020 06:52 1K
  [email protected] 28-янв-2020 06:52 1K
  предлагает_brick.jpg 28-янв-2020 06:52 71K
  pay-off-status.svg 28-янв-2020 06:52 1K
  значок-успешный платеж. + 15-июн-2020 12:44 4K
  paypal.png 28-янв-2020 06:52 1K
  paypal.svg 28-янв-2020 06:52 1K
  pending-badge.png 28-янв-2020 06:52 1K
  pending.svg 28-янв-2020 06:52 1K
  в ожидании @ 3x.png 28-янв-2020 06:52 11K
  plus-circle.png 28-янв-2020 06:52 1K
  plus-circle.svg 28-янв-2020 06:52 1K
  print.svg 28-янв-2020 06:52 1K
  processing.svg 28-янв-2020 06:52 2K
  processing_outlined.s + 28-янв-2020 06:52 2K
  progress.png 28-янв-2020 06:52 1K
  Promo.png 28-янв-2020 06:52 3K
  Promo.svg 28-янв-2020 06:52 1K
  [email protected] 28-янв-2020 06:52 13K
  промо_.png 28-янв-2020 06:52 3K
  purple-fee.svg 28-янв-2020 06:52 1K
  radio-checked.png 28-янв-2020 06:52 1K
  range-indicator.svg 28-янв-2020 06:52 1K
  range.svg 28-янв-2020 06:52 1K
  red.svg 05-апр-2021 13:56 1K
  rejected.svg 28-янв-2020 06:52 1K
  Relief.svg 14-окт-2020 18:11 3K
  reverse.svg 17-авг-2020 11:59 2K
  save-ic.png 28-янв-2020 06:52 1K
  безопасное предупреждение.svg 17-авг-2020 11:59 1K
  service.png 28-янв-2020 06:52 1K
  tool-tip.svg 28-янв-2020 06:52 1K
  tooltip-hover.png 28-янв-2020 06:52 3K
  tooltip-hover.svg 28-янв-2020 06:52 1K
  tooltip.png 28-янв-2020 06:52 1K
  tooltip_.png 28-янв-2020 06:52 1K
  top_brands.svg 28-янв-2020 06:52 54K
  u19221.png 28-янв-2020 06:52 2K
  u19236.png 28-янв-2020 06:52 2K
  ui-bg_flat_75_ffffff_ + 28-янв-2020 06:52 1K
  ui-bg_glass_65_ffffff + 28-янв-2020 06:52 1K
  ui-bg_glass_75_dadada + 28-янв-2020 06:52 1K
  ui-bg_glass_75_e6e6e6 + 28-янв-2020 06:52 1K
  ui-bg_highlight-soft_ + 28-янв-2020 06:52 1K
  не отмечен.png 28-янв-2020 06:52 1K
  unchecked.svg 14-окт-2020 18:11 1K
  [email protected] 28-янв-2020 06:52 1K
  [email protected] 28-янв-2020 06:52 1K
  vendor.png 28-янв-2020 06:52 2K
  vendor.svg 28-янв-2020 06:52 2K
  [email protected] 28-янв-2020 06:52 10K
  warning-alt-orange.sv + 17-авг-2020 11:59 1K
 

Что в голове? Метаданные в HTML — Изучите веб-разработку

Заголовок HTML-документа — это часть, которая не отображается в веб-браузере при загрузке страницы.Он содержит такую ​​информацию, как страница

Это моя страница

Заголовок HTML — это содержимое элемента — в отличие от содержимого элемента (которое отображается на странице при загрузке в браузере), содержимое заголовка не отображается на странице .Вместо этого задача руководителя — содержать метаданные о документе. В приведенном выше примере голова довольно маленькая:

  <заголовок>
  
  
  

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

Мы уже видели элемент