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

Генератор фавиконок из текста

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

Создайте фавиконку из букв или инициалов. Выберите шрифт и цвета, проверьте маленькие размеры и скачайте набор значков.

PNG ICO PWA

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

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

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

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

Изображения

Текст

Буквы или инициалы

Шрифт

Цвет текста

Размер текста

Обработка…

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

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

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

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

Фон

Прозрачный

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

#FFDE59

Внутренний отступ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">