Как сделать 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 на моменте создания изображения все сложности практически и заканчиваются:
( Favicon в Wordpress )
К сожалению, 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” />( Остальные устройства )
1. Манифест? А? Что? Зачем?
2. Пишем правильный манифест для сайта
3. get_site_url()
4. Favicon сегодня: форматы, поддержка, автоматизация (копия)
5. Как сделать фавикон для сайта
Это репост с сайта http://tolik-punkoff.com
Оригинал: http://tolik-punkoff.com/2020/08/04/kak-s