---

Favicon — «значок для избранного» —
значок сайта или веб-страницы,
который отображается рядом с
закладкой во вкладках браузера.

Что представляет собой Favicon?
Изначально фавиконки существовали в
одном единственном формате –
картинка формата .ico размером 16х16
пикселей. И никак иначе.
Хорошл, что те времена уже
давно минули и мы можем дать выход
творческой энергии, подчеркивая стиль
своего сайта фавиконкой любого
размера (при необходимости браузер
самостоятельно масштабирует favicon до
нужных ему размеров). Постарайтесь
только соблюдать «квадратные»
пропорции картинки.
Что до форматов, то и здесь у нас уже
появилась возможность дать волю
технической фантазии, так как большенство современных браузеров поддерживает не только формат .ico!

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

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

Favicon.ico для мобильных устройств
Если вы рассчитываете что на ваш сайт
будет заходить пользователи с
мобильных устройств, то придется
попотеть дополнительно. Дело в том,
что Apple как обычно решили блеснуть и
придумали свой формат иконок WebClip,
который используется браузером Safari
в iPhone и iPod.
Для того, чтобы «fovicon для Apple»
заработал на вашем сайте, нужно
прописать в разделе.
Размер фавикона WebClip изначально
составлял 57х57 пикселей. Для iPad
рекомендуется использовать значки
размером 72х72 пиксела, а для
устройств на iOS 4.0 и старше favicon
должен иметь размеры 114х114
пикселов. Формат иконок WebClip – png
(без использования прозрачности).
Особенность apple-touch-icon
заключается в том, что «яблочные»
аппараты автоматически придают
иконкам фирменный блеск и
закругленные края.
Для мобильных устройств на базе
Android мобильные иконки WebClip так
же поддерживаются, но их размер
должен быть 16х16 или 57х57, а
прописывать фавиконку для андроидов
нужно так:
Естественно, apple-touch-icon-
precomposed будет работать и в Apple,
но эффект блеска и к фавиконке
применяться уже не будет.

Как установить фавикон на сайт?
По умолчанию браузеры самостоятельно
пытаются найти файл favicon.ico в
корневой директории вашего сайта.
Даже если нигде явно не прописана
фавиконка, а по факту она есть, браузер
найдет ее и отобразит на вкладочке.
Именно поэтому на многих сайтах,
созданных на коленке с «бесплатным»
шаблоном на WordPress, Joomla или
любом другом популярном движке.
На практике фавикон может лежать где
угодно в пределах вашего сайта в
любом из допустимых форматов. Нужно
только прописать в разделе всех веб-
страниц строку
с явным указание пути (в
относительном или абсолютном
формате) к вашей фавиконке.
Ранее для favicon.ico указывался MIME-
тип image/x-icon, теперь же данный
формат считается устаревшим и
официальное «майкрософтовское» слово
гласит, что с 2003 года (после
стандартизации формата) файлам .ico
соответствует MIME-тип image/
vnd.microsoft.icon.
Вместо shortcut icon в атрибуте rel
можно указать только icon, однако IE
реагирует только на shortcut icon и
дружит только с фавиконками
формата .ico. Остальные браузеры
shortcut в атрибуте rel игнорируют и
учитывают только запись icon.
При желании, конечно, вы можете
дополнительную запись:
Естественно, для каждого типа иконок
нужно не забывать указывать
соответствующий MIME-тип:
image/png – для png
image/gif– для gif
и т.д.
При несовпадении реального MIME-типа
favicon с объявленным на веб-странице,
браузер может не отобразить фавикон
Автор статьи: Klubv (20.12.17 / 00:19)

---

Рейтинг: 0

Просмотров: 431
Комментарии (0) »