Картинка - это больше, чем тысяча слов, даже если эта картинка - favicon размером 16x16 пикселей.

Фавикон (favicon; от favorite icon) появился с релизом Internet Explorer 5 в 1999 году.

Изначально он показывался только в панели закладок IE, а также, если вы добавили просматриваемую страницу в закладки, после URL в адресной строке.

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

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

Иногда фавикон является просто пропорционально уменьшенной версией логотипа компании.

Этот маленький элемент может быть использован для расширения функционала вашего сайта или для создания интереса.

Однако, с фавиконами можно сделать много чего интересного.

Создание фавикона

Ограничение в 16x16 пикселей - не только досадный лимит, но и пространство для креатива. Это действительно сложно - создать фавикон, отвечающий требованиям выше, и при этом сохранить его достаточно маленьким, чтобы он влез в пространство 16x16 пикселей.

Дизайнеры часто не уделяют достаточного внимания фавикону и тратят на него мало времени.

Лого Chanel в фавиконе выглядит хорошо, потому что оно пропорционально уменьшено и по-прежнему передает чувство богатства и роскоши.

Создание красивого фавикона, который является сжатой версией логотипа - это не столько про создание фавиконки, сколько про дизайн логотипа (прим.: слишком детализированный лого, уменьшенный до 16x16 пикселей, будет выглядеть не очень хорошо).

В связи с небольшими размерами фавикона, геометрические формы и простая типографика - лучший вариант.

Сложный дизайн фавикона обычно выглядит не очень хорошо, потому что в таких размерах детали утрачиваются, и фавикон превращается в непонятное пятно. Например, фавикон Starbucks будет рзаборчивым, в то время как иконки Pizza Hut и Virgin при уменьшении до 16x16 пикселей будут выглядеть непонятно.

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

Примерно половина наиболее популярных компаний не используют несколько букв или цифр в своих фавиконов, и примерно треть использует одну букву или цифру.

Для получения более подробной статистики вы можете ознакомиться с этим материалом, автор которого изучил более 100 фавиконов.

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

Простая идея, которую вы можете применить к своему проекту - это использования разных фавиконов для разделения тестовой версии и версии для пользователей.

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

Этот пример взят из поста Михаэла Махемофф.

Код и техника подробно расписаны в этом посте. Автор предоставляет пошаговое руководство.

2. Креативные фавиконы

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

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

Но, однако, многие компании создают интересные фавиконы, которые улучшают опыт взаимодействия с их сайтом.

Youtube

Фавикон YouTube - это отличный пример креативного и в то же время простого дизайна. Вместо того, чтобы сжать основной логотип, YouTube использует красный знак "play". Любой, кто видит этот фавикон, сразу же понимает, что эта страница будет содержать музыку, видео и другой медиа-контент. Иконка также меняется в зависимости от текущего состояния видео. Если вы остановите видео, фавиконом станет пауза.

Sitepoint

Другой пример сайта с креативным фавиконом - SitePoint. Их иконка выполнена в форме буквы S с двумя соединёнными скобками, которые часто используются в веб-разработке и программировании. Любой веб-разработчик быстро заметит общее между компанией, веб-страницей и фавиконом.

Trello

Фавикон Trello отображает выставленный вами цвет фона. Это также срабатывает с загруженными фонами.

Mixcloud

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

Github

Фавикон Github, на котором изображён его маскот, меняет свой цвет в зависимости от текущего состояния системы.

Flickr

Когда вы загружаете фото, Flickr отображает маленький фавикон-индикатор, который показывает процесс загрузки изображения.

3. Анимированные фавиконы

Мы редко видим анимированные фавиконы, потому что они довольно сильно отвлекают. Такие иконки чаще всего делают плохо. Если анимация слишком мягкая, её, скорее всего, просто никто не заметит; яркая же анимация будет отвлекать и раздражать пользователей. Найти "золотую середину" очень сложно; к тому же, существуют фавиконы, которые практически невозможно качественно анимировать.

Анимированная иконка Antilimit

4. Динамичные фавиконы

Более полезный вариант использования интерактивных фавиконов - это динамичные иконки. Хотя сейчас большая часть сайтов и веб-приложений не используют динамичные фавиконы, в будущем это может стать стандартом. Gmail показывает в фавиконе количество непрочитанных писем и автоматически обновляется, если вы получаете новое письмо. Фавикон Google Calendar показывает текущую дату и обновляется каждый день.

Другой пример - это Campaign Monitor. Когда вы не залогинены, фавикон - это закрытый конверт; когда вы заходите в свой аккаунт, конверт открывается.

Эти динамичные уведомления расширяют функциональность сайта, но поддерживают целостность брендинга. Было бы неплохо увидеть подобный фавикон у сайтов вроде Facebook или Twitter. У нас есть все необходимые технологии для создания динамичного фавикона, но обычно его считают неважным элементом, поэтому никто (ну, почти) не уделяет ему много внимания и времени.

Чтобы создать свой собственный динамичный фавикон, изучите урок "Notify Better.js: Creating a Dynamic Favicon and Title" от Onextrapixel.

5. Фавикон-игра

Веб-разработчики раньше делали разные сумасшедшие вещи "по фану", и фавиконов это тоже коснулось. Ниже - два примера сумасшедших фавиконов.

Первый - это "Iconic History" Шан Хуанга. Это расширение для браузера позволяет вам превратить вашу историю посещений в сетку из фавиконов. Также в расширении имеются дополнительные опциии, вроде выделения сайтов, посещенных в какое-то определённое время суток (например с 12 дня до 5 вечера).

Следующий фавикон - "Defender of the Favicons" от Матье "p01" Генри, который представляет собой полноценную игру, запускающуюся прямо в фавиконе. Она создана с помощью canvas и JavaScript (им и генерируется каждый фрейм игры). Далее это конвертируется в картинку в формате PNG, которая и используется в качестве фавикона. В связи с маленьким размером фавикона игра очень простая, но она прекрасно показывает, что можно сделать из фавикона.

Матье создал ещё две фавикон-игры, "Pong" и "Fav Race".

В целом, использование фавиконов пока находится в "зачаточном состоянии". В связи с размером фавиконов, многие люди не считают, что им стоит уделять время, которое можно потратить на дизайн или разработку. Однако, с помощью нескольких скриптов вы можете увидеть преимущества использования необычных фавиконов. Динамичные уведомления могут быть следующим шагом эволюции фавикона. И, имея в качестве примера "Defender of the Favicons", мы понимаем, что с помощью фавиконов можно сделать ещё много чего, несмотря на их маленький размер.

Оригинал, переведённый Curpie.