Перейти к основному содержимому

Вопрос-ответ Дизайн и UX

Как сделать иконку сайта?

Михаил, Нижний Новгород 2 тыс. просм.

У конкурентов в вкладке браузера красивый логотип, а у моего сайта до сих пор пустой квадратик вместо иконки. Как её сделать и куда потом эту картинку загружать, чтобы она наконец появилась?

Елена Захарова UI/UX-дизайнер

ответил

эксперт

Иконка сайта, favicon - это квадратное изображение в формате PNG или ICO размером минимум 32х32 пикселя (и 180х180 для мобильных устройств), обычно логотип компании или его упрощённый знак. Файл заливают в корень сайта или папку с картинками и подключают строкой link rel="icon" в коде страницы - без этого браузер её просто не найдёт, сколько бы файлов ни лежало на сервере.

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

Для разных устройств нужно несколько размеров: 32х32 для вкладки браузера, 180х180 для экрана iPhone, 192х192 и 512х512 для Android. Их подключают несколькими строками link в head страницы либо через файл site.webmanifest - разработчику на это хватит 15-20 минут.

Если иконку уже загрузили, а в браузере всё равно пусто, чаще всего дело в кэше: браузер запоминает старую, отсутствующую иконку на несколько дней. Проверьте в режиме инкогнито или с принудительной очисткой кэша, прежде чем решить, что файл загрузился неправильно.

Подробный разбор Поиск по сайту: как сделать так, чтобы им пользовались
Все вопросы темы

Задать свой вопрос

Вопросы проходят модерацию. Ответ специалиста студии публикуется на сайте в течение пары дней.

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

Все вопросы темы «Дизайн и UX»

Нужен сайт или доработка?

Опишите, что нужно сделать. Вернёмся с расчётом и предложением по структуре.