Favicon (от FAVorite ICON) называют иконку, отображающуюся на вкладке (или в окне, зависит от браузера) с открытым сайтом.
Вот на моем пока стандартная иконка WordPress:
Делаем свою.
Изначально для 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 и Яндекс, они выводят иконку в поисковой выдаче рядом с заголовком сайта.
Если сравнивать с иконками для своего приложения под 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
Для начала понадобится какое-нибудь изображение, лучше всего квадратное, в смысле в квадрат вписывающееся. Я не долго думая, просто взял любимый векторный редактор и нарисовал простенький логотип для иконки, пока размером 512×512. Впрочем, пока готовишь изображение, размер не особо важен, наоборот, чем больше, тем лучше, особенно, если работаешь в растре. Векторному редактору-то фиолетово, он выходное изображение может в любом разрешении без проблем создать.
Для современных версий движка WordPress на моменте создания изображения все сложности практически и заканчиваются:
1. Экспортируем изображение как PNG с размерами 512×512 пикселей.
2. Идем в админскую консоль Внешний вид —> Настроить:
4. Загружаем готовую картинку:
5. Жмем Опубликовать и готово:
Фактически, движок WordPress делает из загруженного изображения несколько версий с разным разрешением:
cropped-favicon-150x150.png
cropped-favicon-180x180.png
cropped-favicon-192x192.png
cropped-favicon-270x270.png
cropped-favicon-300x300.png
cropped-favicon-32x32.png
cropped-favicon.png
favicon-150x150.png
favicon-300x300.png
favicon.png
и прописывает их в код страницы для различных устройств:
<head>
...
<link rel="icon" href="http://tolik-punkoff.com/wp-content/uploads/2020/07/cropped-favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="http://tolik-punkoff.com/wp-content/uploads/2020/07/cropped-favicon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="http://tolik-punkoff.com/wp-content/uploads/2020/07/cropped-favicon-180x180.png" />
<meta name="msapplication-TileImage" content="http://tolik-punkoff.com/wp-content/uploads/2020/07/cropped-favicon-270x270.png" />
</head>
К сожалению, WordPress не умеет генерировать иконку в формате ICO, но это легко исправить. Таковую иконку легко собрать вручную, или же сгенерировать с помощью генератора 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">
Постараюсь описать «на все случаи жизни». Пусть изображения (кроме 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” />
Устройства с iOS:
1. Экспортируем исходное изображение как PNG с разрешением 180x180 и именем, пусть apple.png
2. Прописываем тег:
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple.png">
Устройства с Android:
Способ #1:
1. Экспортируем файл как PNG с разрешением 192x192 (android.png)
2. Прописываем тег:
<link rel="icon" href="/img/icons/android.png" sizes="192x192">
Способ #2. С помощью манифеста сайта:
1. Создаем файл manifest.json (имя можно изменить). В манифесте можно прописать кучу параметров, но это отдельная тема, см. ссылки в источниках. Пример манифеста с описанием favicon’ов, заголовков и цветов тем:
{
"name": "My wery cool site",
"short_name": "My site",
"icons": [
{
"src": "/img/icons/android-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/img/icons/android-256x256.png",
"sizes": "256x256",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
2. Экспортируем файлы с нужными разрешениями.
3. Заливаем файлы в место назначения, а манифест — в корень сайта (хотя можно и поменять, не забудьте соответственно изменить тег ниже).
4. Прописываем тег:
<link rel="manifest" href="/manifest.json">
MacOS, Safari:
1. Понадобится векторное изображение формата SVG.
2. Красим все элементы изображения в черный цвет, а фон выставляем прозрачным:
3. Прописываем тег:
<link rel="mask-icon" href="/img/icons/safari.svg" color="#00FF00">, где вместо 00FF00 вставляете код цвета в формате RGB. Цвет изменится на заданный при наведении.
Windows 8.1/10 (IE11/Edge):
В Windows, как обычно все сделано через анус. Нужна куча PNG‘шек разного разрешения, так что для минимальной совместимости можно сделать изображение размером 270x270 и добавить в HTML-код:
<meta name="msapplication-TileImage" content="/img/icons/windows.png">
За остальными форматами для Windows идите в источники.
1. Манифест? А? Что? Зачем?
2. Пишем правильный манифест для сайта
3. get_site_url()
4. Favicon сегодня: форматы, поддержка, автоматизация (копия)
5. Как сделать фавикон для сайта