Как сделать favicon из одного изображения

Зачем сайту несколько иконок

Favicon — это значок во вкладке браузера. Телефон, Windows и macOS просят тот же знак крупнее: Apple Touch Icon, иконки Android Chrome и файл favicon.ico. Собирать каждый размер вручную долго, а пропущенный размер даёт размытую вкладку или пустой значок на домашнем экране.

Favicon Generator собирает набор из одного изображения прямо в браузере. Файл никуда не отправляется. На выходе ZIP, manifest.json для PWA, тестовая страница и теги <link> для <head>.

Шаг за шагом

1. Откройте Favicon Generator. Возьмите квадратную картинку, лучше PNG. Широкий логотип растянется в квадрат, поэтому сначала обрежьте его. Стороны в 512 пикселей достаточно, 1024 лучше: в архиве есть иконка macOS 1024×1024.
2. Перетащите файл в область загрузки или нажмите «Выбрать файл». Сверху появится превью и имя файла, ниже — поле «Путь к иконкам». По умолчанию там /img. Поменяйте путь, если иконки будут лежать в другой папке, например /assets/icons.

   

3. Нажмите «Генерировать иконки». Браузер скачает favicons.zip. На странице появится зелёная пометка о скачивании и блок «HTML теги для вставки» со ссылками на ваш путь.

   

4. Распакуйте архив в папку, которую указали. Внутри PNG для веба, iOS, Android и macOS, файл favicon.ico, manifest.json, test.html и html-tags.txt.
5. Вставьте теги в <head> страниц. Откройте test.html из той же папки и проверьте, что файлы открываются.

Советы

• Путь должен совпасть с папкой. Если в поле /img, теги просят /img/favicon-32x32.png. Положите файлы именно туда, иначе вкладка останется пустой.
• Начинайте с квадрата. Инструмент вписывает всё изображение в каждый квадратный размер. Горизонтальный логотип сожмётся.
• Берите крупный исходник. Мелкие размеры уменьшаются из вашего файла. Крошечная картинка не станет резкой иконкой 512×512.
• Кладите манифест рядом с иконками. manifest.json ссылается на android-chrome-192x192.png и android-chrome-512x512.png по тому же пути.
• Обработка идёт в браузере. Картинка уменьшается локально, затем скачивается ZIP. Аккаунт и загрузка на сервер не нужны.

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

Логотип уходит на сервер?

Нет. Генератор работает в браузере. Изображение не покидает компьютер.

Какие размеры в архиве?

PNG для веба от 16×16 до 512×512, Apple Touch Icon от 60×60 до 180×180, иконки Android Chrome 192×192 и 512×512, PNG для macOS до 1024×1024 и файл favicon.ico.

Куда вставлять HTML-теги?

В <head> каждой страницы. Кнопка «Копировать» кладёт весь блок в буфер. Тот же текст лежит в архиве как html-tags.txt.

Что делать, если папка изменилась?

Впишите новую папку в «Путь к иконкам». Если теги уже показаны, они перепишутся. Нажмите «Генерировать иконки» ещё раз, чтобы html-tags.txt в новом ZIP совпал с путём.

Другие инструменты

• Favicon Generator: инструмент из этого гайда.
• SVG в CSS: вставить SVG-иконку прямо в таблицу стилей.
• Конвертер единиц CSS: перевести размеры из px в rem.
• Веб-инструменты: остальные сервисы категории.

Попробовать

Откройте Favicon Generator, положите квадратный логотип и нажмите «Генерировать иконки».