Favicon

Что такое Favicon?

Favicon (Favorite icon) – значок веб-сайта или отдельной страницы, который располагается во вкладке браузера рядом с названием, в закладках и других приложениях либо элементах интерфейса.

Для этой цели чаще всего используется формат ico, а размеры значка составляют 16х16 пикселей.

Первым браузером, который поддерживал значки для сайта, стал пятый Internet Explorer, который был выпущен Майкрософт весной 1999-го года. Для этой цели в корневой каталог помещался специальный файл favicon ico, который и распознавал браузер.

Дополнительной возможностью стало определение количества посетителей, добавивших страницу в закладки. Оно высчитывалось на основе количества обращений к файлу.

 

Новые возможности

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

Теперь они используются в каталогах, социальных сетях и закладках, а иногда – в выдаче поисковой системы.

Современные браузеры могут также поддерживать собственные значки, которые устанавливаются отдельно для каждой страницы. Размер, глубина цвета и формат может варьироваться, в зависимости от поставленной задачи.

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

 

Основные характеристики favicon

Прежде чем создать favicon, необходимо обратить внимание на основные характеристики, которым должен соответствовать готовый значок. Этот логотип – визитная карточка сайта, ведь именно он первым попадается на глаза и постоянно там остается. Лучше всего выполнять его в том же стиле, что и сам ресурс. Цветовая гамма, элементы дизайна и другие детали должны гармонично сочетаться и дополнять друг друга. Чем больше общего – тем лучше. Важно помнить, что основная функция иконки – ассоциация с сайтом. 

Также значок должен быть максимально прост для восприятия, не перегружен лишними деталями. Пользователь должен легко понимать, что изображено на логотипе. Не следует размещать на нем сложные изображения. Достаточно простых символов, которые наверняка запомнятся посетителям сайта. Дополнительные идеи может предоставить favicon generator. Кроме того, всегда можно обратиться к профессиональным дизайнерам.

Лучше всего, если иконка изначально будет хорошо запоминающейся. Для этого подойдут известные символы в оригинальной интерпретации. Знакомые образы, которые легко описать и охарактеризовать одним словом, дольше хранятся в памяти. Чтобы понять это, достаточно обратить внимание на обозначения известных и популярных ресурсов, социальных сетей и других порталов.

Еще один вариант – использование в пиктограмме тематики сайта. Здесь важно соблюдать одно условие: значок должен описывать весь сайт, а не его часть или одно из направлений. Например, нельзя на иконке магазина техники изображать лишь одно устройство.

Онлайн генераторы

Создать favicon онлайн можно при использовании специальных генераторов и других инструментов. Для примера можно рассмотреть два популярных варианта, которые отличаются сложностью и масштабом работ.

Faviсon.cc

Один из самых популярных сервисов, который позволяет создать favicon с нуля, для чего сперва необходимо нажать на соответствующую кнопку в левой части окна. Рабочая область располагается в центре, а каждый ее квадратик – пиксель будущей иконки.

Чтобы закрасить пиксель цветом, необходимо среди инструментов справа выбрать pick existing color и отыскать интересующий цвет на палитре. Чтобы удалить неправильную закраску, достаточно выбрать transparent и кликнуть по ошибочному квадрату, который сразу станет прозрачным.

Кнопка move позволяет перемещать иконку по холсту, а preview – отличный способ посмотреть на результат в реальном масштабе.

Готовый favicon скачать поможет одноименная кнопка, при нажатии на которую на компьютер будет загружен графический файл, который затем может быть использовать в веб-разработке.

Более того, сервис позволяет загрузить готовый вариант и отредактировать его по собственному желанию. Этой цели служит кнопка import image. На компьютере изображение находится по стандартной схеме, через обзор. Затем нужно задать соотношение сторон и конвертировать картинку в квадрат необходимого размера. Для работы со сторонами используются пункты keep dimensions (для сохранения изначальных параметров) и shrink to square (изображение будет искажено по оси для придания квадратной формы).

После нажатия кнопки upload изображение будет загружено и готово для дальнейшей работы. При этом сохраняются все возможности редактирования, как при создании файла с нуля. Готовый результат favicon скачать можно по тому же принципу.

Как и некоторые другие аналоги, этот сервис предлагает готовые коллекции favicon ico, среди которых можно отыскать решение на любой вкус. Здесь представлены те значки, которые пользователи выложили в общий доступ. Возможность упорядочивания коллекций позволяет легко ориентироваться в них.
 

Favicon.ru

В противовес предыдущему варианту можно рассмотреть сервис favicon.ru, который отличается простотой и доступностью. Русифицированная версия позволяет преобразовать имеющееся изображение в необходимые для иконки размеры и формат. Здесь нет дополнительных доработок и настроек, что ограничивает возможности пользователей, но зато существенно упрощает эксплуатацию инструментов. Генераторы такого типа незаменимы, когда интересующее изображение уже есть в наличии, и требуется только подогнать его под требования веб-разработчиков.

Эти два варианта – лишь популярные примеры, на основе которых можно сориентироваться для дальнейшей работы. Разумеется, всегда можно подобрать другой favicon generator, среди которых можно отметить ряд других популярных и проверенных решений:

  • FaviconGenerator – зарубежный аналог Favicon.ru.
  • GraphicsGuru – сервис, позволяющий указать путь к изображению и сразу сгенерировать из него готовую иконку.
  • WebScriptLab – простой конструктор, идеально подходящий новичкам.
  • Iconi – сервис, который позволяет не только скачивать готовую иконку, но и получить ссылку на файл.
  • AntiFavicon – оригинальный генератор для созданий иконок с надписями и работы с цветом.
  • DeGraeve – мощный аналог Faviсon, похожий на него функционалом, благодаря чему можно создавать значки с нуля или обрабатывать любые существующие изображения.
  • FavIcon from Pics – простой ресурс доя создания favicon онлайн, где требуется выбрать картинку и скачать ее после преобразования в формате ico либо gif.
  • Generator – еще один сервис для генерации иконки из готового изображения или создания с нуля в многофункциональном редакторе.

Конечно, лучше всего выбирать уникальные иконки. Но при отсутствии желания, возможности или необходимости в дополнительных сложностях, можно обратиться к другим сервисам, представляющим тематические коллекции и обширные базы материалов. Среди больших и известных галерей:

  • Iconi;
  • Gallery;
  • Audit4web;
  • Favicon.cc.

Найти все эти и многие другие варианты каждый может самостоятельно, послав соответствующий запрос любой поисковой системе.

На практике ознакомившись с разными сервисами, не составит труда подобрать максимально практичный и удобный вариант под свои потребности.

Единственного универсального решения не существует, ведь на просторах сети представлено огромное количество инструментов, и все они имеют свои преимущества и особенности.

 

 

 

Итоги

Если у владельца интернет-ресурса еще не готов favicon для сайта, то самое время озадачиться этим вопросом.

Вместе с удобством это закономерно приводит к привлечению большего количества посетителей, а также к сохранению образовавшейся целевой аудитории. Спроектировать подходящий вариант можно самостоятельно, при помощи специальных программ или поручить задание соответствующим специалистам.

Также существуют готовые галереи и коллекции, которые можно использовать при работе. Выбор зависит от поставленной задачи, предпочтений владельца сайта и других факторов. 

Популярные статьи
{related}
Показать еще
Нашли ошибку в тексте?

Выделите фрагмент с ошибкой.
Нажмите







Еженедельная рассылка
лучших материалов LS

Спасибо! Мы записали Вашу почту,
на неё придет письмо со ссылкой для подтверждения.

Похоже, произошла ошибка. Попробуйте
перезагрузить страницу и попробовать снова.