Генератор фавиконов: favicon.ico, иконки для Apple и Android

Как пользоваться

Выберите Источник иконки: Картинка или Буквы или эмодзи на цветном фоне.
Выберите картинку или введите Буквы или эмодзи. Задайте Цвет фона и Цвет буквы.
Укажите Цвет темы и Название сайта, затем нажмите Создать иконки.
Скачайте ZIP-файл. Положите файлы в корневую папку сайта и вставьте HTML-теги в заголовок каждой страницы.

Файлы и их размеры

favicon.ico содержит три картинки размером 16, 32 и 48 пикселей, поэтому вкладка браузера, закладка и Windows находят подходящий размер. apple-touch-icon.png имеет 180 пикселей для главного экрана iPhone или iPad. android-chrome-192x192.png и android-chrome-512x512.png — иконки Android, перечисленные в манифесте. site.webmanifest называет приложение и задаёт его цвета.

Прозрачность и фон

Фавикон сохраняет прозрачные области, поэтому логотип выглядит на любом цвете, который показывает браузер. Иконки Apple и Android заполняются цветом фона, потому что прозрачный угол иконки Apple touch на iPhone и iPad выглядит чёрным.

Где лежат файлы

Положите файлы в корневую папку сайта, чтобы адреса /favicon.ico и /site.webmanifest работали. Браузеры долго хранят иконки в кэше: после изменения добавьте к ссылке номер версии или очистите кэш, чтобы увидеть новую иконку.

Пример: буквы FT на тёмно-синем

Выберите Буквы или эмодзи на цветном фоне, введите FT и оставьте тёмно-синий фон. Инструмент рисует буквы в центре скруглённого квадрата и подгоняет их под квадрат, поэтому они остаются читаемыми даже в фавиконе 16 пикселей.

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

Загружается ли моя картинка, когда я создаю фавиконы?

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

Какой файл браузер использует для значка вкладки?

Браузеры используют favicon.ico или тег link на странице, который указывает на файл PNG или SVG. Теги, которые создаёт этот инструмент, ссылаются на favicon.ico и иконку Apple, поэтому каждый браузер находит иконку подходящего размера.

Почему мой фавикон размывается на 16 пикселях?

В маленькой иконке очень мало пикселей, поэтому тонкие линии и мелкие буквы размываются. Используйте простую фигуру с толстыми линиями или не больше двух букв и проверьте картинки 16 и 32 пикселя внутри файла ICO.

Зачем у иконок Apple цвет фона?

Иконка Apple touch с прозрачным углом показывает этот угол чёрным на iPhone и iPad. Инструмент заполняет весь квадрат выбранным цветом фона.

Что вставить в начало страницы?

Вставьте четыре строки из поля «HTML-теги» в элемент head каждой страницы. Они подключают favicon.ico, иконку Apple, манифест и цвет темы.

Для чего нужен манифест веб-приложения?

Положите site.webmanifest в корневую папку сайта. Браузер читает его, когда посетитель устанавливает сайт как приложение: манифест называет приложение, задаёт короткое название и цвета и перечисляет две иконки Android.

Источники

Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..