Фавиконы важны для веб-страниц не только с точки зрения дизайна. Помимо прочего, этот значок изображения облегчает пользователям навигацию в Интернете и использование устройств, а также влияет на позиционирование сети в поисковых системах.
Что означает фавикон?
Это маленький значок изображения с большим влиянием. Он может быть расположен, например, в левой части вкладки браузера и в этом случае позволяет пользователю постоянно иметь обзор всех открытых страниц. Фавиконы обычно отображают упрощенный логотип или изображение, которое легко связать с соответствующей веб-страницей. Другими словами, важность фавикона заключается в его способность направлять пользователя, когда он просматривает Интернет или использует устройство . Кроме того, это позволяет усилить присутствие веб-сайта.
Идеального фавикона не существует: его дизайн варьируется в зависимости от характеристик бренда. Однако, учитывая, что сама иконка имеет всего несколько пикселей, лучше не использовать причудливые логотипы, перегруженные деталями. В этих случаях рекомендуется использовать более простую версию оригинального логотипа в качестве фавикона.
О важности фавикона можно догадаться, если обратить внимание на термины, входящие в состав этого слова: с одной стороны английский термин «фаворит», а с другой — «иконка». То есть при фавиконе делается ссылка на «иконка для избранного». Эти маленькие изображения появляются на вкладках браузера, а также в закладках веб-страниц. Кроме того, фавиконки теперь можно найти как значки приложений, в меню поиска, в результатах поиска браузера и в истории посещенных страниц .
Насколько важен фавикон?
Есть несколько причин, по которым фавикон так важен для веб-страницы:
- Профессионализм : у каждого профессионального веб-сайта есть фавикон. Включив один в свой веб-проект, вы можете укрепить доверие посетителей к вашему бренду и показать, что вы обращаете внимание и на мельчайшие детали. Даже если большинство интернет-пользователей не знают, что такое фавикон, они сразу заметят его отсутствие.
- Идентификация : использование фавикона также отвечает практическим соображениям. Пользователи смогут быстрее найти ваш сайт благодаря этому маленькому символу, даже если у вас одновременно открыто несколько вкладок. Значок также позволяет пользователям идентифицировать ваш бренд в списках приложений или поисковых системах.
- Укрепить бренд – Хороший имидж бренда позволяет пользователям быстро узнавать ваш бренд, что может сыграть важную роль в принятии ими решений. Создание соответствующего фавикона так же важно, как и создание логотипа.
Какое влияние фавиконки оказывают на SEO?
Хотя бы косвенно, фавикон также очень важен в SEO. Хотя маленькие значки не имеют прямого влияния на ранжирование в поисковых системах, есть очевидные причины их важности:
Что нужно учитывать при создании фавикона?
Трудно однозначно сказать, что представляет собой хороший фавикон. Безусловно, бренд и его дизайнерская линия будут влиять при его создании. Хотя многие компании используют свой логотип в качестве фавиконки, на самом деле это не всегда так. Все зависит от того, останется ли логотип привлекательным при уменьшении его размера и разрешения. Чтобы создать правильный фавикон, важно знать некоторые основные правила:
- Фирменный стиль – Примеры удачных фавиконов всегда соответствуют фирменному стилю компании. В тех случаях, когда вы не можете использовать свой логотип в качестве фавиконки, выбранный вами значок изображения должен с первого взгляда соответствовать остальному дизайну. Только так можно сохранить самобытный характер бренда.
- Меньше — больше – Учитывая небольшой размер фавиконов, не рекомендуется включать в них причудливые детали или дизайн, особенно если они будут отображаться на смартфонах. Хорошее предложение favicon может включать только инициалы бренда. На самом деле фавикон очень редко отображает полное название бренда. Поэтому разумнее использовать начальную букву или простой, но значимый значок.
- Подходящие цвета : цвета, используемые в фавиконе, также должны соответствовать фирменному стилю. Если вы можете это сделать, используйте контрастные цвета — это хорошая идея, поскольку так вы сможете быстрее привлечь внимание. Однако обратите внимание, что каждый браузер может отображать фавикон по-разному. Например, они могут отображаться на белом или сером фоне, что может немного изменить влияние цветового контраста.
Какого размера должны быть фавиконы?
Если вы хотите разместить фавиконку на своем веб-сайте, вы должны соблюдать размер фавиконки. Хотя средний размер обычно составляет 16 x 16 пикселей, 32 x 32 пикселя или 48 x 48 пикселей, некоторые браузеры не следуют этому правилу. Откройте для себя исключения:
| Браузер или устройство | Размер |
|---|---|
| Интернет-магазин Chrome | 128 х 128 пикселей |
| Гугл ТВ | 96 х 96 пикселей |
| Интернет Эксплорер 9 | 24 х 24 пикселей |
| Главный экран iPad | 72 х 72 пикселей |
| iPhone (старые модели) и iPad Touch | 57 х 57 пикселей |
| Домашний экран iPhone 4 | 114 х 114 пикселей |
| Быстрый набор номера Opera | 195 х 195 пикселей |
Какие форматы поддерживаются?
Фавиконы могут быть созданы в разных форматах. Наиболее распространенным является .ico, формат файла, допускающий различную глубину цвета и разрешение. Кроме того, он совместим с большинством браузеров. Однако .png, .gif или .svg также можно использовать для создания этих значков изображений, хотя эти форматы не всегда совместимы со всеми браузерами. Формат .jpg имеет меньшее разрешение.
Примеры фавиконов
Чтобы дать вам представление о том, насколько универсальными могут быть эти крошечные значки, вот три хорошо известных примера фавиконов.
Google включает в фавикон только его начальную букву, которая выделяется комбинацией цветов. Фактически, именно радужный дизайн отличает браузер от большинства фавиконов.
LinkedIn использует другой подход и служит доказательством того, что фавикон не всегда должен включать первую букву имени. Белая «внутри» на синем фоне — это мощно и хорошо известно.
YouTube показывает, как хороший фавикон может работать и без текста. Кнопка воспроизведения, которая также принадлежит логотипу компании, безошибочно узнаваема и выделяется в любом браузере.
В Digital Guide вы можете найти множество статей, которые будут очень полезны для вашего онлайн-проекта. В дополнение к идеальному руководству по стилю для веб-сайтов вы можете найти информацию о том, как добавить фавикон в WordPress, размер и форматирование логотипа, а также другие советы и рекомендации по созданию логотипа.