Одно изображение. Каждый экран.

Конвертер PNG в ICO

Маленькие значки. Неизгладимое впечатление.

Преобразуйте PNG в ICO с несколькими размерами. Сохраните прозрачность, проверьте мелкие превью и скачайте файлы значков локально.

PNG ICO PWA

Создать набор значков

Превратите свое изображение в фавиконы, значки приложений и многое другое.

1Загрузить
2Настроить
3Скачать

В ожидании изображения

Перетащите изображение сюда

PNG · До 5 MB

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

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

Настройте значок

Точно настройте вид для каждого экрана.

Размещение изображения

Фон

Прозрачный

Сплошной цвет

#FFFFFF

Внутренний отступ6%

Радиус углов0%

Размеры ICO (можно выбрать несколько)

256

Маскируемые значки

Посмотрите в действии(загрузите изображение для предпросмотра значка)

Вкладка браузера

https://example.com

Главный экран iOS

Ваш значок здесь

PWA / Android

Ваш значок здесь

Как создать фавикон за 3 шага

От одного изображения до полного набора иконок.

1Загрузите свое изображение

2Настройте и проверьте

Выберите размещение, фон и внутренний отступ. Проверьте результат в маленьких размерах.

3Скачать и добавить на свой сайт

Экспортируйте набор значков, загрузите файлы и добавьте ссылки на значки в HTML.

Один логотип для любого экрана

Посмотрите, где используются сгенерированные файлы.

Фавикон сайта

Мой сайт×

16 × 16

32 × 32

Иконки 16 × 16 и 32 × 32 помогают посетителям распознавать ваш сайт во вкладках и закладках.

iPhone & iPad

Мой сайт

180 × 180

Используйте значок apple-touch размером 180 × 180 при добавлении сайта на главный экран.

PWA & Android

Установить приложение

192 × 192

512 × 512

192 × 192 и 512 × 512 — распространённые размеры изображений в манифестах веб-приложений.

Что входит в набор значков?

Готовый к использованию набор значков для всех платформ.

favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
apple-touch-icon.png180 × 180
icon-192.png192 × 192
icon-512.png512 × 512
site.webmanifestМанифест веб-приложения

Добавьте значки на сайт

Поместите эти ссылки в HTML <head>.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Распакуйте набор в public/ в корне проекта Nuxt. Сохраните имена файлов и поместите site.webmanifest рядом с favicon.ico, а не в app/.
Добавьте код в блок script setup файла app/app.vue. Замените ссылки на старые иконки, заново соберите и опубликуйте проект.

useHead({
  "link": [
    {
      "rel": "icon",
      "type": "image/x-icon",
      "href": "/favicon.ico"
    },
    {
      "rel": "apple-touch-icon",
      "sizes": "180x180",
      "href": "/apple-touch-icon.png"
    },
    {
      "rel": "manifest",
      "href": "/site.webmanifest"
    }
  ]
})

Откройте /favicon.ico, /apple-touch-icon.png и /site.webmanifest на своём сайте. Проверьте успешный ответ и реальные данные изображения или JSON. Статус 200 со страницей ошибки HTML тоже означает неверный путь. Проверьте все URL иконок в манифесте.

Если осталась старая иконка, проверьте дубли ссылок в head, отключите кеш в инструментах браузера и обновите страницу. При наличии проверьте кеш CDN и service worker. Сравните реальные версии 16 и 32 пикселя: упростите мелкий текст и тонкие линии.

Файлы содержат иконки и метаданные манифеста. Сами по себе они не делают сайт устанавливаемым PWA. Пример рассчитан на корень домена; для подкаталога измените все ссылки и пути иконок в манифесте.

Nuxt 4 · public/ · Nuxt 4 · useHead