Генератор favicon
Превратите логотип в полный пакет favicon для своего сайта.
Работает в браузере. Ваши файлы никогда не покидают устройство.
- ICO и все размеры PNG
- Готовый HTML-код
- Настраиваемый отступ
Как создать favicon
- Перетащите сюда квадратный логотип или изображение.
- При необходимости настройте отступ и фон.
- Скачайте ZIP и вставьте HTML-код.
Что внутри ZIP-архива
| Файл | Размер | Используется |
|---|---|---|
| favicon.ico | 16, 32 и 48 px в одном файле | Старые браузеры, закладки |
| favicon-16x16.png | 16 x 16 | Вкладки браузера |
| favicon-32x32.png | 32 x 32 | Вкладки браузера, панель задач |
| apple-touch-icon.png | 180 x 180 | Домашний экран iPhone и iPad |
| android-chrome-192x192.png | 192 x 192 | Домашний экран Android |
| android-chrome-512x512.png | 512 x 512 | Заставка и значок приложения Android |
| site.webmanifest | Текстовый файл | Указывает Android, какую иконку использовать |
Куда загружать файлы
Загрузите каждый файл из ZIP-архива в корневую папку своего сайта, ту же, где лежит index.html, а не в подпапку. Затем вставьте предоставленный HTML-код внутрь head каждой страницы или в общий шаблон шапки сайта, если он есть.
Советы по отступу и фону
- Добавьте отступ 10-15 процентов для логотипов, которые касаются краёв квадрата, чтобы они не выглядели обрезанными при размере 16 пикселей.
- Включите заливку фона, если у логотипа есть прозрачность и он странно смотрится на фоне цвета вкладки браузера.
- Простой контрастный логотип лучше читается при размере 16x16, чем логотип с мелкими деталями или тонким текстом.
Частые вопросы о Генератор favicon
Что внутри ZIP-архива?
favicon.ico с размерами 16, 32 и 48 пикселей, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, два PNG android-chrome и файл site.webmanifest.
Куда девать эти файлы?
Загрузите их в корневую папку своего сайта, затем вставьте HTML-код в head каждой страницы.
Моё изображение должно быть уже квадратным?
Квадратный логотип даёт самый чистый результат. Неквадратные изображения вписываются в квадрат с отступом, поэтому ничего не растягивается.
Что делает отступ?
Он добавляет пустое пространство вокруг логотипа внутри квадрата, чтобы дизайн не касался краёв при маленьком размере значка.
Моё изображение загружается куда-то?
Нет. Каждый размер значка создаётся в браузере, поэтому изображение никогда не покидает ваше устройство.
Нужны ли все шесть файлов или достаточно только favicon.ico?
Современные браузеры в основном используют PNG-файлы и site.webmanifest. favicon.ico сохраняют для старых браузеров и некоторых панелей закладок, поэтому для максимальной поддержки загрузите их все.
С какого размера изображения лучше начинать?
Не меньше 512 на 512 пикселей. Главный значок создаётся именно в этом размере, поэтому изображение меньшего размера растягивается и может выглядеть нечётким.
Нужно ли редактировать файл манифеста?
Созданный site.webmanifest содержит текст-заполнитель вместо названия сайта. Откройте его потом в текстовом редакторе и обновите поля name и short_name под свой сайт.