Дизайн и конверсия

Как добавить иконку для сайта?

Николай, Рязань 847 просмотров

Сделал сайт, а во вкладке браузера вместо логотипа - серый глобус. Как добавить свою иконку, и в каком формате и размере её вообще готовить, чтобы потом не пришлось переделывать?

Дмитрий Акиндинов разработчик лендингов, 15 лет практики

ответил

Иконка вкладки называется favicon. Нужен PNG с прозрачным фоном минимум 512х512 пикселей - из него сервисы сами нарежут размеры под вкладку браузера (32х32), значок при добавлении сайта на экран телефона (180х180 для iPhone) и иконки для PWA. Файл кладётся в корень сайта как favicon.ico или подключается тегом link в head, в WordPress - через раздел настроек с иконкой сайта.

Саму картинку берите от логотипа, но упростите до простого силуэта без мелких деталей: в 32 пикселя тонкие линии и текст превращаются в кашу, и на вкладке остаётся нечитаемое пятно. Генераторы favicon сами нарезают все нужные размеры из одного PNG - вручную готовить каждый файл не обязательно.

Иконки-пиктограммы внутри страницы - в блоках "что входит" или "преимущества" - другая история, не favicon. Тут проще не тащить готовый набор с сомнительной лицензией со случайного сайта, а брать иконки из проверенных открытых наборов вроде Feather или Heroicons, где лицензия MIT и коммерческое использование разрешено без вопросов, либо заказывать отрисовку под свой стиль. С иконками та же история, что со шрифтами: бесплатная лицензия иногда запрещает коммерческое использование, и это всплывает не сразу, а уже после запуска.

Для мобильных устройств добавьте отдельно apple-touch-icon 180х180 и, если сайт работает как приложение, иконки 192х192 и 512х512 в манифесте. Обычному лендингу без PWA этого не нужно - хватает favicon и apple-touch-icon.

Подробный разбор Бесплатные шрифты для лендинга: где брать и как не нарушить лицензию
Не нашли свой вопрос

Задайте его напрямую

Отвечаю сам, на почту, обычно в тот же день. Разбор самых частых вопросов потом попадает в этот раздел.

Похожие вопросы

Все вопросы темы "Дизайн и конверсия"

Помогу выбрать

Сомневаетесь — напишите, разберёмся за 10 минут

Расскажете про ваш бизнес и задачу — подскажу, что нужно: лендинг, многостраничник или вообще не сайт. Без обязательств, бесплатно.

Отвечаю в течение 15 минут в рабочее время (будни 11:00–20:00 МСК). Если удобнее e-mail: 9123578@gmail.com

Telegram TG MAX MAX Звонок