Как сделать favicon для сайта.

Преамбула

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 на моменте создания изображения все сложности практически и заканчиваются:

1. Экспортируем изображение как PNG с размерами 512×512 пикселей.
2. Идем в админскую консоль Внешний вид —> Настроить:

3. Жмем Свойства сайта

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 онлайн

Есть, например, такой вот генератор 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” />


Устройства с 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. Как сделать фавикон для сайта

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *