как сделать фавикон из картинки

Перетащите изображение в первый раздел — инструмент подготовит весь набор и покажет, как иконка выглядит во вкладке, в закладках и на телефоне. Лучше брать квадратную картинку с простой формой: неквадратная впишется по центру, но пустые поля по краям на 16 пикселях съедят половину знака.

почему логотип не читается во вкладке

Во вкладке иконка занимает 16 пикселей — примерно площадь строчной буквы. Тонкие линии, мелкий текст и внутренние детали на ней сливаются в пятно. Для фавикона нужен упрощённый знак или монограмма с сильным контрастом; инструмент предупреждает об этом до того, как файлы уедут на сайт.

почему иконка на айфоне стала чёрной

Apple не поддерживает прозрачность в иконке домашнего экрана: прозрачные области заливаются чёрным, и вместо логотипа на телефоне появляется чёрный квадрат. Поэтому под apple-touch-icon.png всегда подкладывается фон — по умолчанию белый, но цвет можно выбрать свой, под цвет знака. Остальные файлы набора прозрачность сохраняют: во вкладке и в закладках она не мешает, а иногда и нужна.

как сделать фавикон для тёмной темы

Включите тёмный вариант: в icon.svg уйдёт правило prefers-color-scheme, и браузер сам подставит светлый цвет знака, когда во вкладке тёмное оформление. Это умеет только SVG — ни ico, ни PNG переключаться не могут, поэтому чёрный логотип на тёмной вкладке без этого просто исчезает.

как подключить фавикон в html

Положите файлы в корень сайта рядом с главной страницей и вставьте в head четыре строки, которые инструмент даёт готовыми. Порядок важен: favicon.ico идёт первым и работает фолбэком для всего, что не умеет SVG. Для React и Next.js показана отдельная раскладка по папкам app и public.

Приватность · фавиконГенератор фавиконов

Сделайте фавикон из картинки, текста или эмодзи и получите минимальный современный набор: пять файлов вместо тридцати. С превью в реальном размере и готовым кодом. Картинка не уходит на сервер.

Изображение обрабатывается в браузере — логотип не покидает ваше устройство

01Источник 02Превью 03Файлы и код 04Примеры 05О фавиконах 06Вопросы 07Похожие

Источник

картинка, текст, эмодзи или готовый SVG

Откуда берём знак

одна-две буквы — самый надёжный фавикон

Буквы · 1–3 символа1 из 3

ШрифтКегль, % от иконки

Цвет знака

Подложка и поля

Поля, %Скругление, %Форма

Фон иконки

Иконка целиком512 × 512

Клетка под иконкой — прозрачные области. Для Apple под них подкладывается фон.

Тёмный вариантдля SVG-фавикона

Когда во вкладке тёмное оформление, SVG подставит этот цвет знака — чёрный логотип там просто исчезает.

Цвет знака в тёмной теме

Фон в тёмной теме

Выключено: в icon.svg уйдёт один вариант знака, и на тёмной вкладке тёмный логотип почти исчезнет.

Превью

в реальном размере — 16 пикселей это правда мало

Как это увидятмасштаб 1:1, без увеличения

Мой сайт — главная

Вкладка · светлая · 16px

Мой сайт — главная

Вкладка · тёмная · 16px

Закладки · 32px

iOS · 180px · без прозрачности

Android · 192px · зона обрезки

Проверкизамечаний: 1

Во вкладке читаетсяКонтраст и крупность знака достаточны для 16×16 — это главный экзамен фавикона.

Иконка для iOS непрозрачнаФон залит — на домашнем экране iPhone иконка не станет чёрным квадратом.

Знак внутри безопасной зоныДаже при круглой обрезке на Android важное останется в кадре.

Тёмный вариант выключенНа вкладке с тёмным оформлением тёмный знак почти исчезнет. Включите тёмный вариант — он живёт только в SVG и ничего не ломает.

Проверки простые и объяснимые: они смотрят на контраст, мелкие детали и положение знака. Это подсказка, а не приговор — решение за вами.

Файлы и код

пять файлов и манифест — остальное наследие ушедших платформ

Что скачается6 файлов

favicon.ico32 + 16 pxВкладки, закладки, старые браузеры — универсальный фолбэк.

icon.svgвекторСовременные браузеры. Единственный файл, который умеет тёмную тему.

apple-touch-icon.png180 × 180Домашний экран iPhone и iPad. Всегда с фоном, без прозрачности.

icon-192.png192 × 192Манифест и Android.

icon-512.png512 × 512Манифест, сплэш-экран, maskable.

manifest.webmanifestJSONИмя, цвета и список иконок для установки как приложение.

По умолчанию выключено: десятки иконок появились ради платформ, которых больше нет.

Код для вставки

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Положите файлы в корень сайта рядом с главной страницей и вставьте эти строки в head. Порядок важен: ico идёт первым как фолбэк.

Примеры

включая тот, который проваливается — и это честно

Монограмма

Надёжно

Одна буква на плотном фоне читается в любом размере — самый предсказуемый фавикон, если логотипа ещё нет.

Эмодзи

Быстро

Фавикон для пет-проекта за секунду. Фон прозрачный, поэтому для iOS подкладывается подложка — иначе иконка станет чёрной.

Простой знак

Тёмная тема

Геометрия в две краски. Тёмный вариант включён: во вкладке с тёмным оформлением знак светлеет сам.

Сложный логотип

Антипример

Тонкие линии и подпись мелким шрифтом. На 16×16 — серое пятно: проверки срабатывают, и это честный результат, а не поломка.

О фавиконах

Фавикон — маленькая иконка сайта: во вкладке браузера, в закладках, в результатах поиска, на домашнем экране телефона. Раньше генераторы выдавали по три десятка файлов на все случаи жизни. Сегодня этого не нужно: современному сайту хватает пяти иконок и одного файла манифеста.

Частые вопросы

Достаточно пяти файлов: favicon.ico на 32×32 с вложенным слоем 16×16, icon.svg для современных браузеров, apple-touch-icon.png на 180×180 для домашнего экрана iOS и две иконки для манифеста — 192×192 и 512×512. Десятки размеров, которые выдают старые генераторы, появились ради платформ, которых больше нет.

Обновлено 13 сентября 2026