Если вы до сих пор не добавили favicon для своего сайта и не знаете, что это такое, то сделайте это прямо сейчас, потому что это как паспорт для вашего сайта. Этот пост-инструкция по установке favicon (или как еще называют — favicon.ico) для обычного сайта (например, одностраничника) или WordPress.
Favicon — это мини иконка вашего сайта, которая показывается во вкладке браузера и в закладках. Если вы зайдете на любой популярный сайт, то во вкладке вы должны увидеть иконка этого ресурса.
Картинка ниже показывает как это выглядит в жизни при просмотре с браузера Google Chrome.
Человек зашедший на ваш сайт, вероятнее всего потом оставит его во вкладках (если он интересный или нужный), чтобы чуть позже прочитать информацию или же вовсе добавит его в закладки.
Для того, чтобы пользователю было проще визуально найти ваш сайт среди других 10-20 вкладок браузера — добавьте яркий, запоминающийся favicon. В этой записи я покажу как её придумать и установить для обычного или WordPress сайта.
Рисуем и используем генератор favicon
Для начала нужно придумать как будет выглядеть favicon. На моем блог — это синий фон (основной цвет сайта) и буква «B» — первая буква домменого имени и его названия. Вот как это выглядит в жизни:
В вашем случае — это может быть тоже самое, только в сочетании с вашими названиями и цветами.
Вам не обязаны писать буквы или слова, вы можете добавить фигуру или символ, который отображает суть вашего проекта.
Создание favicon
После того как вы придумали как он будет выглядеть, нужно использовать инструмент на подобии Photoshop или Ilustrator для его создания. Минимальный размер — это 512x512px.
Почему такой большой? Потому что favicon будет использоваться генератором для создания сразу множества вариантов (для Android, iOS устройств, разных браузеров и остальных форматов).
Генератор favicon
Чтобы не создавать разные форматы favicon вручную (никто это не любит) можно воспользоваться генератором, который сделает всю сложную работу за вас.
Я использую Dan’s Tools Favicon Generator (английский сайт) и вам советую.
Все что вам нужно это:
- Зайти на сайт
- Выбрать favicon
- Нажать кнопку «Create Favicon» справа от поля выбора картинки
- Подождать ~1 минуту, пока сервис закончит зарузку и форматирование
После того как вы немного подождали, у вас должна появиться страница похожая на скриншот ниже.
- Нажмите на «Download the generated favicon», чтобы скачать архив (это все что вам понадобиться).
- После заголовка «What’s next?» вы увидите поле с кодом, его нужно скопировать, потому что его нужно будет вставить между
<head></head>, но это делается по разному для CMS и обычных сайтов.
И далее выберите тип вашего сайта:
- Если у вас WordPress сайт, тогда следуйте «Для WordPress».
- Если у вас обычный сайт, тогда пропустите «Для WordPress» и следуйте «Для обычного сайта»
Для WordPress
Все favicon добавляются в голову вашего сайт (между <head></head> тегами), но не нужно в WordPress портить структуру и лезть напрямую в файл header.php, чтобы там добавить код, потому что это НЕ правильно. Я покажу вам как добавить favicon в WordPress используя functions.php следуя корректной логике разработки.
- Загрузите картинки из архива на ваш сайт в папку
/wp-content/themes/ВАША_ТЕМА/img. Если этой папки нет, то создайте ее. Или же загрузите в другую папку на ваш выбор, только не забудьте поменять пути из функции, которая будет описана ниже. - Откройте файл
functions.phpи после любой из функций добавьте следующий код. Вместе моего HTML кода (строки 3-19) впишите скопированный вами код из генератора.function add_custom_favicon() { ?> <link rel="apple-touch-icon" sizes="57x57" href="<?= get_theme_file_uri('/img/apple-icon-57x57.png') ?>"> <link rel="apple-touch-icon" sizes="60x60" href="<?= get_theme_file_uri('/img/apple-icon-60x60.png') ?>"> <link rel="apple-touch-icon" sizes="72x72" href="<?= get_theme_file_uri('/img/apple-icon-72x72.png') ?>"> <link rel="apple-touch-icon" sizes="76x76" href="<?= get_theme_file_uri('/img/apple-icon-76x76.png') ?>"> <link rel="apple-touch-icon" sizes="114x114" href="<?= get_theme_file_uri('/img/apple-icon-114x114.png') ?>"> <link rel="apple-touch-icon" sizes="120x120" href="<?= get_theme_file_uri('/img/apple-icon-120x120.png') ?>"> <link rel="apple-touch-icon" sizes="144x144" href="<?= get_theme_file_uri('/img/apple-icon-144x144.png') ?>"> <link rel="apple-touch-icon" sizes="152x152" href="<?= get_theme_file_uri('/img/apple-icon-152x152.png') ?>"> <link rel="apple-touch-icon" sizes="180x180" href="<?= get_theme_file_uri('/img/apple-icon-180x180.png') ?>"> <link rel="icon" type="image/png" sizes="192x192" href="<?= get_theme_file_uri('/img/android-icon-192x192.png') ?>"> <link rel="icon" type="image/png" sizes="32x32" href="<?= get_theme_file_uri('/img/favicon-32x32.png') ?>"> <link rel="icon" type="image/png" sizes="96x96" href="<?= get_theme_file_uri('/img/favicon-96x96.png') ?>"> <link rel="icon" type="image/png" sizes="16x16" href="<?= get_theme_file_uri('/img/favicon-16x16.png') ?>"> <link rel="manifest" href="<?= get_theme_file_uri('/img/manifest.json') ?>"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="<?= get_theme_file_uri('/img/ms-icon-144x144.png') ?>"> <meta name="theme-color" content="#ffffff"> <?php } add_action('wp_head', 'add_custom_favicon');Функция
get_theme_file_url()вернет ссылку (например:http://example.ru/wp-content/themes/bologer/) до папки с вашей темой и вам останется указать путь до картинки, что в нашем случае — это всего лишь/img/название_картинки.pngи один.jsonфайл. - Теперь остается проверить сработало это или нет. Зайдите на свой сайт, нажмите Ctrl + R, чтобы обновить страницу с кешем (у некоторых может быть Ctrl + f5). И если иконка появилась — поздравляю вас, все прошло успешно.
Если у вас не показывается favicon:
- проверьте код функции на ошибки, возможно у вас есть опечатка
- подождите некоторое время, чтобы favicon появился
- если не хотите ждать, то добавьте
?ver=1.0после.pngи.json. Каждая картинка и файл должны выглядеть следующим образом:название_картинки.png?ver=1.0или.json?ver=1.0
После этого favicon точно должен работать.
Для обычного сайта
В случае если у вас нет CMS или движка для сайт, то все проще. Вам нужно зайти:
- Загрузить все картинки в папку со всеми картинками, например img
- В главном файле сайта (например, index.php или index.html) между
<head></head>указать код от генератора, например, который написан ниже.<link rel="apple-touch-icon" sizes="57x57" href="/img/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/img/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/img/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/img/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/img/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/img/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/img/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/img/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/img/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png"> <link rel="manifest" href="/img/manifest.json"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/img/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff">
- Сохранить файл, зайти на сайт и проверить наличие favicon.
Вывод и вопросы
Установить favicon не такой сложный процесс как это может показаться для множества людей. В этой записи я расписал два распространенных способа — для обычного сайта (без CMS) и для WordPress (самого популярного блог движка в мире).
Если у вас есть вопросы, я буду рад ответить на них в комментариях. Пишите, не стесняйтесь. Если у вас есть что добавить к этой записи или исправить, буду рад вас выслушать :)
