Как создать фавикон из логотипа (разбираем все размеры)

Чтобы создать фавикон из логотипа, начни с квадратного логотипа (SVG или PNG размером 512x512 или больше). Экспортируй favicon.ico, желательно с версиями 16, 32 и 48 пикселей внутри, затем добавь иконку Apple 180x180 и PNG 192/512 для манифеста и добавь ссылки на них в HTML. Это пять файлов (ICO, SVG, иконка Apple и два PNG для манифеста), а не дюжина. Вот как сделать каждый из них и куда их поместить.

Короткий ответ: какие файлы фавикона тебе нужны

Современный минимальный набор — это один ICO, один SVG, одна иконка Apple Touch и два PNG для манифеста. Отдельные PNG 16/32/48 и изображения плиток Microsoft не нужны, если у тебя есть многоформатный ICO.

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

Объяснение размеров фавикона: для чего нужен каждый

favicon.ico (16, 32, 48)

ICO — это контейнер, хранящий несколько битмапов в одном файле. Стандартный набор качества включает 16, 32 и 48 пикселей; добавляй 256 только если тебе важны крупные иконки Windows.

Его всё же стоит иметь. Краулеры, читатели лент и боты предпросмотра ссылок обычно по умолчанию запрашивают /favicon.ico из корня сайта. Chromium ведёт себя иначе: в опубликованном тесте запросов он загружал /favicon.ico только тогда, когда на странице не была объявлена другая иконка. При объявлении SVG он запрашивал только SVG и предпочитал ICO отдельным ссылкам PNG.

Пропусти отдельный PNG 32x32. Некоторые руководства перечисляют его, но этот тест показал, что он не используется при наличии ICO. Тест охватывал только Chromium, поэтому поведение Firefox и Safari не проверялось.

favicon.svg

SVG-фавиконы работают в Chrome 80+, Firefox 41+ и Edge. Поддержка в Safari появилась недавно и работает нестабильно, а на iOS Safari SVG-фавиконы вообще не работают. Считай SVG дополнением, никогда не заменяй им ICO.

apple-touch-icon (180x180)

180x180 — это размер для Retina iPhone (60pt при 3x). Одного файла 180px достаточно: iOS масштабирует его для других устройств, включая iPad.

Иконки манифеста (192 и 512)

Android Chrome и установленные веб-приложения считывают иконки из манифеста веб-приложения. Файл 192px — это иконка запуска, а файл 512px — иконка установки/заставки.

Что нужно Google Search

Google считывает иконку с твоей главной страницы. Подходит любой формат фавикона, включая ICO, PNG и SVG. Он должен быть квадратным и размером не менее 8x8 пикселей. Google рекомендует размер больше 48x48, кратный 48, и даёт одну иконку на хостнейм. Если иконка неподходящая, Google подставляет стандартную иконку глобуса.

Подготовь логотип перед экспортом

Квадратный, крупный и прозрачный

Лучший источник — SVG. В противном случае используй квадратный PNG размером 512x512 или больше. Только уменьшай масштаб: переход от 1024px к 16px сохраняет детали краёв, а от 32px к 16px — нет, увеличение же просто создаёт размытие.

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

Сохраняй PNG прозрачным и в цветовом пространстве sRGB. Не объединяй слои и не добавляй фон «на всякий случай».

Может ли фавикон быть JPG? Да, но PNG или SVG чище. У JPG нет прозрачности, поэтому конвертация JPG в ICO даст тебе залитый квадрат, а артефакты сжатия будут видны в крошечных размерах.

Упрости для 16 пикселей

Полный логотип с девизом превратится в кашу во вкладке браузера. Работают следующие принципы:

• Один выразительный графический знак с высоким контрастом
• Два или три плоских цвета
• Максимум один или два жирных символа, без текстового знака

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

Совет: используй два изображения для лучшего ICO

Для максимального качества используй упрощённую графику для размеров 16 и 32 и более детализированную для 48 и 256. Создай два ICO, затем используй упрощённый как favicon.ico, а детализированный — для ярлыков Windows. Это опционально, и одного хорошо упрощённого логотипа достаточно для большинства сайтов.

Конвертируй свой логотип в ICO и остальной пакет

Вариант 1: сгенерируй пакет фавиконов

Открой Генератор фавиконов Tool Cloud, загрузи свой квадратный логотип и скачай ZIP-архив со стандартными размерами фавиконов. Используй файлы, соответствующие таблице выше, и создай недостающие отдельно (например, SVG или PNG 192/512). Игнорируй любые файлы, на которые не ссылается твой HTML.

Вариант 2: конвертируй логотип в один ICO

Если тебе нужен только favicon.ico, используй Конвертер изображений в ICO. Загрузи логотип и выполни конвертацию, затем переименуй результат в favicon.ico. Проверь, какие размеры содержит ICO; если в нём нет версии 16 или 32 пикселей, используй генератор выше.

Создание PNG 180, 192 и 512

Измени размер своего квадратного мастера до 180x180, 192x192 и 512x512 и назови их apple-touch-icon.png, icon-192.png и icon-512.png.

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

Куда поместить каждый файл в HTML

HTML-сниппет

Загрузи все файлы в корень сайта, затем добавь это в <head>. Атрибуты sizes следуют описанию того, как Chrome выбирает иконки:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff">

Несколько примечаний:

• Используй rel="icon". rel="shortcut icon" — это устаревший атрибут; «shortcut» не зарегистрирован и избыточен.
• Браузеры выбирают иконку по типу файла, а не по порядку в коде, поэтому последовательность не так важна. Атрибут type="image/svg+xml" позволяет браузерам, которые не поддерживают SVG, пропустить его и использовать ICO-файл.
• Укажи конкретный размер для ICO и добавь атрибут sizes="any" к SVG. Если ты укажешь any для ICO-файла, Chrome может отдать предпочтение ему вместо SVG.

Манифест веб-приложения

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Для установки Chrome требует наличие иконок 192px и 512px. Избегай использования атрибута "purpose": "any maskable" на единственном файле. Для маскируемой иконки создай отдельный файл с изображением внутри центральной безопасной зоны (примерно 409x409 пикселей на холсте 512x512).

Как добавить фавиконку в WordPress, Squarespace, Shopify и Wix

Названия пунктов меню могут отличаться, поэтому сверяйся с тем, что написано в твоей панели управления.

• WordPress: Внешний вид → Настроить → Идентичность сайта → Значок сайта. Загрузи PNG размером 512x512.
• Squarespace: Дизайн → Иконка браузера. Подойдёт квадратный PNG 300x300 (также принимается формат ICO).
• Shopify: Настройки темы → Фавиконка. Загрузи квадратный PNG размером 512x512.
• Wix: Настройки → Настройки сайта → Фавиконка (для этого может потребоваться платный тариф).

Почему фавиконка выглядит размытой или не обновляется

Размытые иконки или заполненные квадраты

Размытие обычно возникает при увеличении маленькой растровой картинки или из-за слишком детализированного логотипа при размере 16px. Исправь это, используя SVG и ICO размером от 32px, и никогда не увеличивай изображение 16x16. Сплошной квадрат за логотипом означает, что исходник не имел прозрачности — скорее всего, это был JPG.

Всё ещё отображается старая иконка

Браузеры кэшируют фавиконки на несколько дней или недель. Попробуй выполнить следующие действия по порядку:

1. Жёстко обнови страницу.
2. Открой файл /favicon.ico напрямую и обнови его там.
3. Добавь строку запроса, например, /favicon.ico?v=2.
4. Проверь результат в режиме инкогнито.
5. Убедись, что файл отдаёт статус HTTP 200, и очисть кэш CDN.

Иконки на домашнем экране iOS кэшируются для каждого ярлыка отдельно, поэтому существующие ярлыки не изменятся, и пользователям придётся добавить сайт заново. При ребрендинге используй новое имя файла.

Google Search не показывает её

Обновления занимают от нескольких дней до недель, а изменение URL иконки может их замедлить. Убедись, что на главной странице иконка подключена через тег rel="icon" и соответствует указанным выше требованиям по размеру. Жёсткого ограничения по объему в КБ нет; правила Google касаются именно размеров.

На практике

Начни с квадратного исходника размером 512px или больше и упрости его для отображения во вкладке. Загрузи файлы, затем вставь HTML-код и манифест на свой сайт и дважды проверь, что ссылка на манифест присутствует. В конце посмотри на результат в размере 16px: если знак не читается, упрости его ещё раз.

Часто задаваемые вопросы

Нужен ли мне favicon.ico в 2026 году?

Да. Браузеры, читатели RSS-лент и боты предпросмотра ссылок всегда запрашивают /favicon.ico из корня сайта, независимо от твоих HTML-тегов, так что это дешёвая страховка. Упакуй в один файл версии 16, 32 и 48 пикселей.

Может ли фавикон быть JPG?

Технически да, но PNG или SVG дают гораздо более чистый результат. У JPG нет прозрачности и есть артефакты сжатия, а фотографии содержат слишком много деталей для размера 16x16 пикселей.

Какой размер должен быть у фавикона для Google Search?

Google требует квадратное изображение размером не менее 8x8 пикселей и рекомендует больше 48x48 пикселей. SVG там не поддерживается, поэтому оставь ICO или PNG, объявленный через rel=icon на главной странице.

Нужны ли отдельные файлы PNG 16x16, 32x32 и 48x48?

Обычно нет. Многоформатный ICO покрывает эти размеры, а тест запросов в Chromium показал, что отдельные PNG не используются, если присутствует ICO. Firefox и Safari не тестировались.

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

Браузеры агрессивно кэшируют фавиконы на несколько дней или недель. Попробуй жёсткое обновление страницы, открой /favicon.ico напрямую, добавь строку запроса ?v=2 или проверь в режиме инкогнито.