Главная >> Вебмастеру >> Что такое фавиконка

Что такое фавиконка и для чего она нужна

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

1. Где используются фавиконки

Термин favicon - это сокращение английского favourite icon, означающее "значок для избранного". Это картинка-пиктограмма - значок сайта (или страницы).

Фавиконку можно видеть в следующих местах.

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

Пример панели закладок в браузере Mozilla Firefox

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

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

Панель вкладок в браузере Google Chrome

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

Для индексации фавиконок сайтов у Яндекса даже есть специальный робот:

Mozilla/5.0 (compatible; YandexFavicons/1.0; +http://yandex.com/bots)

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

2. Выбор картинки-пиктограммы для фавиконки

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

Но, с другой стороны, если, скажем, фавиконкой сайта, посвященного утконосам, будет целый зверь, да еще без признаков стилизации, да еще и с фоном, мало кто разберет, что это такое. Размер фавиконок - всего 16х16 пикселей, и в эти 256 точки нужно уместить максимум информации, но выглядеть это должно стильно и красиво. Про недостатке художественных способностей лучше доверить эту задачу специалистам - художникам, дизайнерам.

3. Формат фавиконки

Теперь поговорим о формате фавиконки. Когда в 1999 году компания Microsoft впервые выпустила браузер, поддерживающий отображение иконок (это был Internet Explorer 5), она использовала для данной функции формат картинок, который применяется в ее операционной системе Windows - это формат .ico. Так она ввела традицию, которой до сих пор следует подавляющее большинство сайтов: фавиконка имеет название favicon.ico и помещается в корневой каталог сайта. Именно по такому адресу (http://site/favicon.ico) ищут фавиконку все браузеры и, обнаружив, начинают показывать ее рядом с названием страницы.

Фавиконку можно нарисовать в графическом редакторе. Однако по умолчанию графические пакеты, как правило, не поддерживают формат .ico, для этого требуется установка дополнительных плагинов. Второй вариант самостоятельного создания фавиконки - воспользоваться услугами бесплатных онлайн-сервисов, которые генерируют фавиконку из того изображения, которое вы загрузите на такой сайт, или позволяют нарисовать фавиконку онлайн по пикселям. Стоит заметить, что в первом случае результат вряд ли будет удовлетворительным с первого раза: скорее всего, потребуется доработка, редактирование картинки по пикселям. Если исходная картинка была довольно сложной, то после уменьшения до 16х16 вы можете вообще получить бессмысленную кашу разноцветных точек.

Современные браузеры "научились" распознавать фавиконки не только в формате ico, но и jpg, gif (статические и анимированные), png. Только Internet Explorer до сих пор принципиально не желает поддерживать jpg, а также анимированные гифки. Зато, с другой стороны, в последних версиях браузера Mozilla Firefox поддерживается анимация фавиконок в формате gif.

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

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

4. Размещение фавиконки на сайте

Создав фавиконку, закачайте ее в корневую директорию сайта. Если вы все сделали по стандарту, других действий не потребуется. Но если вам необходимо положить фавиконку не в корневую, а в другую директорию или ваша фавиконка иного формата, чем ico, нужно будет указать браузерам ее местоположение. Делается это так. В пределах заголовка страницы <head></head> нужно добавить следующие метатеги:

При желании вы можете прописать в этих тегах не относительный, а абсолютный адрес:

<link rel="icon" href="http:/mysite.ru/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http:/mysite.ru/favicon.ico" type="image/x-icon">

Вторая строка нужна для его величества браузера Internet Explorer, а все остальные браузеры поймут первую строку. Кстати, отсюда следует вывод, что вы можете сделать иконку в формате ico для Internet Explorer, а для остальных браузеров - в любом другом из поддерживаемых форматов, и в первой строке указать им, что у вас на сайте и такое есть:

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

Если вам хочется использовать для определенных страниц другие фавиконки, это тоже можно сделать. Создайте нужные картинки, залейте их на сайт, и в теге <link> у выбранных страниц пропишите путь к нужной фавиконке.

Несколько слов о мобильных иконках

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

Это происходит потому, что мобильные девайсы с операционной системой iOS при заходе на сайт первым делом ищут такие иконки. И с каждым таким посетителем мы имеем с логах новую строку с указанием ошибки на несуществующую картинку. Дополнительная нагрузка на сервер, пусть даже небольшая, вещь не полезная, поэтому лучше от нее избавиться.

Как вы видите в примере, речь идет о двух файлах: apple-touch-icon.png и apple-touch-icon-precomposed.png. Первая подразумевает, что к картинке будут применены стандартные эффекты иконок Apple - скругление углов, тень и блики. Если вы не хотите, чтобы к вашей картинке применялись такие эффекты, создайте картинку с названием apple-touch-icon-precomposed.png.

Значок apple-touch-icon должен иметь формат png, а вот с размером сложнее, чем с фавиконкой. Дело в том, что "яблочная" продукция с разным разрешением использует значки разных размеров:

• iPhone: 60 x 60 px;
• iPad: 76 x 76 px;
• IPhone Retina: 120 x 120 px;
• iPad Retina: 152 x 152 px.

Лучше всего сделать иконки всех возможных размеров. Добавьте к ним еще одну, размером 196х196 - для устройств с операционной системой Android.

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

Загрузите полученные значки в корневую директорию сайта и пропишите пути в <header>, подобно этого примеру:

И теперь ваш сайт будет иметь свое "яблочное" лицо, а логи ошибок сервера станут гораздо меньше.

Ваши комментарии:

Ваше имя (ник):

Комментарий:

Введите результат вычисления