Преамбула
Favicon (от FAVorite ICON) называют иконку, отображающуюся на вкладке (или в окне, зависит от браузера) с открытым сайтом.
Вот на моем пока стандартная иконка WordPress:
Делаем свою.
Форматы файлов для favicon
Изначально для favicon был предусмотрен только один формат ICO
, однако, современные браузеры поддерживают и другие форматы.
PNG
: десктопные браузеры (Chrome, Safari, Firefox, Opera, Internet Explorer 11 и некоторые другие), а также браузеры для Android.
GIF
: Chrome, Safari, Firefox, Opera
Анимированный GIF
: Firefox, Opera. Однако, использовать анимированный GIF не рекомендуется — будет мельтешить и надоедать, да и это не самый легкий формат для картинок.
SVG
(векторные изображения): Safari
Преимущество формата ICO
в том, что иконка позволяет в одном файле хранить изображения разных размеров (с разным разрешением), также рекомендуется делать файл ICO
для совместимости со старыми версиями браузеров. Еще формат ICO
рекомендует Google и Яндекс, они выводят иконку в поисковой выдаче рядом с заголовком сайта.
Рекомендуемые разрешения для favicon
Если сравнивать с иконками для своего приложения под Windows (копия) у favicon рекомендуемых расширений целый зоопарк, хотя изначально предусматривалось только разрешение 16x16
.
Десктопные браузеры:
— 16x16
— 32x32
— 48x48
Устройства на Android (в зависимости от разрешения экрана и количества точек на дюйм):
— 36x36
— 48x48
— 72x72
— 96x96
— 144x144
— 192x192
Устройства Apple:
— от 57x57
до 76x76
Устройства Apple с дисплеем Retina:
— от 114x114
до 180x180
Однако, городить огород из кучи картинок разного разрешения не надо, достаточно создать несколько с максимальным расширением под разные устройства и браузеры. В теории устройства сами должны масштабировать картинку из большей в меньшую, если понадобится.
Wordpress запрашивает у пользователя PNG с расширением 512x512
, сохраняет его и дополнительно генерирует картинки со следующими разрешениями: 32x32
, 150x150
, 180x180
, 192x192
, 270x270
, 300x300
. Причем, в коде страницы прописываются сначала файлы с разрешением 32x32
и 192x192
(для десктопных и андроидных браузеров соответственно), потом 180x180
как иконка для девайсов от Apple и иконка 270x270
для использования в качестве закрепленной иконки в плиточном интерфейсе Windows 8.1
Как сделать favicon
Для начала понадобится какое-нибудь изображение, лучше всего квадратное, в смысле в квадрат вписывающееся. Я не долго думая, просто взял любимый векторный редактор и нарисовал простенький логотип для иконки, пока размером 512×512. Впрочем, пока готовишь изображение, размер не особо важен, наоборот, чем больше, тем лучше, особенно, если работаешь в растре. Векторному редактору-то фиолетово, он выходное изображение может в любом разрешении без проблем создать.
Установка favicon в WordPress
Для современных версий движка WordPress на моменте создания изображения все сложности практически и заканчиваются:
Favicon в WordPress
К сожалению, WordPress не умеет генерировать иконку в формате ICO
, но это легко исправить. Таковую иконку легко собрать вручную, или же сгенерировать с помощью генератора favicon’ов (онлайн).
Генерация favicon онлайн
Есть, например, такой вот генератор favicon: https://realfavicongenerator.net/. Он генерирует иконки сразу на все случаи жизни: для десктопных браузеров и поисковиков, для кнопки сайта в iOS, иконку сайта для Android Chrome, иконку для плиточного интерфейса Windows 8.1 и 10, и даже векторную иконку для Safari (MacOS). В процессе генерации можно покрутить разные параметры для каждого случая в отдельности (размер, цвет фона и т.д.)
В конце вы получаете архив с иконками, вебманифест сайта для Android-устройств, browserconfig.xml
для IE11 (Win 8.1) и Edge (Win 10), а такжe HTML-код, который необходимо вставить в секцию <head></head>
на страницы сайта:
<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="#000000">
<meta name="theme-color" content="#ffffff">
Создание favicon вручную
Постараюсь описать «на все случаи жизни». Пусть изображения (кроме ICO
) будут находиться в /img/icons
(измените путь на ваш).
Современные десктопные браузеры (с поддержкой PNG):
1. Экспортируем исходное изображение как PNG
с разрешениями 16x16
, 32x32
, 48x48
и именами, пусть fi-16x16.png
, fi-32x32.png
, fi-48x48.png
2. В секции <head></head>
прописываем теги:
<link rel="icon" type="image/png" sizes="48x48" href="/img/icons/fi-48x48.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/fi-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/fi-16x16.png">
3. Заливаем файлы на сайт. Далее не буду упоминать, что все теги прописываются в <head></head>
, а файлы надо не забыть залить на сайт 🙂
Интересно, что автоматический генератор favicon и движок WordPress игнорируют разрешение 48x48
. Почему так я не совсем понял, если у кого-то есть соображения на сей счет, высказывайтесь в комментариях.
Классический favicon.ico для поддержки устаревших браузеров и для поисковиков:
По идее, современные браузеры тоже должны поддерживать формат ICO
, так что можно пропустить предыдущий пункт, хотя я перестраховался и оставил его.
1. Экспортируем исходное изображение как PNG
с разрешениями 16x16
, 32x32
, 48x48
2. Далее потребуется инструмент для сборки иконки icon sushi Копия
3. Открываем все нужные изображения (File —> Open…)
4. Выделяем их в окне программы.
5. Сохраняем иконку (File —> Save as Multiple Icon) под именем favicon.ico
6. Заливаем ее в корень сайта.
7. Добавляем теги:
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>
<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>
Для WordPress добавляем в раздел между тегами <head></head>
файла header.php
текущей темы (Внешний вид —> Редактор тем, в Редакторе ищем файл header.php
) следующий код:
<link rel=”shortcut icon” href=”<?php echo get_site_url(); ?>/favicon.ico” />
<link rel=”icon” href=”<?php echo get_site_url(); ?>/favicon.ico” />
Остальные устройства
Источники
1. Манифест? А? Что? Зачем?
2. Пишем правильный манифест для сайта
3. get_site_url()
4. Favicon сегодня: форматы, поддержка, автоматизация (копия)
5. Как сделать фавикон для сайта