Лучший размер фавикона в 2026 году

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

Размер 32×32 пикселей — наиболее важный размер значка для современных браузеров. Он используется для вкладки браузера на дисплеях Retina/HiDPI (отображается с плотностью 2x из логического размера 16 пикселей), для панели закладок и для значков подсказок в адресной строке. Chrome наиболее агрессивно запрашивает размер 32×32, а Google Search использует значок размером не менее 32×32 для значков результатов поиска.

Размер пикселей 48×48 используется в Windows Explorer в режиме «средние значки» и используется некоторыми поисковыми системами для миниатюр результатов. Официальная рекомендация Google по приемлемости поисковых значков — минимум 48×48 пикселей, квадратное соотношение сторон и общедоступность через HTTP. Всегда помещайте файлы размером 48×48 в файл .ico разного размера, чтобы удовлетворить этому требованию.

Размер 64×64 пикселей полезен в Windows Explorer при просмотре больших значков и для некоторых сред запуска приложений. Включение его в файл .ico увеличивает минимальный размер файла и обеспечивает покрытие любой поверхности, размер которой запрашивается от 48 до 128 пикселей. Большинство генераторов .ico с несколькими размерами по умолчанию включают 64.

Размеры 128×128 и 256×256 пикселей используются внутри файлов .ico для плиток меню «Пуск» Windows и ярлыков высокого разрешения. При размере 256×256 вам следует использовать сжатие PNG внутри .ico, а не кодировку BMP — одна только несжатая запись BMP 256×256 добавляет примерно 256 КБ к файлу .ico, а сжатая с помощью PNG она сжимается до менее 30 КБ.

Размер 180×180 пикселей — это размер apple-touch-icon, используемый iOS. Когда пользователь нажимает «Добавить на главный экран» на Safari, iOS получает `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` и использует это изображение в качестве значка на главном экране. Без этого iOS вернется к низкокачественному снимку экрана вашей страницы. Это единственный размер с наивысшим приоритетом для сайтов, ориентированных на мобильные устройства.

Размер 192×192 пикселей требуется в манифесте веб-приложения (site.webmanifest) для приглашения на установку PWA Android Chrome. Когда пользователь добавляет ваш сайт на свой главный экран Android, Chrome читает манифест и использует значок размером 192×192 для панели запуска приложений и панели уведомлений. Значок должен быть квадратным, в формате PNG и доступен по заявленному URL-адресу.

Размер 512×512 пикселей — это еще один обязательный значок манифеста, используемый для заставки PWA, которая появляется во время загрузки приложения после запуска главного экрана, а также для предварительного просмотра установки ОС Chrome. Это также рекомендуемый размер исходного изображения при создании всех других размеров — начиная с 512×512, чтобы каждый вариант с пониженной дискретизацией сохранял резкие края.

Минимальная жизнеспособная настройка фавикона, которая охватывает практически всех пользователей: favicon.ico разного размера, содержащий 16, 32, 48 и 64 пиксельных кадра, плюс файл apple-touch-icon.png размером 180×180, а также site.webmanifest с записями PNG 192×192 и 512×512. Эта комбинация обрабатывает стандартные браузеры, закладки, установки iOS на главном экране и установки Android PWA.

Добавление значка SVG вместе с .ico и набором PNG обеспечит безопасность вашего значка в будущем. SVG выполняет рендеринг с любой плотностью — один файл обслуживает мониторы с разрешением 96 точек на дюйм, дисплеи 4K и все, что между ними — и может переключать цвета в зависимости от предпочтений цветовой схемы пользователя. Chrome, Edge, Firefox и Safari 15+ поддерживают значки SVG с 2026 года, что делает их безопасным дополнением.

Распространенные ошибки при определении размера значка включают в себя: использование только PNG 32×32 без .ico (не работает в устаревших браузерах и ярлыках Windows), пропуск 180 apple-touch-icon (не работает при установке iOS) и исключение 512×512 из манифеста (в приглашении установки Android отображается общий значок). favicon generator автоматически генерирует полный набор из одного исходного изображения, устраняя все эти пробелы.

Влияние размеров значков на SEO косвенное, но реальное. Поиск Google отображает значки рядом с результатами поиска и применяет требования к минимальному размеру 48×48 пикселей. Сайты без значка подходящего размера и общедоступного значка могут видеть в результатах поиска общий значок глобуса вместо товарного знака — небольшая, но заметная разница в сигнале доверия для обычных поисковых кликов.

Для полноты значков уровня PWA добавьте в веб-манифест маскируемые значки. Маскируемый значок имеет отступы безопасной зоны примерно 10 % со всех сторон, гарантируя, что, когда Android применяет к значку круглую или изогнутую маску, основной логотип никогда не будет обрезан. Создайте отдельную маскируемую версию, используя опцию маскируемого экспорта генератора, и объявите ее с помощью `'purpose': 'maskable'` в массиве значков манифеста.

При выборе исходного изображения для создания значка отдайте предпочтение SVG, а не PNG и PNG, а не JPG. SVG обеспечивает высочайшую четкость изображения любого размера. PNG-32 (с альфа-каналом) сохраняет прозрачность. В JPG отсутствует поддержка прозрачности, и в нем возникают артефакты сжатия, которые появляются при небольших размерах. Полное сравнение форматов см. в руководстве best favicon format.