Все об иконках фавикон (favicon.ico)

Среда, 21 Май 08 в 1:47

Все о Favicon.ico - описание, созданиеFavicon.ico — специальная иконка, которая отображается рядом с адресом вашего сайта в адресной строке браузера, закладках (favorites), результатах поиска от Yandex или, например, на специфических ресурсах (каталогах, социальных проектах). «Зачем это вообще нужно?» — вопрос скорее риторический, поэтому ответы на него могут быть разные и для каждого свои: это красиво, оригинально, помогает выделить ваш сайт из многих других. Конечно, создание favicon — задание не первоочередное при разработке того или иного дизайна, скорее небольшое дополнение. Лично я считаю, фавикон — вещь забавная (интересная) и нужная. В любом случае, ваш проект от этого только выиграет.

Иконка favicon имеет размер 16х16 пикселей, при этом сам файл желательно должен занимать не более 300 килобайт. Из всех браузеров только Internet Explorer не отображает изображение в строке браузера сразу. Фавикон появится там только после добавления сайта в «Избранное».
Для того чтобы установить (подключить) favicon на своем ресурсе, в HTML коде необходимо прописать следующие строки:

<link rel="icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://ваш-сайт.ru/путь_к_иконке/favicon.ico" type="image/x-icon">

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

<link rel="shortcut icon" href="путь_к_иконке/favicon.ico" />

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

  • Icon Empire — программа для создания статических или анимированных иконок с глубиной цвета от 1 до 32 бит, а также прозрачных иконок под Windows.
  • Icon Magic — простейшая программа для создания favicon по аналогии с редактором Paint.
  • Icon Craft — софт для работы с курсорами и иконками, обладающий достаточно мощным функционалом. В отличии от первых двух программа платная и стоит $40.

В принципе, думаю, вы с легкостью сможете найти и другие продукты для создания и редактирования файлов favicon.ico. Я же для этих целей использую всем известный графический редактор Photoshop. Мне кажется, это наиболее удобный вариант: находим в Интернете подходящее изображение, уменьшаем до требуемого размера иконки 16х16 пикселей и сохраняем. Проблема лишь в том, что по умолчанию Photoshop не обладает возможностью сохранять файлы в формате .ico. Для этого требуется установить специальный плагин — единственный файл архива ICOFormat.8bi помещаем в папку где установлен Photoshop (например: /Program Files/Adobe/Adobe Photoshop CS2/Plug-Ins/File Formats).
Кстати, для Photoshop есть еще один плагин по работе с иконками, который позволяет записать в один файл сразу несколько изображений с разными стандартными размерами (16х16, 32х32 и 48х48). Более подробно о работе с ним можно почитать в блоге Никиты Селецкого.

Значимость иконок для сайта дополнительно подчеркивает наличие в РУнете специального ресурса, посвященного данному вопросу — favicon.ru. Сервис существует в сети с 2005 года, за это время на нем было созданного около 180 тыс. иконок. Во-первых, ресурс исполняет информационную роль — там можно почитать о том что такое favicon и зачем он нужен, а также найти подборку ответов на наиболее часто задаваемые вопросы по теме.

Вторая, еще более важная функция проекта, — создание иконок непосредственно на сайте. Вы загружаете туда собственное изображение, с которого создается (генерируется) фавикон. После этого можно либо просто его скачать, либо предварительно подкорректировать изображение в специальном онлайн редакторе. Таким образом, сервис предоставляет возможность создать себе favicon вообще без применения Photoshop или другого офлайнового софта.

Пользуясь случаем, хотел поделиться информацией об одной интересной акции, которую проводит некий Константин (под ником wmas). Он предлагает нарисовать каждому желающему бесплатную иконку favicon.ico. Все что требуется взамен — написать о данном щедром предложении у себя в блоге, после чего в комментариях к акции оставить ссылку на собственный пост и пожелания относительно требуемой иконки. Занятно то, что это уже второе подобное мероприятие в блоге Константина. Прошлые результаты меня и вдохновили принять участие в данном действе, посудите сами весьма хорошо сделано:

favicon.ico - иконки для сайта

По такому поводу даже решил взять у автора мини-флэш-интервью:

Привет, откуда у тебя такая тяга к иконкам? я видел на всех твоих проектах множетсво нестандартных изображений)
«Тяга» появилась (наверное) из-за моего каталога блогов — Blogmir.net. Там иконки (favicon) играют не последнюю роль в визуализации информации, как и во многих других сервисах (к примеру: Яндекс, kollegi.zhilinsky.ru, blogosphera.net). Плюс, достаточно малый размер и затрата времени, на их создание, позволяют устроить вполне реальные (по реализации) акции, получить обратные ссылки и т.д.

Ты профессионально занимаешься дизайном?
Нет.

Что по-твоему дает эти иконки, зачем они нужны?
Ответ в первом пункте. А вообще, это наверное как визитка, аватар или что-то в этом роде.

Какими инструментами пользуешься для рисования их?
Photoshop.

Спасибо за интервью и бесплатные favicon!

P.S. Денис Судилковский в своем блоге Бизнес дизайн проводит акцию по обмену ссылками. Кстати, в этом блоге на отдельной странице я привожу некоторые источники где можно заработать в интернете.

При поддержке спонсоров:

Понравился пост? Подпишись на обновления блога по RSS для блоггеров и вебмастеровRSS, RSS для блоггеров и вебмастеровEmail или twitter для блоггеров и вебмастеровtwitter!
Добавить комментарий

Комментариев - 20 для данного поста

  1. Идущий в гору Пишет:

    Интересный материал, и подробно расписано как там чего, куда вставлять. Думаю нужно как нибудь подыскать что нибудь для себя. В любом случае это однозначно помогает выделить сайт на общем фоне, тут я согласен. А если еще и иконка будет оригинальная….

  2. MaxiS Пишет:

    Да нада и тебе значок сделать … нет ничево сложного …вот как допустим у меня на блоге просто «MM»

  3. Tod Пишет:

    Вот сейчас думаю над тем какую именно иконку хочу, после чего отпишусь о пожеланиях автору акции с бесплатными favicon.
    Ты бы себе gravatar зарегистрировал чтобы красивее было)

  4. CPU-7990 Пишет:

    Для установки, не обязательно прописывать код. Достаточно просто поместить favicon.ico в корневой каталог и большинство браузеров сами её подхватят.

  5. Rabbit Пишет:

    Замечательная статья. Ведь маленькая иконка может принести большую пользу, поэтому не стоит пренебрегать её созданием. Маленькая поправки: иконка должна весить около 300 байт, а не килобайт ;-)

  6. Tod Пишет:

    CPU-7990, согласен, но тогда файл должен называться именно favicon.ico, а у меня есть и другие названия. Кроме того, не все браузеры смогут распознать, я думаю. Ну и, конечно, сторонние сервисы, которые используют вашу иконку также могут не сработать.
    Rabbit, спасибо:) Вы на 100% уверены насчет размера иконки? В википедии пишут, что он может быть любым, а на favicon.ru именно до 300 килобайт.

  7. spomoni Пишет:

    А почему ж себе до сих пор не сделал? У меня не отображается по крайней мере.

  8. Tod Пишет:

    Ну вот как раз участвую в акции — будет мне иконка.
    Для этого сайта пытался пару раз сделать — безуспешно, точнее мне не понравилось ничего)) Пока делал для нескольких других проектов.

  9. Дмитрий В, Пишет:

    У меня фавикон слишком нереальный :)) Менять не хочу

  10. Faust Пишет:

    Хех!У меня тоже нет иконки…Вот всё думаю как поставить,да незнаю каг

  11. Tod Пишет:

    Faust, все предельно просто. Достаточно перечитать пост более внимательно:) Под конец статьи я даже спалил тему как получить иконку на шару.

  12. CPU-7990 Пишет:

    Re: Tod
    Кстати да, ты прав — blosie.ru не подхватила мою иконку, она у меня просто в корневом лежит.

  13. Бахмач Пишет:

    >> Иконка favicon имеет размер 16х16 пикселей
    Рекомендую делать так же 32х32, для десктопных линков, фавикон.ру в помощь

  14. Temko Пишет:

    Я фавикон бы поставил, пусть меня научат… Спасибо за статью, пора и себе уже что-то прикрутить

  15. zonac Пишет:

    К сожалению у меня не получается вставить фавикон описанным способом…
    Как я покопал в интернете, это из-за структуры нестандартного шаблона для Blogger.
    А что именно в структуре шаблона может игнорировать этот код?
    Может есть какой-то выход, кроме как заливать всё на фтп(но это не вариант иначе зачем мне blogger)?

  16. Tod Пишет:

    zonac, заливаешь иконку favicon на любой сервис, который позволяет хранить файлы, после чего в blogger указываешь соответствующие пути, у меня в blogohelp.blogspot.com все прекрасно работает.

  17. zonac Пишет:

    на другом моём блогоспотовском сайте тоже всё работает, а тут нет)…

  18. Хворь Пишет:

    Статья отличная, все работает. Только IE не хочет отображать анимированные favicon. Мож кто знает выход?

  19. error404 Пишет:

    работает только в fierfox, hrome и opera не видят

Оставить комментарий (правила комментирования)