Как создать favicon (логотип, изображение или эмодзи)
Из логотипа, фото, URL изображения или эмодзи, и как сохранить читаемость в 16x16.
Общий порядок работы
- 1
Выберите источник
Начните с файла логотипа или изображения, эмодзи или именованной иконки, либо URL изображения.
- 2
Проектируйте под маленькие размеры
Сохраняйте знак простым и высококонтрастным, чтобы он оставался читаемым в 16x16 пикселей.
- 3
Экспортируйте все размеры и форматы
Сгенерируйте .ico, размеры PNG, apple-touch-icon и иконки манифеста за один проход.
Способ A: из логотипа или изображения
Загрузите логотип, иконку или даже скриншот. Генератор обрежет, масштабирует и экспортирует все размеры, а также .ico и манифест. Исходная графика в PNG или SVG с прозрачным фоном даёт самый чистый результат.
Способ B: из эмодзи или именованной иконки
Логотипа пока нет? Выберите эмодзи или именованную иконку, и генератор отрисует её на квадратном или круглом фоне на ваш выбор. Это самый быстрый способ выпустить узнаваемый favicon для пет-проекта, прототипа или внутреннего инструмента.
Способ C: из URL изображения
Вставьте URL и подтяните графику прямо с существующего сайта или ресурса. Удобно, когда вы пересобираете бренд, уже опубликованный где-то ещё.
Проектируйте под маленькие размеры
Начинайте с графики 512x512 и уменьшайте, никогда не увеличивайте.
Убирайте мелкие детали и тонкие штрихи; в 16px они исчезают.
Тестируйте на светлых и тёмных вкладках. Если вам нужен разный знак для каждой, эту задачу решают favicon, адаптирующиеся к теме.
Проверьте каждый размер в руководстве по размерам favicon перед экспортом.
16x16, в реальном размере
Выберите правильный формат
| Формат | Для чего он |
|---|---|
| ICO | Устаревший стандарт по умолчанию, всё ещё запрашивается по /favicon.ico. Объединяет несколько размеров в одном файле. |
| PNG | Рабочая лошадка современных браузеров, apple-touch-icon и Android. Один файл на размер. |
| SVG | Масштабируется чётко и поддерживает переключение темы, с запасными вариантами PNG для старых браузеров. |
Создание праздничных или сезонных иконок
Нужен праздничный вариант или знак к запуску продукта? Используйте творческий холст, чтобы собрать и настроить favicon с текстом, эмодзи и иконками перед передачей.
Часто задаваемые вопросы
Какого размера должен быть favicon?
Проектируйте в высоком разрешении (512x512) и экспортируйте в 16x16, 32x32, 48x48, 180x180 и 192x192, чтобы каждый браузер и устройство получили чёткую иконку.
Можно ли создать favicon из эмодзи?
Да. Выберите эмодзи или именованную иконку, и генератор отрисует её на прозрачном или цветном фоне и автоматически экспортирует все размеры favicon.
В каком формате должен быть favicon?
Поставляйте мультиразрешающий .ico для поддержки устаревших систем, PNG для современных браузеров и устройств и по желанию SVG для чёткого масштабирования. Хороший генератор создаёт их все.