Практика · Логотипы
Как сделать фавиконку из логотипа и проверить читаемость
Фавиконка помогает различать вкладки браузера. Полный логотип со слоганом обычно для нее слишком сложен: подготовьте отдельную упрощенную версию.
Короткий ответ
Фавиконка — маленький квадратный знак для вкладки браузера и других интерфейсов. Обычно лучше работает одна буква или простой символ, а не полный логотип со слоганом. Ее нужно отдельно экспортировать и подключить на сайте.
Повторите на своем названии
От полной версии к иконке вкладки
- 1
Выделите узнаваемую часть
Возьмите символ или первую букву. Для учебного «Север» оставьте «С», а не всю надпись с подписью. Проверьте, не становится ли знак слишком похожим на обычную системную иконку. Узнаваемость поддерживают знакомая форма и цвет, но мелкий текст ее не добавляет.
- 2
Упростите квадратную композицию
Расположите элемент по центру и оставьте воздух по краям. Очень тонкие линии и маленькие промежутки потеряются. В предпросмотре сравните 16 и 32 пикселя при обычном масштабе; увеличение помогает увидеть дефект, но не заменяет проверку реального размера.
- 3
Выберите нужные файлы
В комплекте редактора есть небольшая иконка и версия для значка устройства. При этом требования конкретной платформы нужно проверить отдельно. Для Google Search актуальная документация рекомендует квадратную иконку больше 48×48 пикселей; маленький браузерный файл не следует считать универсальным для всех мест.
- 4
Подключите и проверьте
Загрузите файл через поле фавиконки в настройках сайта. Если настраиваете HTML сами, добавьте rel="icon" со ссылкой на файл в head главной страницы. Проверьте, что адрес открывается без авторизации. Смена иконки в поиске происходит после повторного обхода, а не сразу после сохранения.
Где нужен какой вариант
| Размещение | Что учитывать |
|---|---|
| Вкладка браузера | Рисунок должен читаться очень маленьким |
| Значок на устройстве | Проверить требования платформы к размеру и полям |
| Поисковая выдача | Квадрат, доступность роботу, требования поисковика |
| Шапка сайта | Обычно полная версия; фавиконка ее не заменяет |
Отличайте кеш от ошибки
Браузер способен показывать старую картинку после обновления. Проверьте сайт в новом профиле или приватном окне и убедитесь, что используется ожидаемый адрес. Не меняйте несколько параметров одновременно.
Если сайт работает на разных поддоменах, проверяйте каждый хост. Настройка одного адреса не всегда применяется к другому. Сначала добейтесь правильного подключения, затем оценивайте внешний вид.
Типичные ошибки и как их исправить
Уменьшен весь логотип со слоганом
Получается набор точек. Экспортируйте отдельную компактную композицию.
Иконка не обновилась — значит файл плохой
Сначала исключите кэш браузера и проверьте фактический URL. Поисковик обновляет отображение отдельно.
Фавиконка скрыта от робота
Файл и главная страница должны быть доступны. Само соблюдение правил не гарантирует показ иконки в выдаче.
Разбор решения
Из «Север» в маленький знак
Сравните простой символ и букву «С». Полное слово на 16 пикселях может уже не читаться. Выбирайте силуэт, который различим без увеличения, и оставляйте немного места по краям.
Как понять, что результат готов
Проверьте открытую вкладку рядом с несколькими другими сайтами. Знак должен быть различим без чтения мелкого текста. Сохраните исходную компактную версию: если позже понадобится другой размер, его лучше экспортировать из исходника, а не увеличивать маленький PNG.
- Нет мелкого слогана.
- Знак виден при 16 и 32 пикселях.
- Файл подключен как иконка сайта.
- Проверены адрес и кеш.
Частые вопросы
Почему нет мгновенного обновления в поиске?
Поисковику нужно повторно обработать сайт. Корректная настройка не означает мгновенного изменения выдачи.
Можно использовать полное название?
Только если оно различимо в маленьком квадрате. Обычно лучше отдельный знак или буква.
Документация по теме
Google Search Central: требования к фавиконке и ее подключение
Проверьте решение на своем логотипе
Соберите вариант, сравните его с примером и проверьте на нужном носителе. Редактирование и комплект файлов бесплатны; для получения файлов нужен email. Телефон необязателен.
Открыть конструктор логотипов