Бесплатный генератор фавиконок для всех платформ

Генератор фавиконок избавляет от самой нудной части брендинга сайта: экспорта одного и того же логотипа в шести размерах, правильного именования каждого файла и написания тегов, которые подсказывают каждой платформе, где их искать. Фавиконка маленькая, но путь у неё долгий. Она находится во вкладках браузера, закладках и истории, на главных экранах телефонов и рядом с названием вашего сайта в результатах Google, где Google просит квадратный значок не меньше 8x8 пикселей и рекомендует размер больше 48x48 (Google Search Central, фавиконки в результатах поиска).

Как пользоваться генератором фавиконок?

Перетащите в инструмент файл PNG, JPG или SVG, лучше размером 512x512 пикселей или больше. Генератор рисует ваше изображение на холсте в каждом размере с высококачественным сглаживанием и показывает шесть результатов рядом.

1. Подготовьте квадратный исходник. Инструмент масштабирует изображение до каждого квадратного размера без обрезки, поэтому прямоугольный логотип будет выглядеть растянутым. Сначала обрежьте его до квадрата, оставив небольшой отступ вокруг знака.
2. Перетащите файл или нажмите, чтобы выбрать его. Предпросмотр появится через секунду.
3. Скачайте пакет кнопкой «Скачать всё (.zip)» или каждый PNG по отдельности.
4. Скопируйте HTML-код в <head> каждой страницы, обычно в шаблон вашего сайта.
5. Скопируйте манифест, заполните поля name и short_name названием вашего бренда и сохраните его как site.webmanifest в корне сайта.
6. Загрузите файлы в корень вашего домена, чтобы /favicon-32x32.png и остальные пути в коде работали.

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

Какие размеры фавиконок нужны в 2026 году?

Шесть PNG-файлов покрывают браузеры, iOS, Android и Windows. В таблице перечислено, что создаёт генератор, где используется каждый файл и какой тег или файл на него ссылается.

Пара 192 и 512 выбрана не случайно: для браузеров на Chromium манифест веб-приложения должен содержать минимум значок 192x192 и значок 512x512, а Chrome масштабирует их для других мест, где они нужны (web.dev, добавление манифеста веб-приложения). Размер 180x180 соответствует значку iPhone высокого разрешения в собственном примере кода Apple для веб-клипов (Apple, настройка веб-приложений). Плитка Windows это устаревший файл: вреда от неё нет, а тег можно убрать, если вы не ориентируетесь на старые установки Windows.

Какой HTML-код выдаёт генератор?

Шесть строк для <head>: две ссылки rel="icon" для PNG-фавиконок, значок Apple touch, ссылка на манифест, плитка Windows и метатег theme-color. Когда на странице перечислено несколько значков, браузер читает их атрибуты type и sizes, чтобы выбрать наиболее подходящий, и переходит к следующему, если файл не загрузился (MDN, типы ссылок).

Две настройки в сгенерированном коде стоит отредактировать. Значения theme-color и цвета манифеста по умолчанию белые (#ffffff): замените их цветом вашего бренда, если хотите, чтобы панель браузера и заставка установленного приложения соответствовали вашему сайту. А поля name и short_name в манифесте намеренно оставлены пустыми: web.dev объясняет, что требуется хотя бы одно из двух, а short_name используется на главном экране, где места мало.

Помогает ли фавиконка SEO?

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

Google перечисляет условия, при которых значок может быть показан, и именно невыполненное условие обычно объясняет, почему фавиконка не отображается:

• Тег link на главной странице. Google читает rel="icon", shortcut icon, apple-touch-icon и apple-touch-icon-precomposed.
• Доступ для сканирования. Googlebot должен иметь доступ к главной странице, а Googlebot-Image к файлу значка. Правило в robots.txt, закрывающее папку с изображениями, может скрыть вашу фавиконку.
• Квадратный файл не меньше 8x8 пикселей, лучше больше 48x48, в поддерживаемом формате: BMP, GIF, ICO, PNG, JPEG, PPM или TIFF. Сгенерированные PNG-файлы подходят.
• Одна фавиконка на имя хоста. У поддомена может быть собственный значок; у подкаталога, например /blog, нет.
• Стабильный URL, который вы не меняете часто.

После изменения Google должен заново просканировать главную страницу, на что, согласно той же документации, может уйти от нескольких дней до нескольких недель. Запрос индексации главной страницы в Search Console ускоряет процесс.

Как создать фавиконку, читаемую в 16 пикселей?

Сначала проектируйте под самый маленький размер. При 16x16 весь значок состоит из 256 пикселей, поэтому полный логотип со слоганом превращается в размытое пятно. Эти правила помогают сохранить значок читаемым:

• Используйте знак логотипа, а не логотип целиком. Символ или одна жирная буква выдерживают уменьшение; слово нет.
• Заполните квадрат. Оставьте тонкий отступ, но избегайте больших пустых полей, из-за которых знак во вкладке становится крошечным.
• Делайте ставку на сильный контраст и два-три плоских цвета. Тонкие линии и градиенты на малых размерах исчезают.
• Проверьте светлую и тёмную темы. Прозрачный PNG с тёмным знаком теряется на тёмной панели вкладок; сплошной фон или светлый контур решают проблему.
• Подумайте о масках для Android. Android может обрезать значки приложений до круга. MDN рекомендует маскируемый значок, где важная часть находится внутри безопасной зоны, на непрозрачном фоне (MDN, определение значков приложения). Если ваш знак касается краёв, экспортируйте версию с отступами для файлов 192 и 512.

Какие ошибки с фавиконками встречаются чаще всего?

Большинство неработающих фавиконок связаны с путём или кешем, а не с самим изображением.

• Файлы загружены не в ту папку. Сгенерированный код указывает на корень (/favicon-32x32.png). Если вы положили файлы в /assets, обновите все пути.
• Нет файла /favicon.ico. Когда страница не объявляет значок, стандарт HTML позволяет браузерам по умолчанию запрашивать /favicon.ico (Стандарт WHATWG HTML, типы ссылок). Страницы без этих тегов, например PDF или страницы ошибок, будут вызывать ошибку 404 в ваших логах. Генератор создаёт только PNG-файлы, поэтому, если вам нужен этот запасной вариант, экспортируйте свой PNG 32x32 в формат ICO в любом графическом редакторе.
• Старый значок не пропадает. Браузеры агрессивно кешируют фавиконки. После редизайна переименуйте файл или добавьте параметр версии (?v=2).
• Теги только на главной странице. Браузеры читают значок постранично, поэтому размещайте код в общем шаблоне.
• Растянутый логотип. Перед генерацией обрежьте исходник до квадрата, как описано выше.

Когда файлы окажутся в сети, запустите извлечение фавиконки для вашего домена, чтобы увидеть, какие значки реально находит поисковый робот, а затем аудит внутренней SEO-оптимизации, чтобы проверить остальные теги в head.

Как фавиконка вписывается в ваш бренд в ответах ИИ?

ИИ-ассистенты вроде ChatGPT и Perplexity часто показывают значок каждого сайта, который они цитируют, рядом со ссылкой на источник. Единая фавиконка делает ваш бренд узнаваемым и там, но это лишь рамка: попадание в цитаты зависит от вашего контента и вашего авторитета. Чтобы увидеть, появляется ли ваш сайт в этих ответах вообще, отслеживание упоминаний в ИИ каждую неделю измеряет упоминания вашего бренда по каждому промпту и каждой модели, а дашборд GEO и SEO показывает их рядом с вашими кликами и позициями в Google.

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