5330
Содержание
- Что такое Favicon
- Почему favicon очень важен?
- Примеры Favicon
- Как создать Favicon
- Как создать иконку в Photoshop
- Как добавить иконку на сайт
Что такое Favicon?
Favicon – это небольшая иконка сайта, которая отображается на любой открытой вкладке браузера. Она выполняет роль мини-логотипа компании и помогает идентифицировать сайт, в особенности, когда страниц открыто слишком много, и заголовки вовсе исчезают.
Обычно favicon создают в классическом формате ICO. Стандартный размер иконки составляет 16 x 16 пикселей с 16, 24 или 32-битной поддержкой цвета и прозрачности. Намного позже, стали появляться новые расширения, которые зависят от типа и операционной системы устройства: 32 x 32, 48 x 48, 96 x 96 и другие. Но обычно браузеры отображают иконки в формате 16 x 16.
Основная функция favicon – это визуальное представление сайта в одном небольшом изображении. Поэтому, чем больше общего у вашего сайта и иконки, тем лучше. Чаще всего favicon создают на основе логотипа компании или цветовой гаммы бренда. Данный значок должен быть релевантным и четким: пользователь должен сразу понять, что на нем нарисовано, и легко запомнить его.
Почему favicon очень важен?
Основная причина, по которой вам необходим favicon – улучшение пользовательского опыта на сайте.
Этот знак самоидентификации изначально был создан для быстрого визуального поиска необходимой страницы среди тысяч закладок в интернете. Очевидно, это облегчает работу: гораздо проще найти нужную вкладку по изображению, ассоциирующуюся с определенным сайтом, чем просматривать разные названия вкладок.
В некоторых поисковых системах favicon отображается в результатах поисковой выдачи напротив каждого сайта. Яндекс уже давно реализует данную функцию, в то время как Google начал тестировать ее внедрение только в 2019 году (в десктопной версии Google фавиконов пока нет, при этом в мобильной выдаче они присутствуют).
Пример отображения фавикон в выдаче поисковой системы Яндекс:
Пример отображения фавикон в мобильной выдаче Google:
Причины появления фавикон в поисковой выдаче: повысить кликабельность сниппетов за счет дополнительного графического элемента. Вполне вероятна ситуация, что пользователь может кликнуть по ссылке, занимающей более низкую позицию, если увидит знакомый значок. В связи с этим сайты без иконок имеют более низкий CTR, так как на них меньше обращают внимания из-за отсутствия favicon в сниппете выдачи.
Без сомнения, данный инструмент будет полезен для любого сайта. Он повышает узнаваемость бренда и упрощает жизнь пользователя.
В свою очередь, сайт без такой персонально идентифицируемой иконки будет сопровождаться общим символом браузера.
Примеры Favicon
Поскольку favicon стал обязательным элементом при создании сайтов, мы предлагаем вам ознакомиться с некоторыми примерами, чтобы понять принципы создания собственной иконки. Ниже представлено изображение верхней части браузера с самыми различными иконками на вкладках:
Чтобы узнать больше информации о том, как иконка отображается на разных устройствах или браузерах, воспользуйтесь нашей SEO-проверкой.
Как создать favicon для сайта?
Существует несколько способов создать favicon:
1. Нарисовать его самостоятельно в графическом редакторе.
2. Нарисовать иконку в специальном онлайн-сервисе.
3. Найти и скачать иконку, воспользовавшись бесплатным стоком (Findicons.com или Iconizer.net).
4. Загрузить имеющийся логотип или любое другое изображение в онлайн-генератор favicon, представленных ниже, а затем сохранить его:
Однако, если вы планируете запустить масштабный сайт и хотите, чтобы ваш бренд знали повсеместно, то, вероятно, вам стоит обратиться к профессиональному дизайнеру, чтобы создать что-то уникальное и подходящее вашей компании.
Как создать иконку в Photoshop?
Photoshop – популярная графическая программа для создания изображений любых форматов, но есть одна проблема – она не поддерживает полноценную работу с файлами формата «.ico». Поэтому вам потребуется скачать и установить его плагин от Telegraphics.
Однако, лично я рекомендую использовать связку: Photoshop + программа Art Icons Pro – это популярный редактор иконок (российская разработка), который позволяет создавать и редактировать иконки. Программа поддерживает экспорт и импорт множества графических форматов.
Работать в «Art Icons» просто. Как делаю обычно лично я, когда хочу создать favicon:
- Захожу на сайт, для которого нужно сделать иконку.
- Делаю скриншот места на сайте, где размещен логотип.
- Открываю Photoshop, вставляю изображение из буфера обмена.
- Обрезаю изображение скриншота так, чтобы логотип был в его центре + нужно иметь в виду, что после обрезки само изображение должно быть квадратной формы.
- Далее сохраняю его в PNG. Закрываю Photoshop.
- Затем открываю сохраненную картинку в «Art Icons».
- Уменьшаю изображение до размера 16 x 16 пикселей: "Инструменты -> Конвертировать формат..." и выбираю размер 16 на 16 и цвета "True Color + Apha (32 бит)".
- Затем выбираю "Файл -> Сохранить как..." и выбираю формат "Icon (*.ico)".
- Все.
Ну и самый простой вариант – онлайн-генераторы Favicon. Примеры подобных онлайн-сервисов:
Как добавить иконку на сайт?
После того, как вы создали иконку, необходимо загрузить ее на сайт – вставить в код страницы. Для этого выполните следующие действия:
- Загрузите favicon.ico на ваш сервер в корневую папку.
- В блоке HEAD вашего сайта пропишите ссылку на favicon в виде:
- <link href="/favicon.ico" rel="shortcut icon">.
- Все!
Вот видите – все просто!
Создайте свой favicon и убедитесь в этом сами!
Другие статьи:
