Превратите свой логотип в favicon
У вашего логотипа есть логотип-надпись, символ и мелкие детали. При ширине 16 пикселей выживает только одно из них. Выберите его осознанно, прежде чем что-либо экспортировать.
Почему полный логотип не работает
Favicon отрисовывается размером всего 16 пикселей в ширину. Полный логотип с надписью и мелкими деталями превращается в серое пятно при таком размере: текст нечитаем, а детали схлопываются в кашу.
Решение — рассматривать favicon как собственный ресурс, производный от логотипа, а не сам логотип. Большинство сильных favicon — это символ, монограмма или одна буква, потому что только это выживает при размере вкладки.
От логотипа к favicon
- 1
Извлеките один элемент
Возьмите символ вашего логотипа или один инициал, если ваш логотип — надпись. Отбросьте текст и всё декоративное.
- 2
Упростите до читаемости в малом размере
Уберите тонкие линии, градиенты и внутренние детали. Стремитесь к одной смелой форме с высоким контрастом на фоне.
- 3
Проектируйте сначала в наименьшем размере
Увеличьте до 16x16 и сделайте читаемым там. Если работает на 16, работает везде. Увеличить маленький дизайн легко; наоборот — нет.
- 4
Дайте фон, если нужно
Компактный знак часто читается лучше на сплошном или слегка отступающем фоне, чем паря от края до края. Это также помогает apple-touch-icon, который iOS заполняет на чёрном.
- 5
Экспортируйте полный набор
Сгенерируйте favicon.ico, PNG и apple-touch-icon из финального знака, чтобы каждый размер шёл из одной чистой графики.
Правила дизайна, переживающие уменьшение
Сначала высокий контраст. Знак должен сильно отделяться от фона, потому что тонкие тональные сдвиги исчезают в малых размерах. Смелый передний план, простой фон.
Одна форма, а не три. Favicon, который читается как один силуэт, работает. Нагромоздите несколько элементов, и они сольются в шум. Если вы разрываетесь между двумя идеями, отгрузите более простую.
Следите за негативным пространством. Тонкие зазоры между формами закрываются на 16 пикселях, и знак превращается в кляксу. Дайте формам простор или утолщите их, чтобы зазоры оставались открытыми.
Часто задаваемые вопросы
Можно ли использовать мой логотип как favicon?
Не полный логотип. Извлеките символ или один инициал и упростите до читаемости на 16 пикселях, затем экспортируйте набор favicon из этого. Полная надпись превращается в кашу на вкладке.
Как сделать favicon из логотипа?
Возьмите один элемент из логотипа, уберите мелкие детали, настройте на 16x16 для читаемости, добавьте фон, если знак компактный, затем сгенерируйте каждый размер favicon из финальной графики.
Почему мой логотип выглядит размытым как favicon?
У него слишком много деталей для 16 пикселей. Тонкие линии, текст и градиенты схлопываются при таком размере. Упростите до одной смелой формы с высоким контрастом.
В каком размере проектировать favicon?
Проектируйте сначала в наименьшем размере, 16x16. Если знак читается там, он читается на каждом большем размере. Увеличивать маленький чистый дизайн безопасно; уменьшать детализированный — нет.