Favicon (фавикон) - что это, как создать и установить на сайт

Содержание

Что такое фавикон
Зачем нужен favicon
Рекомендации по формату и размеру фавиконки для поисковых систем
Сервисы для создания пиктограмм + готовые фавиконы для сайта
Значки сайта для мобильных устройств
Сервисы для создания фавиконки без программиста
Где достать картинку для создания иконок и какая нужна
Как добавить фавикон на сайт (html или на cms)
Заключение

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

Favicon (от англ. FAVorite ICON — «значок для избранного») — это иконка вашего сайта или web-страницы (обычно создается на основе логотипа).

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

браузером на открытой вкладке, в закладках (избранном) рядом с URL сайта и истории просмотров;
в поисковой выдаче Яндекса около заголовка в сниппете.

В мобильной выдаче Google.
В истории браузера.

Зачем нужен favicon

В первую очередь это часть брендинга — помогает придать вашему сайту уникальности.

Для SEO — делает поисковой сниппет более красивым — более кликабельным.

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

Сервисы для создания пиктограмм + готовые фавиконы для сайта

Одним из таких сервисов является favicon.cc. В нем Вы можете нарисовать Favicon иконку или если у вас нет не времени, ни желания на создание иконки самому(ой), тогда нажмите на вкладку «Top Rated Favicons», после чего справа появиться множество страниц с различными фавиконами, где Вы сможете поискать себе подходящую иконку, а также Вы для того чтобы ускорить поиск картинки, Вы можете воспользоваться формой для поиска и подобрать иконку по ключевому слову. А после того, как выберите подходящую Favicon, нажимаете на её название

, а на открывшейся страничке, нажмите на кнопку «Download favicon» для её загрузки:

Альтернативы: onlinefavicon.com, xiconeditor.com.

Значки сайта для мобильных устройств

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

значек сайта на рабочем столе смартфона — *Пример ярлыка на смартфоне, если вы добавите сайт на главный экран.*

Сайт может предоставлять такую иконку, указав в заголовке <head> <link rel="apple-touch-icon" ...> Рекомендуемый размер иконки для iPhone и 120×120 пикселей. Для iPad — 152×152 пикселя. Для планшетов на Android с браузером Chrome предпочтительной является иконка формата PNG и размера 192×192.

Сервисы для создания фавиконки без программиста

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

Разберем как работать в самым крутым на мой взгляд генераторатором: realfavicongenerator.net. Переходим на сайт, правом верхнем углу нажимаем на кнопку «Select your Favicon image» и выбираем svg, png или jpg изображение.

Далее откроется страница с настройками — настраиваете цвета под свой вкус (все изменения сразу визуально отображаются) и нажимаем кнопку «Generate your Favicons and HTML code»

По умолчанию сервис сгенерит пути под корень — следовательно иконки нужно будет грузить в корень сайта. Не хотите грузить в корень переключите на пункт «I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them here:» и укажите папку в которую вы собираетесь грузить иконки, см. скрин выше.

Далее realfavicongenerator сгенирирует все нужные иконки и код для их установки на сайт.

Скачиваем архив с иконками на ПК, нажав на кнопку «Favicon package», далее распаковываем архив и заливаем из него все файлы либо в корень (если не чего не меняли), либо в папку которую указали выше.

И копируем сгенерированный код на сайт в секцию head.

Примечание! Если вы выбрали не корень сайта, то лучше в сгенгеренные пути добавить адрес сайта, например: было href="icons/apple-touch-icon.png" стало href="https://web-revenue.ru/icons/apple-touch-icon.png"

Альтернативы: favicomatic.com, favicon-generator.org, faviconit.com/ru.

Где достать картинку для создания иконок и какая нужна

Для создания (генерации) иконок нам понадобиться готовое SVG изображение или хотя бы PNG изображение (с прозрачным фоном) не менее 260 на 260 пикселей (лучше всего 512×512 px или больше). В принципе можно сгенерить и из JPG картинки.

Картинки можно найти:

в гугле;
специализированных сайтах типа freepik.com, icon-icons.com, icons8.ru;
заказать у дизайнера;
нарисовать самому.

Как добавить фавикон на сайт (html или на cms)

Для того чтобы иконки начали работать их нужно закачать в корневую папку вашего сайта (обычно это public_html), далее прописываете в секции head (в wordpress это обычно это index.php или header.php) специальный код:

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

Это самый минимальный код, а вот так выглядит оптимальный код:

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Здесь:

ico иконка в основном для старых браузеров типа ie и поисковых систем;
apple-touch-icon — PNG иконка для iOS — пользователи iPhone и iPad могут закрепить ваш веб-сайт на главном экране. Ссылка выглядит как родное приложение;
favicon 16 на 16 и 32 на 32 pх — для современных браузеров и различных устройств;
safari-pinned-tab — svg иконка закрепленных вкладок и сенсорной панели MacBook;
<meta name=»msapplication-TileColor» content=»#da532c»> — тег который отвечает за цвет заливки плитки для пользователей Windows 8 и 10 (metro). Они могут закрепить ваш веб-сайт на своем рабочем столе. Ваш сайт отображается в виде плитки, как собственное приложение для Windows.
<meta name=»theme-color» content=»#ffffff»> — мета тег — цвет заливки темы для андройд. Начиная с Android Lollipop, вы можете настроить цвет панели задач.
site.webmanifest — JSON-файл, в котором указывают иконки их размеры и форматы для сайта или андройд приложения. Имеет следующий формат:

{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Дополнительно: У Microsoft (браузеров Edge и IE12) есть «Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файл browserconfig.xml с таким содержимым.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/mstile-150x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Его можно просто закинуть в корень сайта вместе с png иконкой, либо еще дополнительно можно подключить тегом <meta name="msapplication-config" content="/icons/browserconfig.xml">

В конечном итоге мы получаем примерно такой комплект иконок и конфиг файлов.

Внимание! Эти все иконки и код можно создать выше описанным генератором за 1 минуту.

Важно: установленные иконки сразу не появятся в результатах поиска в Yandex и Google — нужно подождать до 2х недель.

Заключение

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

< Подготовка к публикации материалов

Веб дизайн — введение >