Русский
Создавайте фавиконы из изображения, текста или эмодзи — все размеры и HTML для вставки.
Последнее обновление
#5B8DEF#FFFFFF<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" /> <meta name="application-name" content="Coddy" />
*Favicon* — это маленькая иконка, которую показывает браузер во вкладках, закладках, истории и на главном экране iOS / Android, когда кто-то сохраняет ваш сайт. Мелочь, но влияет на ощущение от проекта удивительно сильно: настоящий favicon — это разница между заглушкой и законченным продуктом.
Современные браузеры просят favicon в нескольких размерах и форматах. Для вкладок и закладок нужен PNG 16×16 или 32×32. iOS Safari хочет 180×180 apple-touch-icon.png. «Добавить на главный экран» в Android просит 192×192 и 512×512 внутри web-манифеста. Старые браузеры и часть интеграций всё ещё ждут мультиразмерный favicon.ico. Подгонять всё это руками — большая рутина, а генератор favicon решает её в один клик.
Этот генератор полностью работает у вас в браузере. Загруженная картинка декодируется в <canvas> локально, каждый выходной размер рендерится рядом, и весь набор (PNG, ICO, web-манифест, README и HTML-сниппет) упаковывается в .zip без отправки чего-либо на сервер.
favicon.ico — это контейнерный формат, в который можно положить сразу несколько размеров (16, 32, 48), чтобы устаревшие клиенты всегда находили нужный.apple-touch-icon.png и записи в manifest.webmanifest) — нужны оба.Берите **Текст** для монограммы из 1–3 символов, **Эмодзи** для иконки из одного глифа или **Изображение**, чтобы загрузить PNG, JPEG или SVG. Если у вас уже есть логотип, начинать лучше с изображения.
Выберите цвет фона (и цвет текста для монограммы). Возьмите **Квадрат**, **Скругление** или **Круг** — скруглённые квадраты совпадают с тем, как iOS обрезает иконки на главном экране, и выглядят родными.
Название сайта попадёт в мета-тег application-name и в short_name PWA-манифеста manifest.webmanifest. Используйте то имя бренда, которое пользователи увидят в закладках браузера.
Прокрутите строку предпросмотра и убедитесь, что иконка читается на 16px и 32px (там живут вкладки). Если на таком размере дизайн теряется, упростите исходник — меньше символов или более плотный кроп.
Кликните **Скачать favicon-бандл (.zip)**, чтобы получить все выходные файлы сразу. Положите файлы в корень сайта, вставьте HTML-сниппет в <head> — и всё готово.
Каждая загрузка содержит файлы ниже. HTML-сниппет связывает их вместе — если вам нужно подмножество, оставьте только те, что соответствуют вашим платформам.
| Файл | Размер | Где используется | Комментарий |
|---|---|---|---|
favicon.ico | 16, 32, 48 | Вкладки браузера (фолбэк для старых версий) | Мультиразмерный ICO-контейнер — этот URL запрашивает каждый браузер. |
favicon-16x16.png | 16×16 | Иконка вкладки | Используется на дисплеях с высокой плотностью через <link rel="icon" sizes="16x16">. |
favicon-32x32.png | 32×32 | Вкладка браузера и закладки | Основная иконка вкладки на retina-экранах. |
favicon-48x48.png | 48×48 | Плитка сайта Windows, панель задач | Также упакована внутри favicon.ico для старых клиентов. |
apple-touch-icon.png | 180×180 | iOS Safari «Добавить на главный экран» | Если её нет, iOS подставит скриншот страницы — всегда добавляйте. |
android-chrome-192x192.png | 192×192 | Главный экран Android | На неё ссылается manifest.webmanifest. |
android-chrome-512x512.png | 512×512 | Установка PWA и splash-экран | Обязательна для устанавливаемых PWA. |
site.webmanifest | — | Метаданные установки PWA | Содержит иконки, имя и theme color. Подключается через <link rel="manifest">. |
Введите 1–3 буквы (например, **Co**, **C** или **JS**), выберите цвет бренда и форму **Скругление** для силуэта в стиле iOS.
Монограммы лучше всего читаются на 16px, потому что в них нет деталей, которые можно потерять. Используйте жирную заглавную букву или плотную пару из двух символов и держите высокий контраст между текстом и фоном.
Выберите эмодзи, которое попадает в настроение проекта — 🚀 для запуска, 🧪 для эксперимента, 📚 для документации. Поставьте нейтральный фон.
Эмодзи-favicon приятно смотрятся на личных сайтах, хакатонах и пет-проектах. Учтите, что одно и то же эмодзи выглядит по-разному на macOS (Apple) и Windows (Segoe) — после экспорта бандл зафиксирует тот вид macOS / Linux / Chrome, который вы видите в предпросмотре.
Загрузите PNG или SVG логотипа, увеличьте слайдер **Отступы**, чтобы графика не упиралась в края, и включите **Залить цветом фона**, если у логотипа прозрачные края.
SVG рендерится чётко на любом размере. PNG тоже работает, но размывается выше своего нативного разрешения — начинайте с источника хотя бы 512×512.
apple-touch-icon.png. Если Apple touch icon не задан, iOS возьмёт скриншот страницы — он обычно выглядит ужасно.<link rel="icon" href="/images/favicon.ico">. Это работает, но браузеры всё равно проверяют /favicon.ico в корне сайта. Либо положите копию и в корень, либо смиритесь с 404 в логах.favicon.ico (16/32/48), PNG 32×32, apple-touch-icon.png 180×180 для iOS и PNG 192×192 и 512×512, заявленные в site.webmanifest для Android и устанавливаемых PWA. Бандл, который этот инструмент скачивает, содержит их все.<link rel="icon" type="image/png">. Все они также поддерживают наследуемый URL /favicon.ico. SVG-favicon работают в современных браузерах и позволяют одному файлу масштабироваться без потерь на любом размере — хороший вариант, если ваш логотип уже векторный, но iOS Safari всё равно требует PNG-фолбэк.Cmd/Ctrl + Shift + R), очистите данные сайта в DevTools или добавьте query-параметр к URL favicon (/favicon.ico?v=2). CDN перед сайтом обычно тоже нужно сбросить./apple-touch-icon.png. Он есть в бандле.<canvas>, и каждый файл результата (PNG, ICO, ZIP, манифест) собирается локально. Ничего не уходит с вашей машины.