Статичный фавикон Буква_О

Урок: кроссплатформенный фавикон.

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

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

Favicon - это акроним от английского Favorite icon (фаворитная, любимая иконка).

Favicon - немаловажный элемент веб-ресурса, своеобразный идентификатор сайта. Этот маленький значок перед названием страницы отображается на вкладках и закладках браузеров, в адресной строке и делает сайт узнаваемым. Изначально значок сайта использовался браузером IE для избранных страниц в закладках (значок для избранного).

Поисковая выдача яндекса:

фавиконка в поисковой выдаче яндекса

Когда открыто много вкладок, легко находим нужную по фавиконке. Так выглядят фавиконки на вкладках настольного браузера:

Находим нужную страницу по фавиконке

Однако, различным десктопным браузерам требуются свои размеры и форматы фавиконок. Android-устройства и гаждеты Apple также адаптированы под определенные форматы и размеры фавиконок в зависимости от PPI - разрешающей способности дисплея. То есть, не бывает кроссплатформенной фавиконки. Чтобы значок сайта или страницы корректно отображался на всех устройствах, нужен набор фавиконов. Для подготовки такого набора и подключения каждой фавиконки к соответствующей платформе понадобилось бы немало трудов и времени.

На помощь приходит ресурс Фавикон сайта RealFaviconGenerator.net RealFaviconGenerator.net

На главной странице сервиса нажав кнопку "Выберите изображение своего фавикона", берем с компьютера подготовленную картинку с рекомендованным размером не менее 260х260 пикселей формата PNG,JPG,SVG:

Берем с компьютера подготовленную картинку

Для тестирования я нарисовал вот такой PNG-значок в 512х512 пикселей на прозрачном фоне: Значок для фавиконки 512х512 рх и отправил его на сервис.

Как только картинка загрузилась, открывается страница предпросмотра фавиконок. Посмотрим что нам предлагает генератор.

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

Фавикон для настольных браузеров и выдачей Google

На эппловских устройствах черный фон по умолчанию можно заменить любым другим:

Фавикон для iOS

В разделе "Активы" назначаем версии ОС:

Фавикон для iOS

Для андроидов опции можно оставить по умолчанию. Пропишем адрес сайта для которого готовится фавикон:

Фавикон для андроидов

Для плиточного интерфейса Windows Metro лучше использовать версию фавикона с белым силуэтом:

Используем версию фавикона с белым силуэтом

Сафари хорошо воспринимает картинки, как поясняют, на прозрачном фоне:

Используем картинку с прозрачным фоном

После редактирования дизайна иконок, в блоке "Параметры генератора Фавиконов" путь размещения файлов фавиконок оставляем по умолчанию (в корневой папке сайта) и нажимаем кнопку "Создайте свои фавиконы и HTML-код":

Кнопка

Открывается блок "Установите свой фавикон", где скачиваем заархивированный пакет с фавиконками и копируем коды для вставки в голову страницы:

Кнопка

Из архива извлекаем фавиконки и все их кладем в корневую папку сайта. Скопированные коды вставляем между головными тегами страницы сайта:

Фрагмент HTML-кода страницы сайта

Так устанавливаются фавиконы на отдельную страницу сайта. Для сайтов построенных на CMS (WordPress, Joomla!) фавиконки встраиваются через панель управления в корень каталога активного шаблона.

После размещения на сайте картинок и записей можно проверить фавиконки. Кнопка "проверьте свой значок" открывает страницу "Проверка фавикона". В поле нужно вписать адрес сайта и нажать кнопку "Проверьте фавикон":

Страница

И сервис открывает страницу "Проверка фавикона" на которой будет представлен анализ сгенерированных фавиконок для данного сайта.

Так, с помощью онлайн-генератора производим кроссплатформенный набор фавиконок.

урок написан 11.02.2022

поделитесь темой в социалках:

Яндекс.Метрика

Темы и статьи