Icon Workshop1Загрузите свое изображение
Начните с чёткого логотипа или простого символа. Квадратное изображение подходит лучше всего.
Одно изображение. Каждый экран.
Генератор фавиконов и значков приложений
Маленькие значки. Неизгладимое впечатление.
Преобразуйте изображение в фавиконы сайта, значки приложений и готовый набор значков.
PNG ICO PWA
Создать набор значков
Превратите свое изображение в фавиконы, значки приложений и многое другое.
- 1Загрузить
- 2Настроить
- 3Скачать
Перетащите изображение сюда
PNG, JPG или SVG · до 5 МБ
Изображение обрабатывается в браузере и никогда не покидает ваше устройство.
Настройте значок
Точно настройте вид для каждого экрана.
Посмотрите в действии(загрузите изображение для предпросмотра значка)
Вкладка браузера
×
https://example.com
Главный экран iOS
Ваш значок здесь
PWA / Android
Ваш значок здесь
Как создать фавикон за 3 шага
От одного изображения до полного набора иконок.
2Настройте и проверьте
Выберите размещение, фон и внутренний отступ. Проверьте результат в маленьких размерах.
3Скачать и добавить на свой сайт
Экспортируйте набор значков, загрузите файлы и добавьте ссылки на значки в HTML.
Один логотип для любого экрана
Посмотрите, где используются сгенерированные файлы.
Фавикон сайта
Мой сайт×16 × 1632 × 32Иконки 16 × 16 и 32 × 32 помогают посетителям распознавать ваш сайт во вкладках и закладках.
iPhone & iPad
Мой сайт180 × 180Используйте значок apple-touch размером 180 × 180 при добавлении сайта на главный экран.
PWA & Android
Установить приложение192 × 192512 × 512192 × 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">Часто задаваемые вопросы
Что такое фавикон?
Небольшое изображение, которое представляет ваш сайт в вкладках браузера и закладках.
Какой формат изображения использовать?
PNG является хорошим выбором для прозрачных логотипов. Также можно использовать JPG, WebP и безопасный SVG.
Можно ли использовать неквадратное изображение?
Да. Выберите «Вписать», «Обрезать» или «Растянуть», чтобы создать квадратный значок.
Зачем нужны значки нескольких размеров?
Браузеры и домашние экраны используют разные размеры. Меньшие иконки остаются четкими во вкладках; большие иконки подходят для ярлыков приложений.