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

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

Favicon (фавикон) — это иконка вашего сайта (обычно создается на основе логотипа).

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

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

• В мобильной выдаче Google. Гугл часто все меняет, не так давно отображалось и в выдаче на ПК.

Зачем нужен favicon

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

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

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

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

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

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

• в гугле;
  
• специализированных сайтах типа freepik.com;
• заказать у дизайнера;
• нарисовать самому.

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

Есть как минимум 3 способа, разберем каждый.

Генераторы фавикон

Это самый быстрый и оптимальный способ, тем более генераторов сейчас предостаточно. Разберем самый крутой на мой взгляд: realfavicongenerator.net. Переходим на сайт, правом верхнем углу нажимаем на кнопку «Select your Favicon image» и выбираем 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"

Альтернативные сервисы для создание фавикон онлайн из готового изображения

Довольно достойный конкурент, выше указанного сервиса favicon-generator.org — тоже сгенерит много иконок и код для них. И pr-cy.ru/favicon/ — это по факту просто конвертер ico. Здесь вам нужно загрузить картинку с компьютера, нажать «Создать favicon» и скачать его. Минус от выше указанного генерит только favicon.ico.

Сервисы для самостоятельного создания и выбора готовых Favicon иконок.

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

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

Создание при помощи Adobe Photoshop

Если вы параноик, то можете самостоятельно нарезать (сохранить) изображения различных размеров при помощи Фотошопа, а чтобы сохранить иконку в формате iso, можно поставить специальное дополнение icon.

Как добавить иконку на сайт (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 минут!