Иконки приложения по окружениям, сгенерированные вашим агентом
Когда local, staging и production показывают одну и ту же иконку вкладки, это лишь вопрос времени, когда кто-нибудь запустит не тот скрипт не в той вкладке. MCP от Favicon Tools решает это в корне: по умолчанию он возвращает иконки для dev, staging и production.
Что получает каждое окружение
| Окружение | Иконка |
|---|---|
| Production | Чистая иконка бренда, без наложений |
| Staging | Тот же глиф со значком "S" в углу |
| Development | Тот же глиф со значком "D" в углу |
Один вызов возвращает весь набор
Направьте своего агента на MCP-сервер и вызовите generate_iconset. С настройками по умолчанию один источник создаёт полный комплект по окружениям плюс соответствующие манифесты.
// .mcp.json: add the server
{
"mcpServers": {
"favicontools": {
"type": "http",
"url": "https://favicontools.com/api/mcp"
}
}
}// then the agent calls:
generate_iconset({ source: "noto:fox" })
// → clean production icon
// → staging-* variants (corner "S")
// → dev-* variants (corner "D")
// → manifest.json + staging-manifest.json + dev-manifest.json
// → a stage-aware <head> snippetФрагмент установки уже условный
Вам не нужно писать логику переключения самостоятельно. Возвращаемый фрагмент отображает нужную иконку и манифест на основе вашей переменной окружения. Поместите его в корневой layout:
// app/layout.tsx (Next.js)
const isStaging = process.env.NEXT_PUBLIC_APP_ENV === "staging";
const isDev = process.env.NODE_ENV === "development";
// pick the filename prefix + manifest per stage
const prefix = isDev ? "/dev-" : isStaging ? "/staging-" : "/";
const manifest = isDev
? "/dev-manifest.json"
: isStaging
? "/staging-manifest.json"
: "/manifest.json";
// <link rel="icon" href={`${prefix}favicon.ico`} />
// <link rel="icon" sizes="32x32" href={`${prefix}favicon-32x32.png`} />
// <link rel="manifest" href={manifest} />Тот же паттерн поставляется для React, Vue, Svelte и Astro. Он опирается на префикс имени файла (/, /staging-, /dev-), чтобы production оставался чистым, а остальные окружения автоматически получали свой значок.
Защитная сетка для деплоя
Панель вкладок превращается в наглядный индикатор того, на какое окружение вы смотрите. Иконка со значком — это та самая пауза, которая не даёт деструктивной команде попасть в production.
Поскольку варианты и условный фрагмент возвращаются в одном ответе, вы бесплатно получаете гигиену нескольких окружений: без второго прохода генерации, без вручную отредактированных тегов link.
Перед публикацией
- 1
Проверьте, что файлы на месте
Убедитесь, что файлы staging-* и dev-* (и их манифесты) находятся в вашем статическом каталоге.
- 2
Задайте переменную окружения для каждого деплоя
Фрагмент читает NEXT_PUBLIC_APP_ENV или его эквивалент. Задайте её во всех окружениях.
- 3
Добавьте суффикс к имени каждого манифеста
Например, "Acme", "Acme (Staging)", "Acme (Dev)".
- 4
Проверьте каждое окружение
Запустите /verify для URL каждого окружения, чтобы убедиться, что нужная иконка в эфире.