Как использовать и оформлять иконки с помощью css?

Содержание:

Bootstrap 3 Icons
- Example
Как использовать иконки Font Awesome¶
Установка иконки
Как подключить фавикон к сайту
Генератор favicon
- - WordPress и Facebook (использование превью к записям)
  - Общее изображение для всех материалов
Фавикон и Фотошоп
Как добавить на сайт?
Html код иконки для сайта
С чего начать? Первым делом разбираемся с расширениями
- Основные форматы под favicon и их особенности
- Размеры иконок
Зачем нужен favicon?
Отображение Favicon на мобильном
- Иконка для IOS
- Android
- Windows Phone
Creating
Форматы favicon
- Favicon.ico
- Favicon.png
- Favicon.svg
Размеры фавиконов для браузеров и устройств
- Достаточный пакет фавиконок для популярных браузеров
- Android
- Apple
- Edge и IE 12
ИЗОБРАЖЕНИЯ
Код для таск-менеджеров Grunt и Gulp
- В своих проектах мы используем Gulp
Добавление фавикона
Где скачать готовый вариант
Где отображается фавикон и при чем тут SEO
ФОРМЫ

Bootstrap 3 Icons

To use the Bootstrap 3 glyphicons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

<!DOCTYPE html><html><head>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css»></head><body>
</body></html>

Note: Glyphicons are not supported in Bootstrap 4.

For more information about Bootstrap 3 and Glyphicons, visit our Bootstrap 3 Tutorial.

Как использовать иконки Font Awesome¶

иконки

Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.

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

Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом (fas, fal, far или fab).

Используйте элемента для ссылки на элемент:

Или используйте элемент span:

Префикс fa устарел в версии 5. Новые префиксы по умолчанию fas (сплошной стиль), fab (бренды), far (обычный стиль) и fal (тонкий стиль).

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

Favicon: что это такое, как создать и установить на свой сайт, отображение на мобильном

Заветный фавикон получили. Следует подумать, как поставить иконку на сайт. Для этого нужно загрузить файл изображения в корневую директорию сайта (обычно она носит название public_html).

Но это еще не все. Для отображения иконки нужно прописать следующий html-код:

В графе «type» важно правильно указать тип изображения. То есть, если используется картинка формата GIF, код будет выглядеть так:

Этот код устанавливается в любом месте между тегами <head> и </head> файла главной страницы.

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

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

Как подключить фавикон к сайту

Как поменять иконки в windows 10

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

1. Задаем файлу название favicon, например, favicon.ico.

2. Помещаем переименованный файл в корневой каталог сайта.

3. Добавляем в HTML-код главной страницы между тегами <head></head> ссылку на размещенный файл.

Наиболее часто эта строка выглядит так:

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

В этом случае в атрибутах ссылок указывают разные значения:

Атрибут “rel” задает тип ресурса. Большинство браузеров учитывают “icon”, для Internet Explorer необходим “shortcut icon”. Таким образом, даже если вы используете универсальный ico-фавикон в HTML-код лучше поместить две ссылки: с указанием атрибута rel=“icon” и rel=“shortcut icon”.

…<link rel=“icon” href=“https://site.com/favicon.ico” type=“image/x-icon”> …

…<link rel=“shortcut icon” href=“https://site.com/favicon.ico” type=“image/x-icon”> …

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

Соответственно, важно чтоб сам файл и каталог в котором он размещается был доступен поисковым роботам Google и Яндекса. Для этого убедитесь, что указанные документы не запрещены для индексирования в robots.txt или не закрыты директивой Disallow

Генератор favicon

Большую часть можно сделать при помощи всего одного онлайн-генератора иконок — https://realfavicongenerator.net

После, вы сможете посмотреть, как будет выглядеть ваш favicon в iOS, Android и плиточном Windows 8, а заодно изменить настройки для каждого случая: задать индивидуальное изображение, изменить цвет фона, масштабировать иконку.

В опциях оставьте всё, как есть: по умолчанию генератор создаст картинки, которые нужно будет поместить именно в корень сайта (обычно на хостингах корнем сайта называются директории /home/, /www/, /public_html/).

Во вкладке «Compression» можно уменьшить вес иконок (сжатие происходит в районе 20-80%, в зависимости от качества).

Нажимаем Generate и получаем на выходе архив, содержимое которого загружаем в уже названное выше место, и код, который вставляем в <head></head> сайта.

После добавления их на сайт, можно проверить работоспособность тем же сервисом.

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

WordPress и Facebook (использование превью к записям)

Если используете плагин WordPressSEObyYoast, то достаточно зайти в раздел «Социальные сети» → «Facebook» и активировать пункт «Добавить Open Graph».

Во всех остальных случаях делаем следующее:

Открываем файл header.php вашей темы.
Самый первый тег <html> меняем на <html xmlns:og=»https://ogp.me/ns#»>
В секции head вставляем код:

В functions.phpдобавьте функцию:

Общее изображение для всех материалов

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

Чтобы социалки «подцепили» картинку, добавьте в head-секцию следующий код:

Принимаются форматы .jpg и .png.

Заключение

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

Фавикон и Фотошоп

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

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

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

Формат ico используется наиболее часто, так как он поддерживается всеми популярным браузерами

Можно сохранять изображения и в других графических форматах, но важно помнить, что некоторые браузеры не будут отображать такую иконку

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

Добавление иконки для вашего ресурса является очень простым: достаточно лишь прописать необходимый html-код между тегами <head></head< вашего сайта.

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

  <link rel="icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />  <link rel="shortcut icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />

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

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

Html код иконки для сайта

Обратите внимание на тип картинки иконки, его нужно прописывать в «type».
Например, если у вас картинка иконки имеет формат GIF, тогда код будет выглядеть следующим образом:

Данный Html код иконки для сайта нужно вставить в произвольном месте между тегами <head> и </head> в файл страницы, на которую нужно поставить иконку.

Если вам нужна в wordpress иконка сайта, то необходимо отредактировать файл header.php, в который вставляется этот же код.
Итак, вы теперь знаете, как установить иконку на сайт самостоятельно.

С чего начать? Первым делом разбираемся с расширениями

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

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

Основные форматы под favicon и их особенности

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

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

.SVGПерспективный, но в настоящее время малоподдерживаемый векторный формат изображений. Его основное преимущество — возможность вариативного разрешения под нужды конкретного интерфейса. Настраивается через CSS. Масштабирование SVG-фавиконов происходит без потери качества. Данный тип файлов не поддерживается в старых десктопных браузерах и на некоторых Android-платформах.

Отдельно отметим, что иконки можно загружать и в любых других форматах, например, .jpeg, .bmp или. gif, но на практике этого стараются не делать из-за все той же проблемы — отсутствия широкой поддержки. Узнать, какие именно расширения отображают те или иные браузеры, помогают специальные инструменты, например, сервис caniuse.com.

Благодаря сервису Сan I Use мы видим, что у PNG-фавиконов поддержка в браузерах заметно шире, чем у расширения .SVG

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

Размеры иконок

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

рекомендует использовать размеры иконок, кратные 48 пикселям: 48×48, 96×96, 144×144. Для SVG-файлов кратность не имеет значения, поскольку, как было упомянуто выше, у них вариативное разрешение.

В браузерах загруженный значок будет ужат до размера 16×16 пикселей. Поэтому вы обязательно должны убедиться, насколько читаем ваш мини-логотип в таком масштабе, но загружать столь маленький размер файла не нужно (по крайней мере, на этом сделан акцент в справке Google). Минимальное разрешение — 48×48 пикселей.

Яндекс дает следующие рекомендации: оптимальный размер — 120×120, также допускается использование изображений 32×32 и 16×16 пикселей. Рекомендуемый формат — SVG, как гарантирующий максимальную четкость и заметность. Но это необязательно. По желанию можно использовать любой вышеописанный тип расширения.

При создании фавикона в формате .ico, который, как мы выяснили, является контейнером, содержащим сразу несколько иконок, традиционно в него загружают иконки с разрешением 32×32, 48×48 и 96×96 пикселей. Этого достаточно, чтобы лого везде отображалось в хорошем качестве. При необходимости картинка будет масштабирована до нужных размеров.

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

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

Favicon — это иконка, которая по умолчанию имеет формат 16 на 16 пикселей и отображается в верхней части вкладки браузера рядом с названием сайта/страницы. Если иконка не задана или задана не правильно, то тогда в браузере рядом с названием сайта просто рисуется значок самого браузера (например, значок Firefox или Google Chrome).

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

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

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

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

Отображение Favicon на мобильном

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

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

Иконка для IOS

Чтобы favicon отображалась на устройствах IOS и в браузере Safari, надо прописать следующий код:

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

Android

Для устройств работающих на Android, прописываем:

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">

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

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

Его содержимое:

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

Более подробно можно посмотреть в документации Google Chrome.

Но это еще не все. В новых версиях Android (начиная с Lollipop), ваш браузер может перекрашиваться в интерфейс цвета сайта.
Чтобы сделать такую фишку, прописываем строчку и задаем свой цвет:

<meta name="theme-color" content="#8A2BE2">

Windows Phone

Про favicon в Windows Phone тоже не забываем:

<meta name="msapplication-TileColor" content="#8A2BE2">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Для более расширенной настройки иконки в Windows Phone, можно использовать следующие значения:

<?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>#8A2BE2</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Сам файл настройки:

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

Более подробно о разметке в документации Microsoft.

Creating

To create favicon you can use almost any graphic editor, but the format of the image you choose should be 16×16, 32×32 or 64×64 pixel, using 8-bit or 24-bit color. The image must have a PNG extension (W3C standard), GIF or ICO.

When creating an image, pay attention to the following nuances:

Favicon should be made in the same style as the site, as it is a kind of business card of your project.
The image you want to use as a favicon should be very easy to understand, and you should use just a few elements.
Watch for what would favicon, the most transferred the essence of your site, business, project.
Create a picture better so that it would cause the visitors of your site association. For example, phone icon, for mobile phone salon.

Форматы favicon

Основными форматами для favicon являются ICO, PNG и SVG. При желании, значок сайта можно сделать в форматах JPEG или анимированном GIF. Но из-за слабой поддержки основными браузерами использование таких значков превращается в нецелесообразную экзотику. Хотя и можно сделать favicon в формате GIF без анимации, но не нужно – лучше в PNG.

Favicon.ico

Хотя формат ICO сейчас считается устаревшим, но сбрасывать со счетов его ещё рано. Основными достоинствами этого формата являются: возможность хранения в одном файле нескольких вариантов размеров иконки сайта и поддержка полупрозрачности. Надо помнить что, IE10 и более ранние версии этого браузера понимают только ICO. Так же следует учитывать то, что этот формат довольно широко используется в операционной системе Windows. Т. е. favicon.ico используется как изображение для вкладок, панели задач, рабочего стола. Поэтому для корректного отображения на этих объектах, создаётся файл в формате ICO, содержащий три изображения рекомендуемых размеров: 16х16, 32х32 и 48х48. Сделать такой файл можно здесь. Подключение favicon.ico на сайте производится с помощью следующего кода:

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

В параметре href указывается путь до иконки сайта. В этом примере и далее в этой статье предполагается, что файл favicon размещён в корне сайта. Если файл иконки размещается не в корне сайта, то тогда нужно указать соответствующий путь.

Favicon.png

Формат PNG предоставляет более широкие возможности для изображения, чем ICO. Сейчас очень большое количество сайтов используют favicon в формате PNG. Он поддерживается всеми основными браузерами. Подключение favicon.png на сайте производится с помощью следующего кода:

<link href="/favicon.png" rel="icon" type="image/png" />

Favicon.svg

Формат SVG — новый открытый формат векторной графики. В силу того, что изображения в SVG масштабируются без потери качества, он идеально подходит для favicon. Этот формат является рекомендацией консорциума W3C, его поддерживают ещё не все браузеры, но за ним будущее. Подключение favicon.svg на сайте производится с помощью следующего кода:

<link href="/favicon.svg" rel="icon" type="image/svg+xml" />

Отслеживать поддержку SVG браузерами можно здесь.

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

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

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

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

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

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

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

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

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

Android

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

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

Пример кода:

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

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

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются
Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах. В rel нужно указать “apple-touch-icon.png”.

Пример кода:

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

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

Пример кода:

Edge и IE 12

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

Пример кода:

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

Пример кода:

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

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

Код для таск-менеджеров Grunt и Gulp

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

В своих проектах мы используем Gulp

1. Установите плагин

npm install gulp-real-favicon --save-dev

2. Вставьте код в свой

var realFavicon = require ('gulp-real-favicon');
var fs = require('fs');

// File where the favicon markups are stored
var FAVICON_DATA_FILE = 'faviconData.json';

// Generate the icons. This task takes a few seconds to complete. 
// You should run it at least once to create the icons. Then, 
// you should run it whenever RealFaviconGenerator updates its 
// package (see the check-for-favicon-update task below).
gulp.task('generate-favicon', function(done) {
	realFavicon.generateFavicon({
		masterPicture: 'TODO: Path to your master picture',
		dest: 'TODO: Path to the directory where to store the icons',
		iconsPath: '/',
		design: {
			ios: {
				pictureAspect: 'backgroundAndMargin',
				backgroundColor: '#ffffff',
				margin: '21%'
			},
			desktopBrowser: {},
			windows: {
				pictureAspect: 'whiteSilhouette',
				backgroundColor: '#da532c',
				onConflict: 'override'
			},
			androidChrome: {
				pictureAspect: 'shadow',
				themeColor: '#ffffff',
				manifest: {
					name: 'PUGOFKA',
					display: 'browser',
					orientation: 'notSet',
					onConflict: 'override'
				}
			},
			safariPinnedTab: {
				pictureAspect: 'silhouette',
				themeColor: '#5bbad5'
			}
		},
		settings: {
			compression: 5,
			scalingAlgorithm: 'Mitchell',
			errorOnImageTooSmall: false
		},
		markupFile: FAVICON_DATA_FILE
	}, function() {
		done();
	});
});

// Inject the favicon markups in your HTML pages. You should run 
// this task whenever you modify a page. You can keep this task 
// as is or refactor your existing HTML pipeline.
gulp.task('inject-favicon-markups', function() {
	gulp.src()
		.pipe(realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).favicon.html_code))
		.pipe(gulp.dest('TODO: Path to the directory where to store the HTML files'));
});

// Check for updates on RealFaviconGenerator (think: Apple has just
// released a new Touch icon along with the latest version of iOS).
// Run this task from time to time. Ideally, make it part of your 
// continuous integration system.
gulp.task('check-for-favicon-update', function(done) {
	var currentVersion = JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).version;
	realFavicon.checkForUpdates(currentVersion, function(err) {
		if (err) {
			throw err;
		}
	});
});

3. Замените на путь до вашего исходника из которой будут генерироваться иконки. Например,

4. Замените на путь до директории где будут лежать ваши сгенерированые иконки. Например,

5. Замените на путь до файлов в которые будет вставлен код внедрения favicon. Например,

6. Замените на путь до директории, где хранятся ваши HTML файлы.

7. Сгенерируйте иконки командой

gulp generate-favicon

8. Интегрируйте иконки в ваш шаблон

gulp inject-favicon-markups

Добавление фавикона

Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом <link>, в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:

<html>
  <head>

    <link rel="icon" href="путь_к_иконке/favicon.ico" type="image/x-icon">

  </head>
  <body>
  </body>
</html>

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

В таблице показаны различные варианты добавления фавикона и приведена поддержка браузеров:

	Google Chrome	Internet Explorer	Firefox	Opera	Safari
<link rel=»shortcut icon» href=»httр://mysite.ru/myicon.ico»>	Да	Да	Да	Да	Да
<link rel=»icon» href=»httр://mysite.ru/image.ico»>	Да	Да (с IE 11)	Да	Да	Да
<link rel=»icon» type=»image/vnd.microsoft.icon» href=»httр://mysite.ru/image.ico»>	Да	Да (с IE 9)	Да	Да	Да
<link rel=»icon» type=»image/png» href=»httр://mysite.ru/image.png»>	Да	Да (с IE 11)	Да	Да	Да
<link rel=»icon» type=»image/gif» href=»httр://mysite.ru/image.gif»>	Да	Да (с IE 11)	Да	Да	Да
<link rel=»icon» type=»image/x-icon» href=»httр://mysite.ru/image.ico»>	Да	Да (с IE 9)	Да	Да	Да

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

Где скачать готовый вариант

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

Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.

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

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

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

Где отображается фавикон и при чем тут SEO

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

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

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

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

В папках с закладками

В истории браузера

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

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

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

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

Результаты в мобильном поиске Google и Яндекса

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

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения