Возможно, у вас вызовет сомнение тот факт, что иконка сайта и заголовок окна имеют какое-то отношение к веб-типографике, спешу вас заверить. Имеют! Как корешок книги к её обложке. Не буду лить воду и сформулирую правила оформления иконки и заголовка окна, созданые для повышения удобства при навигации по вкладкам.Иконка
- Сайт должен иметь иконку, хоть чёрный квадрат, хоть кружок. Это необходимо для того чтобы пользователь мог отличить сайт в бесконечном ряду вкладок, в истории или в избранном.
- Иконка не обязана повторять логотип сайта, всё-таки 16×16. Тут важно сохранить «читаемость», чтобы иконка не превратилась в цветное пятно. Её задача состоит в визуальной идентифицикации сайта. Иконка может напоминать логотип или содержать фирменные цвета.
- Использование различных иконок для различного контента снижает различаемость, поэтому использовать разные иконки имеет смысл лишь в случае крайней необходимости.
- Иконку можно использовать как индикатор входящих сообщений или каких-либо изменений, с учётом сохранения различаемости. Например:
При проигрывании медиаконтента желательно отображать иконку со значком проигрывания, чтобы пользователь знал «в каком ухе у него жужжит»! Но следует помнить, что при добавлении в избранное сохранится та иконка которая отображалась в момент добавления, поэтому следует использовать её там где происходит быстрое потребление информации (twitter, вконтакте, youtube и т.п.), на сайтах предназначеных для долгого сплошного чтения такая индикация может только отвлекать. - Иконка должна быть статичной и не должна содержать анимации.
Возможно вы подумаете, что небольшая анимация с задержкой в 5-10 секунд может быть полезна, но представьте себе ситуацию, когда у пользователя открыто несколько вкладок, допустим 5, даже при такой задержке, каждые 2 секунды будет проигрываться анимация одной из иконок! А это создаёт лишнюю работу глазам.
Заголовок окна
- Заголовок окна должен содержать текст близкий по содержанию к заголовку первого уровня (он должен быть один на странице). Т.е. он должен сообщать пользователю содержимое страницы.
- Заголовок должен быть кратким, не более 5 слов.
- Если в заголовоке отражается иерархия, то порядок должен быть от меньшего к большему, например:
«Favicon — Типографика — Хабрахабр»
Но не на оборот! Здесь важно помнить, что иконка идентифицирует ресурс, а заголовок — контент. - Знаки препинания подчиняются правилам для обычных заголовков: точку опускаем, вопросительный и восклицательный знаки оставляем.
Резюме
Как видите правила очень просты и подчинены логике. А некоторые используются для поисковой оптимизации, так что вдвойне полезны. :)
Тонкости
Следует отметить, что Firefox, Safari и Opera (в IE не проверял) поразному понимают и интерпретируют слеш идущий перед адресом иконки, поэтому его (слеш) лучше опускать. Так же следует отметить, что Firefox кеширует иконки надолго, поэтому при смене иконки имеет смысл указать версию в имени файла.
В помощь
Для полноты материала добавлю ссылки на генераторы иконок
- Favicon Generator
- Favicon.cc позволяет создавать иконки прямо в окне браузера, генерирует иконку налету и отображает её в браузере и в специальном окошке. Рекомендую.
- Favicon.com.mx
- 20 лучших генероторов иконок
