Что такое фавикон и как создать фавикон
Как уважающий себя веб-дизайнер, ступивший на эту нелегкую тропу, вы просто обязаны знать все основные составляющие образцового сайта. Сегодня мы поговорим о таком важном элементе, как фавикон. О том, что это такое и с чем его, собственно, едят.
Что такое фавикон?
Фавикон — это ни что иное, как значок веб-сайта или веб-страницы. Как правило он отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Произошло слово от английского сочетания FAVorites ICON (избранные иконки) Как было сказано выше, фавикон располагается на вкладках браузера и служит для удобства пользователя, потому как намного легче найти нужную вкладку среди множества открытых по знакомому оригинальному изображению. Ниже я привел пример того, как выглядит фавикон, расположенный на вкладке браузера.
Не стоит также забывать про то, что фавикон сайта также показывается в поисковой выдаче поисковиков, каталогов, сервисов и т.д.:
Для того, чтобы создать фавикон необходимо знать:
Стандартом считается использовать изображение размера 16х16 пикселей, преобразованное в формат ICO. Как правило это изображение помещается в корневую папку сайта и имеет имя favicon.ico Также вы можете использовать в качестве фавикона несколько различных изображений в разных форматах — например, для Internet Explorer это только ICO, а другие браузеры могут содержать и файлы с расширениями GIF или же PNG. Все современные браузеры понимают явное указание положения значка в (X)HTML-коде (внутри элемента <head>), что позволяет при условии отсутствия /favicon.ico использовать для каждой страницы свой значок: <link rel=”icon” type=”image/png” href=”/планируемое-изображение.png” />, где:
- rel может содержать и «shortcut icon» (при этом Microsoft Internet Explorer будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам — на слово «icon»)
- href содержит абсолютный или относительный адрес к файлу (в Mozilla Firefox, например, поддерживаются те же URL, что и с тегом img).
- Форматом файла может быть png или gif, размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета (в Mozilla Firefox, например, может быть не только этот, но и как у тега img). При этом атрибут type должен содержать MIME-тип формата (например, image/png для PNG). Если для Internet Explorer используется формат ICO, то его MIME-тип должен быть image/vnd.microsoft.icon. Тип image/x-icon устарел в 2003 году после стандартизации типа для ICO.
Как должен выглядеть хороший фавикон?
Итак, мы разобрались с тем, что такое фавиконы и где они используются. Теперь о том, каким должен быть хороший фавикон:
1. Так как мы уже знаем, что фавикон – это своего рода визитная карточка, то логичным является то, что выполнен он должен быть в том же стиле, что и сайт. Чем больше общего будет фавикона и сайта – тем будет лучше. Бесплатный совет: при разработке фавикона желательно использовать цветовую гамму или элементы дизайна сайта или логотипа, так как фавикон должен ассоциироваться с сайтом – это его основная функция.
2. Так как 16х16px – это явно не холст, а очень маленькая площадь на экране, то размещать сложные и изобилующие многочисленными деталями изображения я настоятельно не рекомендую.
Фавикон должен быть прост для восприятия и пользователь должен сразу понимать, что на нем изображено. Достаточно нескольких узнаваемых элементов и дело в шляпе.
3. Отображение в фавиконе логотипа или элементов дизайна сайта – это не догма. Зачастую дизайнеры прибегают с помощи изображения, которое характеризует тематику и направленность сайта.
Как создать фавикон?
Для того чтобы создать фавикон вы можете воспользоваться несколькими путями.
Во-первых- это самостоятельное создание (отрисовка) при помощи пакетов графических программ, таких как Adobe Photoshop, Adobe Illustrator, CorelDraw и т.д. Просто делаете изображение размером 16х16 px, как говорилось выше, и загрузить его на сайт типа favicon.htmlkit.com или ему подобный. Это нужно для того, чтобы перевести получившюся у вас картинку в нужный формат (ICO).
Второй путь, если вы не владеете навыками работы в программах для создания графики, то у вас есть возможность нарисовать фавикон онлайн.
Это можно сделать на сайтах типа favicon.ru или favicon.cc.
