![[info]](http://lj.rossia.org/img/userinfo.gif){kind=small}
Как сделать favicon для сайта.
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Для начала понадобится какое-нибудь изображение, лучше всего квадратное, в смысле в квадрат вписывающееся. Я не долго думая, просто взял любимый векторный редактор и нарисовал простенький логотип для иконки, пока размером 512x512. Впрочем, пока готовишь изображение, размер не особо важен, наоборот, чем больше, тем лучше, особенно, если работаешь в растре. Векторному редактору-то фиолетово, он выходное изображение может в любом разрешении без проблем создать.
Для современных версий движка Wordpress на моменте создания изображения все сложности практически и заканчиваются:
1. Экспортируем изображение как PNG с размерами 512x512 пикселей.
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.png2. В секции
<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, 48x482. Далее потребуется инструмент для сборки иконки icon sushi Копия
3. Открываем все нужные изображения (File --> Open...)
4. Выделяем их в окне программы.
5. Сохраняем иконку (File --> Save as Multiple Icon) под именем
favicon.ico6. Заливаем ее в корень сайта.
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.png2. Прописываем тег:
<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. Как сделать фавикон для сайта
Это репост с сайта http://tolik-punkoff.com
Оригинал: http://tolik-punkoff.com/2020/08/04/kak-s