Создать favicon.ico для вашего сайта

Быстрый и простой способ создать фавикон !

Что такое favicon (фавикон) и как правильно его сделать?

Для чего нужен фавикон?

По большому счету favicon разработчику и владельцу сайта, в общем-то, и не нужен :-) Однако он может доставить эстетическое удовольствие (лично я сайты без фавиконок или со стандартными фавиконами CMS воспринимаются, как недоконченные полуфабрикаты J ). Так что имиджевую функцию фавиконки выполнять вполне могут (а могут и «спалить» вашу дырявую CMS для злоумышленника).

Кроме того отображение favicon помогает быстрее ориентироваться во множестве открытых вкладок браузера (а их у меня открыто от 2 десятков до полусотни одновременно!) и закладках избранных веб-страниц. Согласитесь, удобно. Хорошее юзабилити при наличии уникального favicon налицо :-)

Решили, что симпатичная фавиконка вашему сайту все-таки нужна? Тогда пора браться за дело!

Что представляет собой Favicon?

Изначально фавиконки существовали в одном единственном формате – картинка формата .ico размером 16х16 пикселей. И никак иначе.

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

Что до форматов, то и здесь у нас уже появилась возможность дать волю технической фантазии: поддержка форматов favicon браузерами

Правда, в поддержкой фотматов у браузеров, как обычно, не все гладко

Как установить фавикон на сайт?

По умолчанию браузеры самостоятельно пытаются найти файл favicon.ico в корневой директории вашего сайта. Даже если нигде явно не прописана фавиконка, а по факту она есть, браузер найдет ее и отобразит на вкладочке. Именно поэтому на многих сайтах, созданных на коленке с «бесплатным» шаблоном на WordPress, Joomla или любом другом популярном движке.

На практике фавикон может лежать где угодно в пределах вашего сайта в любом из допустимых форматов. Нужно только прописать в разделе <head> всех веб-страниц строку

<link rel=”shortcut icon” href=”favicon.ico” type=”image/vnd.microsoft.icon”> с явным указание пути (в относительном или абсолютном формате) к вашей фавиконке.

Ранее для favicon.ico указывался MIME-тип image/x-icon, теперь же данный формат считается устаревшим и официальное «майкрософтовское» слово гласит, что с 2003 года (после стандартизации формата) файлам .ico соответствует MIME-тип image/vnd.microsoft.icon.

Вместо shortcut icon в атрибуте rel можно указать только icon, однако IE реагирует только на shortcut icon и дружит только с фавиконками формата .ico. Остальные браузеры shortcut в атрибуте rel игнорируют и учитывают только запись icon.

При желании, конечно, вы можете дополнительную запись:

<link rel=” icon” href=”favicon.png” type=”image/png”>

Естественно, для каждого типа иконок нужно не забывать указывать соответствующий MIME-тип: image/png – для png image/gif– для gif и т.д.

При несовпадении реального MIME-типа favicon с объявленным на веб-странице, браузер может не отобразить фавикон.

Если с технарской стороной все понятно, то предлагаю перейти к рукоделию :-)

Как сделать хороший favicon для своего сайта?

Для создания favicon вам потребуется любой графической редактор (например, фотошоп или его бесплатный аналог gimp) и немного фантазии. От себя еще посоветую не особенно давать волю творчеству: используйте 2-3 цвета при рисовании фавикона избегайте мелких деталей постарайтесь озобразить максимально простой объект на контрастном фоне в противном случае вместо красивой картинки в итоге вы рискуете получить разноцветное квадратное пятно.

Готовый файл фавикона лучше всего сохранить в png или gif, размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета. А вот с получением файла favicon.ico вам придется попотеть.

Дело в том, что этот специфический формат большинство графических редакторов не поддерживает. Выходов тут несколько: можно просто забить на формат ico (но не нужно) воспользоваться онлайн-генераторами фавиконок (лично я этот способ не считаю самурайским, поэтому ни разу им не пользовался) создать фавиконку в формате gif и вручную поменять расширение .gif на .ico (будет работать в большинстве браузеров, но упомянутое несовпадение MIME-типов уже гарантировано) воспользоваться триал-версией специального платного редактора иконок, но лично мне платить за такую фигню совершенно не хочется даже при том, что я уже привык платить за хороший и нужный софт или пользоваться бесплатными аналогами.

Если же вы хотите жить честно и делать все «правильно», то рекомендую скачать программу XnView. Она бесплатна и функциональна (и фотографии поможет быстренько просмотреть, и красные глаза поможет удалить одним кликом), а главное умеет сохранять всякие «gif-ки и png-шки» в «правильные» .ico :-)

Favicon.ico для мобильных устройств

Если вы рассчитываете что на ваш сайт будет заходить пользователи с мобильных устройств, то придется попотеть дополнительно. Дело в том, что Apple как обычно решили блеснуть и придумали свой формат иконок WebClip, который используется браузером Safari в iPhone и iPod.

Для того, чтобы «fovicon для Apple» заработал на вашем сайте, нужно прописать в разделе <head>

<link rel=”apple-touch-icon” href=”apple-touch-icon.png” />

Размер фавикона WebClip изначально составлял 57х57 пикселей. Для iPad рекомендуется использовать значки размером 72х72 пиксела, а для устройств на iOS 4.0 и старше favicon должен иметь размеры 114х114 пикселов. Формат иконок WebClip – png (без использования прозрачности).

Особенность apple-touch-icon заключается в том, что «яблочные» аппараты автоматически придают иконкам фирменный блеск и закругленные края.

Для мобильных устройств на базе Android мобильные иконки WebClip так же поддерживаются, но их размер должен быть 16х16 или 57х57, а прописывать фавиконку для андроидов нужно так:

<link rel=”apple-touch-icon-precomposed” href=”apple-touch-icon.png” />

Естественно, apple-touch-icon-precomposed будет работать и в Apple, но эффект блеска и к фавиконке применяться уже не будет.

Как сделать анимированный favicon?

Да-да, и такой favicon можно установить на своем сайте. Для это нужно создать файл-анимашку соответствующих размеров и сохранить готовую картинку в формате gif. Только не забудьте, что анимацию способны отобразить только Firefox и Opera. Остальные браузеры «покажут» только «первый кадр» вашего шедевра.

Favicon в Яндексе или как использовать фавикон для SEO?

Наш родной и почитаемый Яндекс показывает favicon.ico как часть сниппета в поисковой выдаче. Бунусов к ранжированию, конечно, эта мелочь не прибавит, а вот глаз пользователя порадуется. Глядишь, и CTR в выдаче немного подтянется, если по-колдуете с иконками.

Кстати, за индексацию favicon в Яндексе отвечает «специальный» робот, поэтому не удивляйтесь, если вдруг страницы вашего сайта проиндексируются, а фавиконка не появится или не изменится.