Что такое фавикон и каким он должен быть


Часть первая. Что такое фавикон?


Лучше всего на этот вопрос отвечает Википедия:

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в вкладках и в других элементах интерфейса.


Вот пример отображения фавиконов в браузере Google Chrome:
отображение фавиконов в Google Chrome

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

Традиционно использовались изображения размера 16?16 пикселей формата ICO, помещённые в корень сайта под именем favicon.ico.

Все современные браузеры понимают явное указание положения значка в (X)HTML-коде (внутри элемента <head>), что позволяет при условии отсутствия /favicon.ico использовать для каждой страницы свой значок: <link rel="icon" type="image/png" href="/someimage.png" />, где:

  • rel может содержать и «shortcut icon» (при этом Microsoft Internet Explorer будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам — на слово «icon»)

  • href содержит абсолютный или относительный URI к файлу (в Mozilla Firefox 3.0, например, поддерживаются те же URI, что и с тегом img).

  • Форматом файла может быть png или gif, размером 16x16 или 32x32 и с 8-битной или 24-битной глубиной цвета (в Mozilla Firefox, например, может быть не только этот, но и как у тега img). При этом атрибут type должен содержать MIME-тип формата (например, image/png для PNG). Если для Internet Explorer используется формат ICO, то его MIME-тип должен быть image/vnd.microsoft.icon. Тип image/x-icon устарел в 2003 году после стандартизации типа для ICO.


Можно указать несколько изображений в разных форматах — например, строку с shortcut icon и значком в формате ICO для Internet Explorer, и строку с icon и значком в формате GIF или PNG для альтернативных браузеров.


Часть вторая. Каким должен быть фавикон?


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

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

2. Фавикон должен быть прост для восприятия: пользователь должен сразу понимать, что на фавиконе нарисовано. Не стоит пытаться разместить в фавиконе целую картину: достаточно одного-двух узнаваемых элементов.

3. На фавиконе можно изображать пиктограмму тематики сайта (например - телефончик для интернет-магазина телефонов) - но только в том случае, если эта пиктограмма полностью описывает сайт (не стоит на фавиконе магазина бытовых товаров изображать стиральную машину, если там продаются ещё и утюги с пылесосами).

4. Очень желательно делать фавиконы запоминающимися, поэтому будет лучше использовать знакомые пользователю образы, которые он может назвать каким-то словом (фавиконом ЖЖ, к примеру, является "Карандашик").

Обсудить статью в моём ЖЖ: yanajy http://yanajy.livejournal.com/8105.html

Поделиться ссылочкой: