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

faviconСайт без фавикона (favicon), как корабль без флага. Фавикон — неотъемлемая часть бренда сайта, его имиджа и идентификации. Кстати, посмотрите на выдачу какой-нибудь поисковой системы (например, Яндекса). Вы обязательно обнаружите рядом с заголовками найденных страниц и документов фавиконки. Т.е. фавикон, это еще и фактор повышающий кликабельность вашего сайта в результатах поиска. Поэтому, без фавикона никуда!

Как изготовить фавикон? Процесс условно можно разделить на 2 этапа:

  1. Изготовление фавикона или нахождение уже готового;
  2. Установка его на сайт.

К первой задаче, как было обозначено, может быть несколько подходов. Если вы по каким-то причинам вы не хотите изготавливать favicon сами, вам лень, нет времени или не умеете, а пробовать и эксперементировать желания нет, его можно найти на одном из сайтов-библиотек готовых фавиконов. Главный недостаток этого варианта — вряд-ли ваша иконка окажется оригинальной. Скорее всего она уже используется на десятках, а то и сотнях или тысячах сайтов. Поэтому, в данном случае, актуальным вопрос: «Нужен ли такой фавикон вообще?». По мне, так этот элемент обязательно должен быть уникальным, даже если он прост как «3 копейки». Поэтому, от этого варианта лучше отказался и изготовил фавикон собственными руками. Давайте на этом процесс остановимся подробнее.

Начать изготовление фавикона можно в графическом редакторе или с помощью специально сервиса. В первом случае необязательно прибегать к помощи десктопного приложения (например, Photoshop), можно воспользоваться бесплатным онлайн растровым графическим редактором. Все что вам нужно — создать документ 16х16 пикселей и что-нибудь на этом «холсте» изобразить. Залить фон, попробовать что-то нарисовать «карандашом» или поставить какой-нибудь символ или букву. На скриншоте пример «шедевра», который я начал изображать с помощью сервиса Pixlr:

Pixlr создание favion

Результат можно сохранить в формате «.gif» или «.png».

Для меня использование в качестве инструмента графического редактора — самый органичный вариант, но, он не единственный, потому что существуют специальные сервисы, с помощью которых можно рисовать фавиконы. Примером может послужить сайт Favicon.cc, который позволяет создать иконку по пикселям:

сервис favicon.cc

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

Какой бы из вариантов вы бы не выбрали, создание фавикона дело не очень сложное и интересное. Установка так же проблем не доставит. После того как вы сохраните готовую иконку на компьютере, ее можно будет конвертировать в формат «.ico», или использовать файлы «.gif» или «.png». Принципиальной разницы не будет, практически любой вариант при желании в последующем можно будет анимировать. Остается последнее — залить фавикон в «корень» сайта (с именем favicon) и добавить фрагмент кода в head секцию:

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

(Если у вас фавикон формата отличного от «.ico», нужно указать нужный тип файла)

На этом процесс создание и установки фавикона, можно будет считать законченным. Если вам нужна какая-то дополнительная информация по иконкам, то можно глянуть мою статью 2-х годичной давности в другом блоге — все об иконках favicon.ico — большая часть данных там по прежнему актуальна.

P.S. Постовой. Читаем и смотрим про Web-дизайн в стиле ретро — интересная статья!
Важный шаг в раскрутке это поисковая оптимизация сайта или блога.
Полезный онлайн журнал handmade — все, что сделано своими руками.


Комментариев - 12 для поста Как сделать favicon собственными руками?
  1. ]]> Женька ]]> (Апрель 13, 2010)

    Могу добавить, что по-идее фав-иконы можно создавать не только 16х16, но и 32х32 и даже 48х48. Браузер сам сожмёт вашу икону до нужного размера. Вот только вопрос в том КАК он её сожмёт. Я имею ввиду качество. Оно может оказаться и приемлемым если икона простая, а может и испортить вашу икону если она сложная.
    Не часто мне приходилось рисовать фав-иконки, но когда я это делал, то делал в фотошопе. Чтоб сохранять из Шопа в формат .ico нужен спец. плагин.
    Ещё, дейстительно, как и описано в статье есть сайты создания фав-икон из любой вашей фотки даже гораздо большего размера чем 16х16 и так далее. Просто загружаете фотку на сайт, тыкаете «конвертировать» или типа того и скачиваете готовую иконку.

  2. ]]> Tod ]]> (Апрель 13, 2010)

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

  3. ]]> Женька ]]> (Апрель 13, 2010)

    Я тут, прочитав эту статью, про иконку для своего сайта вспомнил ) И даже сделал таки её. Нарисовал в фотошопе, но у меня шоп новый щас, и потому плагина на него нет, но он и не понадобился т.к. я перевёл в .ico через один из тех сайтов про которые написано выше. Главное что б теперь руки дошли воткнуть её куда надо ))

  4. ]]> Ольга ]]> (Апрель 20, 2010)

    Да куча онлайн сервисов есть по созданию исо из обычного джпега. Если не добиваться шедевра — вполне достаточно.

  5. ]]> Инна ]]> (Апрель 21, 2010)

    Очень интересно и полезно! Спасибо!

  6. ]]> Андрей ]]> (Апрель 21, 2010)

    Женька, втыкать никуда не надо, кидаете favicon.ico в основную директорию сайта, браузер пользователя сам её интерпритирует

  7. ]]> Женька ]]> (Апрель 22, 2010)

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

  8. ]]> Sergio ]]> (Май 9, 2010)

    Да статейка интересная, надо будет и себе сделать фав-картиночку, а то у всех есть уже, а я все не доберусь никак…

  9. ]]> Sergio ]]> (Май 9, 2010)

    И сам сайт нормательный, кидаю в закладки, буду заходить почитывать и т.д.

  10. ]]> Ilya ]]> (Май 17, 2010)

    А я рисую фавикон в програмке паинт.нет. И отлично получается!

  11. ]]> Женька ]]> (Май 21, 2010)

    Не, ну можно и так. Но как мне кажется это несколько дольше чем другие варианты.

  12. ]]> i_am_banana ]]> (Июнь 23, 2010)

    делал иконки для своего блога и ещё для пары сайтов на favicon.ru … это не реклама, просто мало ли кому понадобится

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