Что за программа favicon

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

• Главная»
• Уроки»
• Скрипты для увеличения функциональности сайта

В этой рубрике Вы найдете уроки, посвященные полезным скриптам для Вашего сайта, которые призваны улучшить его функциональность.

• 

Эффекты блочного раскрытия

Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.

Как сделать Favicon для сайта и зачем это нужно? // Уроки разработки // #VA

Автор/переводчик: Asad
Сложность:
Создан: 19 Июля 2017 Просмотров: 26379 Комментариев: 0

15 полезных .htaccess сниппета для сайта на WordPress

Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 3 Мая 2017 Просмотров: 13652 Комментариев: 0

20 бесплатных тем для WordPress в стиле Material Design

Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 14 Марта 2017 Просмотров: 8375 Комментариев: 0

20 сайтов с креативным MouseOver эффектом

Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

Автор/переводчик: Станислав Протасевич
Сложность:
Создан: 13 Февраля 2017 Просмотров: 12012 Комментариев: 0

45+ бесплатных материалов для веб дизайнеров за август 2016

Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

Источник: ruseller.com

Как создавать иконки сайтов в 2022 году — всё о favicon

Пришло время переосмыслить то, как мы создаем набор иконок для современных браузеров, и остановить безумные генераторы. Фронтенд-разработчики сейчас вынуждены создавать более 20 PNG-файлов, чтобы отобразить крошечный логотип веб-сайта на вкладке браузера или сенсорном экране. Статья расскажет, как использовать более разумный подход и создать минимальный набор иконок, соответствующий большинству современных потребностей.

FAVICONE — Что такое фавикон (Иконка favicon для сайта)

Статья глубоко погружается в тему, поэтому в начале я даю два фрагмента кода для тех, кто уже достаточно настрадался и понимает, что делать. Тем не менее, я всем рекомендую читать статью целиком!

Экстремально короткая версия

Вместо того, чтобы создавать десятки иконок, обойдемся созданием пяти иконок и одного файла JSON.

И файл веб-манифеста:

// manifest.webmanifest < «icons»: [ < «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» >, < «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» >] >

Вот и всё. Если вы хотите знать, как я к этому пришел, к каким компромиссом пришлось прибегнуть, и как поэтапно создать такой набор с нуля, читайте основную часть статьи.

Длинная версия, со всеми объяснениями

Концепция favicon (является сокращением от favorite icon, «любимая иконка»), существует с начала 2000-х годов. Мы каждый день видим эти милые маленькие изображения на панели вкладок браузера, они помогают нам различать открытые веб-сайты. Пользователи ожидают, что на вашем сайте будет favicon. Это одна из тех мелочей, которые заставляют людей относиться к вам серьезно.

Даже Apple, у которой всегда была какая-то эстетическая война с иконками (их не принимали в Купертино, скрывая favicon в Safari в течение многих лет) наконец-то сдалась и теперь правильно отображает их на всех своих устройствах.

Если у вас есть общедоступный веб-сайт, у него должен быть favicon. Многие люди думают, что одной иконки хватит для всех устройств, но, к сожалению, это не так.

Как правило, изнурительную задачу создания всех необходимых файлов для постоянно растущего списка экранов и устройств перекладывают на инструменты генератора favicon. Никто в здравом уме никогда не захочет тратить часы на создание их вручную. В конце концов, мы здесь для того, чтобы создавать веб-сайты, а не для того, чтобы удовлетворять прихоти различных браузеров.

Как создатель Nano ID и сторонник минималистичных библиотек, я предпочитаю думать иначе. Какой самый эффективный набор иконок веб-сайтов? Какие форматы устарели? Какие типы значков можно заменить с небольшими компромиссами?

Таким образом, я поставил перед собой цель создать минимальный список favicon, которые будут работать во всех случаях и во всех браузерах, за исключением некоторых редких случаев, но даже там всё будет работать, просто не на 100% идеально.

Идеальный набор Favicon

Вместо того, чтобы создавать много изображений разных размеров, я решил полагаться на SVG и масштабирование браузера. Не волнуйтесь по поводу производительности:

• Браузеры загружают favicon в фоновом режиме, поэтому большой размер favicon-файла не влияет на производительность веб-сайта.
• SVG — отличный способ уменьшить размер иконки для изображений, которые не должны быть растровыми; для многих логотипов результирующий файл будет намного меньше, чем PNG.
• Имея всего 3 PNG-файла, можно позволить себе оптимизировать их сильнее, хитро подбирая параметры в сложных инструментах. Это решит проблему тех пользователей, которые платят за каждый МБ на своём интернет-тарифе.

Теперь перейдём к тому минимальному набору, который я вывел из своих исследований и экспериментов. Этот список должен работать со всеми популярными браузерами и устройствами, как старыми, так и новыми.

favicon.ico для устаревших браузеров
Файлы ICO могут содержать внутри несколько версий изображения под разный размер. Я рекомендую придерживаться одного изображения размера 32 × 32. Версию 16×16 стоит создавать только если логотип не становится слишком размытым или ваш дизайнер вручную может перерисовать его под этот размер.

Именно этот файл лучше держать по точному адресу: https://example.com без кеш-бастеров и хитрых путей. Значок должен быть на https://example.com/favicon.ico . Некоторые инструменты, такие как RSS-ридеры, просто запрашивают /favicon.ico с сервера и не утруждают себя поиском в другом месте.

Значок Apple touch — это изображение для рабочего стола iPhone или iPad. На вашей HTML-странице должен быть тег внутри .

Начиная с iOS 8+, для iPad требуется изображение с разрешением 180 × 180. Более старые устройства уменьшат его масштаб. Вопрос производительности пояснён выше.

— Манифест веб-приложения — это файл JSON, содержащий все сведения, необходимые браузеру для установки вашего веб-сайта в качестве системного приложения. Этот формат появился у Google в рамках инициативы PWA.

— Ваша HTML-страница должна содержать тег со ссылкой на файл манифеста.

Мы кого-то забыли?

Конечно, есть и другие варианты favicon. Дальше я объясняю, почему они устарели. Возможно, пришло время попрощаться с некоторыми менее успешными форматами.

Значок плитки Windows

Microsoft Edge раньше поддерживал специальный формат значков для прикрепления веб-сайтов к меню «Пуск». Для последних версий Windows это больше не требуется.

Закрепленный значок Safari

Ранее в Safari требовался монохромный значок SVG для закрепленных вкладок. Однако, начиная с Safari 12, мы можем использовать обычный значок для закрепленных вкладок. Даже apple.com больше не использует mask-icon .

rel=”shortcut”

Многие (ныне устаревшие) руководства будут включать значок favicon.ico в HTML, как тут:

Имейте в виду, что shortcut не является и никогда не был допустим в отношении ссылки. Прочтите эту удивительную статью Матиаса Байненса десятилетней давности, в которой объясняется, почему нужно писать просто icon , а не shortcut icon .

Yandex Tableau

Яндекс Браузер — это браузер на базе Chromium от крупнейшей российской поисковой системы. В России его доля на рынке составляет 20%. У него есть приятная функция, которая позволяет веб-сайту отображать текущие данные в виджетах на главном экране с помощью специального JSON-манифеста, предоставляемого ссылкой yandex-tableau-widget . Однако эта функция оказалась не очень популярной, и теперь Яндекс удалил соответствующую техническую документацию со своего сайта. Обычные манифесты значков будут работать также хорошо.

Opera Coast

В прошлом, Opera Coast — экспериментальный браузер для iOS, требовал специального значка размером 228×228. Этот браузер покинул App Store в 2017 году, и я сомневаюсь, что с тех пор он пережил многочисленные обновления iOS.

Теперь, когда мы попрощались с нашими павшими товарищами, давайте посмотрим, как создать идеальный набор favicon для тех, кто всё ещё стоит на ногах.

Как создать окончательный набор favicon

Вот как создать наш идеальный минималистичный набор значков за шесть быстрых шагов. Всё, что нам нужно для начала, — это SVG-файл логотипа, который вы хотите использовать.

Шаг 1: Подготовка SVG

Убедитесь, что изображение в формате SVG имеет квадратную форму. Откройте исходный файл в вашем системном средстве просмотра и проверьте ширину и высоту изображения. Размер SVG легко настроить с помощью любого редактора SVG. В Inkscape вы можете изменить размер документа, выбрав File → Document Properties , а затем отцентровать логотип с помощью Object → Align и Distribute .

Сохраните ваш файл в формате icon.svg . Теперь давайте поработаем с SVG и сделаем так, чтобы он хорошо сочетался с современными системными темами. Спросите своего дизайнера, как следует инвертировать цвета для темной темы (в черно-белых логотипах вы просто меняете черный на белый).

Теперь откройте свой SVG-файл в текстовом редакторе. Найдите с темной или отсутствующей заливкой. Добавьте медиа-выражение CSS, которое будет запускаться при изменении темы, и измените заливку на нужные вам цвета:

Вы также можете использовать этот метод с медиа-выражением в SVG, чтобы добавить цвета P3 с широкой гаммой к вашим значкам.

Шаг 2: Создание ico файла

Откройте свой файл icon.svg в редакторе растровой графики. Я рекомендую GIMP; он бесплатный и мультиплатформенный.

Согласитесь на конвертацию SVG в растр. Установите ширину и высоту равными 32 пикселям. Экспортируйте файл в favicon.ico с использованием настроек: 32 бит/с, 8-битный альфа-код, без настроек палитры (32 bpp, 8-bit alpha, no palette).

Если у вас нет GIMP, вы можете установить Inkscape и ImageMagick и преобразовать SVG в ICO в терминале:

inkscape ./icon.svg —export-width=32 —export-filename=»./tmp.png» # In Windows call `magick convert ./tmp.png ./favicon.ico` convert ./tmp.png ./favicon.ico rm ./tmp.png

Уменьшите масштаб изображения до 16×16 и проверьте, как значок выглядит. Если он стал слишком размытым, лучше попросить вашего дизайнера сделать крошечную версию логотипа на заказ.

Чтобы включить отдельную версию значка размером 16×16:

1. Откройте значок favicon.ico со значком 32×32.
2. Создайте новый слой размером 16×16.
3. Поместите в этот слой версию значка размером 16×16.
4. Экспортируйте файл. GIMP сохранит каждый макет как отдельную версию значка.

Или вы можете сделать то же самое в ImageMagick с помощью:

convert ./icon-32.png ./icon-16.png ./favicon.ico

Шаг 3: Создание png изображений

Снова откройте исходный SVG-файл в редакторе растровой графики и создайте изображение размером 512×512. Экспортируйте его в виде icon-512.png .

Масштабируйте изображение до 192×192 и экспортируйте его в icon-192.png . Теперь масштабируйте само изображение до 140×140 и установите размер холста 180 ×180, а затем экспортируйте его в формате apple-touch-icon.png .

Или вы можете сделать то же самое в Inkscape:

inkscape ./icon.svg —export-width=512 —export-filename=»./icon-512.png» inkscape ./icon.svg —export-width=192 —export-filename=»./icon-192.png»

Шаг 4: Оптимизация SVG и PNG файлов

Лучшее средство для оптимизации svg — это SVGO. Чтобы использовать его, запустите:

npx svgo —multipass icon.svg

Squoosh — отличное веб-приложение для оптимизации растровых изображений:

1. Откройте icon-512.png в Squoosh.
2. Измените настройку сжатия на OxiPNG .
3. Включите уменьшение палитры: “Reduce palette”.
4. Установите 64 цвета.
5. Сравните «до» и «после», перемещая ползунок. Если вы видите разницу, увеличьте количество цветов.
6. Сохраните файл. Повторите эти действия для icon-192.png и apple-touch-icon.png .

Шаг 5: Добавление иконок в HTML

Вам нужно добавить ссылки в favicon.ico и в apple-touch-icon.png в ваш HTML.

Для статического HTML:

My website + + +

Тем не менее, мы рекомендуем использовать пакет для создания cache busters (хеш файла в имени, чтобы при изменении файла браузер скачал новую версию). Если вы используете Webpack с [html-webpack-plugin] :

1. Создайте index.html шаблон.
2. Добавьте шаблон в параметры плагина:

new HtmlWebpackPlugin(< template: «./view/index.html» >);
My website «> » >

Шаг 6: Создание web app manifest

Для статического HTML создайте JSON-файл с именем: manifest.webmanifest :

И добавьте в свой html-файл:

My website +

При работе с Webpack вы можете использовать плагин webpack-pwa-manifest:

plugins: [ …, new WebpackPwaManifest(< name: ‘My website’, icons: [ < src: resolve(‘./icon-192.png’), sizes: ‘192×192’ >, < src: resolve(‘./icon-512.png’), sizes: ‘512×512 >] >) ]

Спасибо вам за чтение! С современными веб-стандартами легко создать свой набор значков даже руками. Но это не значит, что мы против автоматизации. Если у вас есть, что добавить к набору иконок — пишите мне в Твиттер.

Перевод: Михаил Гок

Генератор иконок по заветам этой статьи.

Источник: habr.com

Подробное руководство по фавикону для сайта

Favicon (или «значок для избранного») — иконка страницы или сайта. Обычно фавикон для сайта содержит логотип, первую букву названия компании или же любое другое изображение, которое соответствует тематике бизнеса. Значок отображается браузером в открытой вкладке, закладках около URL сайта. Также он появляется в виде ярлычка на смартфоне, если пользователь вынесет сайт на рабочий стол. Поговорим о фавиконах подробнее, расскажем, зачем они нужны.

Зачем используются фавиконы

• Выделяет сайт в выдаче. Favicon всегда привлекает внимание, без него сниппет не так заметен на фоне других, кажется, что чего-то не хватает.
• Запоминаемость. Иконка — элемент бренда. Пользователь быстрее запомнит вавилоны и свяжет его с определенным брендом, если будет видеть значок на разных площадках.
• Упрощает поиск нужного сайта. В истории или закладках проще искать сайт не по заголовкам, а ориентируясь на картинку.
• Избавляет от ошибки в лог-файлах. Браузеры запрашивают файл favicon.ico, если они не находят строку с указанным фавиконом, сервер в логах ставит 404-ошибку.

О выборе картинки

Изображения подбирать можно разные. Все зависит от личных предпочтений и ваших задач:

1. Контрастные. Если раньше любая иконка бросалась в глаза, поскольку мало какие сайты ее ставили, сейчас все иначе. Выделиться на фоне конкурентов непросто, приходится экспериментировать. Самый простой вариант привлечь внимание — установить контрастную яркую иконку. Это может быть даже указывающая на сайт стрелка.
2. Тематические. Представительский ресурс (корпоративный сайт компании, онлайн-магазин) лучше всего дополнит логотип бренда. Если лого целиком не влезает, используйте фрагмент, этот совет пригодится для вытянутых, детализированных, сложных изображений. Когда логотипа нет, стоит подыскать картинку, которая будет по цвету ассоциироваться с тематикой сайта.
3. Упрощенные. Favicon на вкладках и в выдаче очень маленький. Рассмотреть детально изображение не выйдет, так что можно подобрать картинку с минимумом деталей, состоящую из 2-3 оттенков. Главное в данном случае — лаконичность, соответствие тематике, однозначность прочтения.
4. Оригинальные. Иконка не будет выделять ваш ресурс в выдаче, если у конкурентов такие же картинки. Так что банальные и популярные картинки лучше не брать.

Что лучше выбрать — смотрите сами. Можно использовать несколько вариантов, посмотреть, как они выглядят в браузере или на рабочем столе смартфона. Ваша задача — выделиться и привлечь внимание. Если увидите, что одна из иконок справляется с ней лучше всего смело ставьте такой фавикон.

Рекомендуемые решения

14 900 руб.

14 900 руб.

Программы: как сделать favicon

На первый взгляд, самым простым способом создания фавикона кажется простое переименование файла в нужный формат. Рассмотрим на примере. У вас есть файл favicon.png, а нужен favicon.ico. Достаточно переписать расширение, и все будет готово. Вот только это не лучший вариант.

Простое переименование приводит к тому, что во многих браузерах значок отображается с ошибкой или не отображается вообще. Потратьте время и сделайте иконку в специальном сервисе. Популярные:

• Realfavicongenerator.net — генерирует фавиконки разных размеров онлайн. Подгружайте исходник 260*260 пикселей, лучше всего квадратной формы, но это не строгое ограничение. После выбирайте настройки для всех популярных операционных систем — Сафари, Windows Phone, Андроид, iOS. Запрограммируйте степень сжатия — варианты возможны разные. В итоге получится набор из иконок разных типов, код для вставки в адресную строку.
• Favicon.ru — тут удобнее всего рисовать иконки вручную, есть большой выбор готовых решений (используйте, как есть, либо редактируйте). В один клик можно преобразовать файл в заданный формат. Платно доступны профессиональные дизайнерские услуги.
• Pr-cy.ru — в сервисе много разделов, выбирайте фавиконы и обрабатывайте картинки под иконки сайтов. Указывайте формат, размер, сохраняйте результат.
• Favicon.cc — программка для создания favicon в формате ICO. Загружайте готовое изображение или делайте отрисовку самостоятельно с применением стандартного набора инструментов в графическом редакторе.

На каждом сайте есть мануал о том, как сделать значок самостоятельно. Если текстовые инструкции вам не нравятся, поищите видеоруководства на ютубе.

Как сделать иконку для сайта

Существует несколько распространенных схем отрисовки. Воспользуйтесь специальным плагином для Photoshop или программками для изготовления фавиконов, заточенными под отрисовку иконок для сайтов любых тематик.

Онлайн генераторы favicon

Наиболее доступный и простой способ — подгрузить картинку в специальный конструктор. Автоматический генератор сам сделает иконку из предложенного вами изображения с учетом требований к фавиконам. Готовый результат будет намного более красивым, если кадрировать донор до квадрата.

Функциональный, профессиональный вариант. Ограничение одно — Фотошопом нужно уметь пользоваться. Инструменты используйте любые, можно делать корректировки до достижения оптимального результата.

Бесплатные готовые favicon

Загружайте Яндекс.Картинки либо используйте другой ресурс поиска изображений, который вам нравится. В строке поиска указывайте запрос «готовый фавикон». После жмите «Искать», выбирайте любой вариант из тысяч предложенных. Простой, бесплатный, работающий метод от идеала далек. Рекомендуем его как временный — другой вебмастер может скачать аналогичную картинку (или это уже сделано, и не один раз).

Лучше потратить немного времени и создать уникальную favicon.

Правила установки иконки на сайт

Установить фавикон на сайт самостоятельно не трудно, в этом вам поможет наше руководство. Пропишите корректное имя — обычно это favicon.ico, но другие типы расширений тоже допустимы. Помните, что старые версии браузеров не могут корректно определить иконку, если она будет в другом формате. До загрузки откройте откройте свойства файла и убедитесь, что требуемый вам вариант есть и в названии файла, и в его типе.

Делайте кроссплатформенные иконки. Корректно пропишите форматы для различных мобильных платформ, браузеров, укажите оптимальные размеры. Современные браузеры, роботы при отображении картинок сами подбирают оптимальный формат из всех загруженных. Отображаться он будет лучше, чем в случае с ресайзом, когда фавикон загружен только один, его нужно менять под заданные параметры. Рекомендуем сервис realfavicongenerator.net.

После можно будет положить файл в корневую директорию сайта, протестировать его корректность. Введите в строку браузера «yoursite.com/favicon.ico» для файлов ico формата, для других укажите соответствующее расширение. Браузер должен корректно отобразить иконку. Затем прописывайте адрес в коде главной страницы тега.

Это требование желательное, но не обязательное — браузеры последних версий автоматом ищут фавиконы в корневом каталоге. Тег head позволяет задавать собственные иконки с разных страниц сайта.

Примеры с тегами:

В гаджетах бренда Apple иконки автоматом скругляются по углам, избежать этого поможет код apple-touch-icon-precomposed — вводите его вместо apple-touch-icon.

Рекомендуемые решения

Инструкция для wordpress

От WordPress 4.3 версии фавиконы можно добавлять из админки системы управления. Порядок действий:

1. Откройте админку.
2. Выберите пункт «Внешний вид» > «Настройки» > «Свойства вашего сайта».

Рекомендуем сначала выполнить тест на локальном сайте разработки, если все будет в порядке, повторите действия по инструкции в основном меню.

Инструкция для теста на локальном сайте:

1. Откройте файлы темы, там найдите FTP-клиент либо менеджер файлов.
2. Найдите папку под названием /wp-content/themes/your-theme и кликните по ней.
3. Загрузите иконку в любую подпапку (Assets либо другую).
4. Запомните путь к указанному файлу.
5. В function.php пропишите путь к фавикону.

Путь будет выглядеть примерно так:

function add_favicon() add_action(‘wp_head’, ‘add_favicon’),

после href=«‘.get_template_directory_uri() в строке должен быть прописан путь к выбранному значку.

Проверьте все еще раз, имя файла должно быть указано корректно. Если вы выбрали .ico формат, путь будет выглядеть так:

Инструкция для Bitrix

Для Битрикс доступно несколько схем размещения. Первая — для одного шаблона. Если на сайте используется один шаблон, где нет собственного favicon.ico файла:

1. Подготовьте картинку, расширение которой составляет 16*16 пикселей, форма подойдет jpg либо png.
2. Переименуйте иконку в ico.
3. В корневой папке файловой структуры сайта (1) найдите ico (2) и замените его на свой файл.

После новый favicon.ico сразу начнет отображаться вместо старого. Старый может быть закеширован браузером, тогда он будет отображаться и дальше. Если эффекты наложились, нужно откорректировать настройки. Откройте сайт с разных браузеров и компьютеров, чтобы убедиться в корректности работы и загрузки иконок. Предварительное тестирование позволит своевременно обнаружить ошибки.

Следующая схема — несколько шаблонов. Первый способ реализуется только в том случае, если в единственном шаблоне отсутствует собственный файл favicon.ico. При наличии в шаблоне своей иконки ситуация усложняется. Приоритет иконки из шаблона намного выше, чем приоритет favicon.ico файла в корне сайта. Сделано это для того, чтобы каждый шаблон можно было использовать с собственной иконкой.

Пример — когда сайт поделен на разделы, у каждого раздела могут быть свои иконка и шаблон.

Нужны дополнительные права для доступа к редакторской панели шаблонов сайта — их дает администратор. Действия рассмотрены для одного шаблона, при необходимости изменить иконку для каждого, нужно выполнить ряд операций для каждого шаблона в отдельности. Инструкция:

1. Подготовьте картинку, она должна иметь размеры 16*16 пикселей, допустимые форматы — jpg, png (на ваше усмотрение).
2. Переименуйте текущий файл в ico.
3. Подгрузите файл в папку шаблона (схема выглядит так: контент—структура площадки—папки и файлы—bitrix—templates—имя шаблона—файл (2)).

Готово — проверяйте, новый favicon.ico файл должен отражаться вместо старого.

Важный момент. Старые файлы favicon.ico часто закешированы браузером, поэтому могут пропадать, не отображаться, усложнять отображение новых, только что загруженных. Иногда бывает, что даже после замены иконки показывается старая картинка. Если не хотите ждать, пока информация обновится, добавьте к названию файла внутри шаблона через вопросительный знак (это обязательно) код v=2. Примерный вид готовой строки:

Почему фавикон не отображается в выдаче?

Индексация иконок в Яндексе требует не менее недели, иногда месяц. В выдаче Google фавиконок вообще нет.

Влияет ли картинка на ранжирование в поисковых системах?

Иконки никак не влияют на SEO и отношение поисковиков к сайту, но могут оказывать косвенное влияние на кликабельность сниппета и трафик. Это происходит за счет того, что ссылка в выдаче становится чуть привлекательнее. То есть вы как владелец ресурса выигрываете.

Делать несколько размеров обязательно или нет?

Можно установить один универсальный размер, но на некоторых устройствах он может выглядеть нечетко, расплывчато. Так что лучше потратить время и сделать набор иконок разных размеров, это даст гарантию корректного отображения.

Можно ли посмотреть, как видит фавикон ПС?

Да, используйте URL:

• https://www.google.com/s2/favicons?domain=имя_домена для Гугл;
• https://favicon.yandex.net/favicon/имя_домена в Яндексе.

Вы увидите, как отображается фавикон, нужно ли что-то исправить. Напоминаем, что для индексации иконок требуется время.

Источник: martsoft.ru