Почему покрытие favicon так важно
Дело уже не только во вкладке браузера. Вот почему вам нужен полный набор иконок.
Что такое app icons?
App icons — это изображения, которые вы нажимаете на своём смартфоне, чтобы запустить приложение. По мере выхода новых телефонов с экранами более высокого разрешения требуются app icons более высокого разрешения. Разработчики при этом хотят сохранить поддержку старых телефонов с меньшим разрешением, поэтому при создании app icon нужно создать несколько размерных вариаций одного и того же изображения. Это верно для всех смартфонов, таких как iPhone и Android, и даже для планшетов вроде iPad.
Что делает этот инструмент?
Хотя многие современные браузеры поддерживают favicon, сохранённые как GIF, PNG или другие популярные форматы, все версии Internet Explorer по-прежнему требуют, чтобы favicon сохранялись как файлы ICO (формат иконок Microsoft). Этот инструмент предлагает простой способ конвертировать любой GIF, PNG или JPEG в ICO, который поддерживается всеми современными браузерами. Он также позволяет создавать favicon с нуля через онлайн-редактор и вручную настраивать сгенерированные favicon, чтобы получить нужный результат.
Использование favicon
После генерации favicon с помощью этого инструмента скачайте его и сохраните в корневой каталог вашего сайта. Затем включите следующий код в head вашего HTML-документа.
<link href="https://www.example.com/favicon-32x32.png" rel="shortcut icon" type="image/x-icon">
<link href="https://www.example.com/apple-touch-icon.png" rel="apple-touch-icon">Почему полное покрытие важно
| Поверхность | Что даёт покрытие |
|---|---|
| Домашние экраны мобильных устройств | Пользователи часто добавляют сайты на домашние экраны в iOS и Android. Без специальных touch icons ваш сайт будет выглядеть как обычный скриншот или стандартный плейсхолдер, что вредит профессиональному облику вашего бренда. |
| SEO и результаты поиска | Google и другие поисковые системы часто показывают favicon рядом с результатами поиска. Чёткая, качественная иконка может повысить кликабельность и помочь пользователям мгновенно узнать ваш бренд. |
| Доверие к бренду | Несогласованность разрушает доверие. Если ваша иконка выглядит чёткой во вкладке, но размытой на панели закладок или отсутствует на планшете, это сигнализирует о недостатке внимания к деталям. Полное покрытие обеспечивает пиксель-в-пиксель точный брендинг повсюду. |
| Интеграция с платформами | От плиток меню «Пуск» в Windows до закреплённых вкладок macOS и списков для чтения Safari — разные операционные системы используют уникальные форматы. Предоставление их всех гарантирует, что ваш сайт будет ощущаться нативным на устройстве пользователя. |
Посмотрите на практике
Когда сайты реализуют надлежащее покрытие favicon, их иконки последовательно отображаются на всех платформах и в любых контекстах. Обратите внимание, как favicon этих крупных компаний мгновенно делают их ссылки узнаваемыми во вкладках браузера, закладках, результатах поиска и при публикации. Такая визуальная согласованность выстраивает узнаваемость бренда и доверие: пользователи могут распознать ваш сайт с первого взгляда, даже в переполненных списках или результатах поиска.
Без надлежащего покрытия favicon ваши ссылки отображались бы как обычные плейсхолдеры или битые изображения, из-за чего пользователям сложнее узнавать ваш бренд, а кликабельность снижается. Вот примеры компаний, которые вложились в полное покрытие favicon:
netflix.com, apple.com, google.com, microsoft.com, amazon.com, meta.com, x.com, youtube.com, github.com, spotify.com, adobe.com, nvidia.com, tesla.com, uber.com, airbnb.com, stripe.com, shopify.com, notion.so, figma.com, dropbox.com, linkedin.com, instagram.com, tiktok.com, discord.com, slack.com, zoom.us, salesforce.com, oracle.com, ibm.com, intel.com, paypal.com, reddit.com и twitch.tv.
Иконки, которые мы поддерживаем
Разбор каждого типа файла, который генерирует наш инструмент, и где он используется.
| Размеры | Где используются | Примечания |
|---|---|---|
| 180x180, 120x120, 60x60 | Apple touch icons, iPhone и Retina | Используются для различных поколений iPhone, чтобы ваша иконка выглядела чёткой на плотных Retina-дисплеях. |
| 167x167, 152x152, 76x76 | Apple touch icons, iPad и планшеты | Домашние экраны iPad отображают иконки в иных размерах, чем телефоны. |
| 57x57, 72x72 | Apple touch icons, устаревшие iOS | По-прежнему включаются для старых устройств, которые могут быть в обращении, чтобы максимизировать совместимость. |
| 192x192, 512x512 | Android и Chrome, через manifest | Устройства Android полагаются на PNG высокого разрешения, и 192x192 — это стандарт для ярлыков на домашнем экране. При наличии manifest он не всегда генерируется как отдельный файл, но наш инструмент отдаёт приоритет android-icon-192x192.png для прямого связывания и включения в manifest, чтобы подсказки «Добавить на домашний экран» и splash-экраны работали. |
| 32x32 | Стандартный favicon, вкладки современных десктопных браузеров | Золотой стандарт: достаточно детализации для retina-дисплеев и при этом небольшой размер файла. |
| 16x16 | Стандартный favicon, адресные строки и списки закладок | Классический размер. Незаменим для не-retina экранов и строгих контекстов 16px. |
| 96x96 | Стандартный favicon, ярлыки на рабочем столе и Google TV | Также используется некоторыми специализированными контекстами браузера, которым требуется более крупное растровое изображение. |
| 144x144 | Плитки Windows, ms-icon-144x144.png | Когда пользователь закрепляет ваш сайт в меню «Пуск» Windows, Windows ищет определённые мета-теги и изображения. Мы также генерируем метаданные цвета плитки, чтобы они соответствовали палитре вашего бренда. |
Один и тот же знак, в размерах, которые важны
Другие соображения
| Соображение | Деталь |
|---|---|
| Web app manifest | Современные возможности PWA (Progressive Web App) сильно зависят от файла manifest.json. Этот файл сообщает браузеру, как ваше приложение должно вести себя при установке, включая то, какие иконки использовать. Наш инструмент генерирует его автоматически. |
| Theme color | Мета-тег theme-color настраивает цвет панели инструментов браузера на мобильных устройствах, обеспечивая более погружающее ощущение, которое соответствует дизайну вашего сайта. |
| SVG favicon | Хотя мы делаем акцент на широкой совместимости с PNG, современные браузеры начинают поддерживать SVG favicon (link rel="icon" type="image/svg+xml"). Они отлично масштабируются, но по-прежнему требуют резервных вариантов в PNG для полной поддержки, например в Safari или старых браузерах. |