Марина собрала лендинг услуг в Cursor: текст, форма и контакты на месте, а во вкладке браузера – безликий серый лист. Кажется, что фавикон для сайта = зоопарк из 20 PNG, webpack и дизайнер. За один вечер можно сделать квадратную иконку из логотипа, положить favicon.ico в корень рядом с index.html и через Cursor Agent добавить link rel=»icon» на все страницы – без npm, React и страха сломать формы.
Фавикон – маленькая иконка во вкладке и закладках, а не логотип в шапке. В 2026 для вкладки хватит трёх файлов: favicon.ico 32×32, favicon.svg и по желанию apple-touch-icon 180×180 – не двадцать PNG. Положите файлы в корень static HTML, зафиксируйте правило favicon.mdc и проверьте вкладку в инкогнито: браузер часто держит старую иконку в кэше.
В Яндекс Вордстат на 2026-07-10 кластер «фавикон» – 6053 показа в месяц, «фавикон для сайта» – 518, «сделать фавикон» – 458, «добавить фавикон» – 178. Люди ищут рабочий файл и строку в HTML. Если лендинга ещё нет, сначала соберите простой лендинг в Cursor AI без кода.
Поймите задачу: иконка вкладки, а не логотип в шапке
Боль звучит так: «почти готовый сайт выглядит чужим, пока во вкладке серый документ». Фавикон (favicon) – значок рядом с названием страницы во вкладке. Он же мелькает в закладках. Иногда Google показывает его в выдаче – но это не мгновенный результат.
На практике новичок путает фавикон с логотипом в шапке. Логотип большой и живёт в теле страницы. Фавикон крошечный: часто 16×16 или 32×32. Мелкий текст и тонкие линии превращаются в «кашу» – типичная ошибка, о которой пишут REG.ru и шпаргалки на GitHub.
Сюрприз 2026: гайд Evil Martians сводит «зоопарк» к трём файлам, а не к двадцати PNG. Google для выдачи просит квадрат минимум 8×8 и рекомендует больше 48×48. Ориентир для новичка – один понятный набор, без webpack.
Сделайте так: цель вечера – своя иконка во вкладке. Не делайте из фавикона «проект на неделю с дизайнером».
Подготовьте картинку: квадрат 512×512 без мелкого текста
Исходник – квадратный знак 1:1, лучше 512×512 в PNG или простой SVG. Уберите мелкий слоган: на 16×16 он не читается. Оставьте один узнаваемый знак с контрастом на светлой и тёмной теме вкладки.
- Шаг 1: откройте логотип в любом редакторе или онлайн-кропе.
- Шаг 2: обрежьте до квадрата 1:1, лучше 512×512.
- Шаг 3: уберите мелкий текст, тонкие линии и лишние детали.
- Шаг 4: проверьте контраст на тёмном фоне вкладки.
- Шаг 5: сохраните PNG или SVG с именем вроде logo-512.png.
- Шаг 6: не тяните в фавикон фото лица или длинный wordmark.
Рекомендация: используйте упрощённый знак. Избегайте «красивого» логотипа целиком – во вкладке побеждает простота.
Сделайте файл фавикона и положите его в корень сайта
Превратите картинку в файл, который понимает браузер. Спокойный путь: онлайн-генератор вроде favicon.io или RealFaviconGenerator. Загрузите квадрат, скачайте favicon.ico. При желании возьмите favicon.svg и apple-touch-icon.png 180×180 для «На экран Домой» на iPhone.
| Файл | Зачем | Нужен ли сразу |
|---|---|---|
| favicon.ico (32×32) | Совместимость, браузер сам ищет /favicon.ico | Да |
| favicon.svg | Чёткость на Retina и современных вкладках | Желательно |
| apple-touch-icon.png 180×180 | Иконка «На экран Домой» на iPhone | Опционально |
Итоговый вердикт: для лендинга хватит ico + svg. ZIP из RealFaviconGenerator с десятком PNG можно не распаковывать целиком – берите минимум.
Положите файлы в корень рядом с index.html: пути /favicon.ico и /favicon.svg. Не кладите в app/, public/ из Next.js или node_modules – частая ловушка, когда Cursor «угадывает» React. Workflow: генератор → корень → link в head.
Сделайте минимум один ico в корне. Не делайте двадцать размеров «на всякий случай».
Зафиксируйте правило favicon.mdc, чтобы Cursor не тянул Next.js
Страх Марины сбылся: она попросила Agent «добавь фавикон», и он создал app/favicon.ico под Next.js, пять link с разными PNG и положил файл не туда. На Vercel Drop иконки не было. Cursor Rules работают только как .mdc в .cursor/rules/; обычный .md агент может игнорировать.
Откройте папку сайта рядом с index.html и создайте .cursor/rules/favicon.mdc с alwaysApply: true:
alwaysApply: true
description: Favicon for static HTML landingОдин static HTML сайт, Tailwind CDN, без npm, React, Next.js и package.json. Файлы favicon.ico и favicon.svg в корне рядом с index.html. Во все HTML в head – только link rel=»icon» на /favicon.ico sizes=»32×32″ и при наличии SVG – link на /favicon.svg type=»image/svg+xml». Опционально apple-touch-icon 180×180. Не трогать body, формы и скрипты. Не создавать app/favicon.ico.
sizes=»32×32″ на ICO нужен, чтобы Chrome не предпочитал ICO вместо SVG (Evil Martians). Добавьте в правило фразу «не трогай формы». Рядом с title удобно держать иконку – см. meta-теги SEO-страницы в Cursor.
Откройте Agent (Ctrl+I / Cmd+I) и дайте промпт:
Добавь в head всех HTML только link rel=»icon» на /favicon.ico sizes=»32×32″ и /favicon.svg type=»image/svg+xml». Пути от корня. Не трогай body, формы и скрипты. Без npm и React.
- Шаг 1: дождитесь правок только в head на всех страницах.
- Шаг 2: проверьте, что не появился package.json и папка app/.
- Шаг 3: откройте index.html – link-теги на месте.
- Шаг 4: откройте вторую страницу – link должен быть и там.
- Шаг 5: если Agent добавил лишние PNG-ссылки, уберите их.
- Шаг 6: сохраните файлы и переходите к проверке во вкладке.
- Шаг 7: не соглашайтесь на «переписать сайт на Next ради favicon».
Рекомендация: используйте жёсткое правило и короткий промпт. Избегайте формулировок «сделай как в Next.js app router».
Проверьте вкладку, кэш и чеклист перед выкладкой
Откройте сайт: во вкладке своя иконка, не серый лист. В адресной строке откройте /favicon.ico – файл должен открыться (HTTP 200), не 404. То же для /favicon.svg, если делали SVG.
Если заменили файл, а во вкладке старая иконка – почти всегда кэш, а не «сломанный код». В community на GitHub одна и та же боль: Ctrl+Shift+R часто не помогает. Сделайте так:
- Откройте сайт в режиме инкогнито.
- Сделайте hard refresh (Ctrl+F5) на обычной вкладке.
- Добавьте в href параметр версии: /favicon.ico?v=2.
- Или переименуйте файл и обновите link.
- Проверьте снова /favicon.ico напрямую в адресной строке.
- На телефоне откройте вкладку; если делали apple-touch – «На экран Домой».
Чеклист перед Vercel Drop или доменом:
- favicon.ico лежит в корне рядом с index.html.
- При наличии – favicon.svg тоже в корне.
- В head всех HTML есть link rel=»icon».
- Квадрат иконки не меньше ориентира Google 48×48 для выдачи.
- robots.txt не блокирует файл иконки.
- В инкогнито видна новая иконка, не серый дефолт.
- Формы и кнопки не сломаны после правок head.
- Нет package.json и React «ради фавикона».
- После смены файла пробовали ?v=2 или инкогнито.
- На живом домене снова открыли /favicon.ico (см. подключение домена на Vercel).
Схема вечера (workflow):
Квадрат 512×512 → онлайн-генератор → favicon.ico/svg в корень → favicon.mdc → промпт Agent → вкладка + инкогнито → при залипании кэша ?v=2
Критерий успеха: во вкладке и в инкогнито видна своя квадратная иконка; /favicon.ico или /favicon.svg открывается; в head всех HTML есть link rel=»icon»; стек остался static HTML без npm/React. Иконка в Google может появиться через дни или недели – Google это не гарантирует. Для SEO-страницы иконка – финальный штрих рядом с SEO-страницей в Cursor без кода.
Если хотите глубже собирать сайты без кода, разбор таких шагов есть в курсе по Make.com и вайбкодингу – но фавикон вы уже можете закрыть сегодня сами.
Материал проверен: Артур Хорошев (CEO Maya AI, автор курса по Make.com и вайбкодингу).
Опора на источники: Google Search Central (квадрат, >48×48, link rel в head); Evil Martians 2026 (ico 32×32 + SVG + apple-touch 180×180); MDN link/icon; GitHub spring-boot#20551 и profilelens PR (кэш, ?v=); Cursor Docs Rules; Яндекс Вордстат «фавикон» / «фавикон для сайта» — прогон 2026-07-10.
Частые вопросы
Какой размер фавикона нужен новичку?
Сделайте исходник 512×512 квадратом, для вкладки хватит ico 32×32. Для Google ориентир – больше 48×48 и строго квадрат. Мелкий текст на 16×16 не читается.
Чем favicon.ico отличается от favicon.svg?
ICO – формат совместимости, браузер часто сам ищет /favicon.ico. SVG – вектор, чётче на Retina. Используйте оба: ico для спокойствия, svg для чёткости.
Как добавить фавикон на сайт в HTML через Cursor?
Положите файл в корень, добавьте в head link rel=»icon» href=»/favicon.ico» sizes=»32×32″. Проще поручить Agent по правилу favicon.mdc на все HTML. Не делайте правки только на одной странице.
Почему после замены файла во вкладке старая иконка?
Браузер кэширует favicon агрессивно. Проверьте инкогнито, hard refresh, ?v=2 в href или переименование файла. Не переписывайте весь сайт.
Нужен ли apple-touch-icon на первом шаге?
Для вкладки – нет. Добавьте PNG 180×180, если нужна иконка «На экран Домой» на iPhone. Сначала закройте вкладку с ico/svg.
Появится ли фавикон сразу в Google?
Не ждите мгновенно: обход может занять дни или недели. Проверьте квадрат, доступность файла и один favicon на hostname. Сначала добейтесь иконки во вкладке.
