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

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

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

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

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

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

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

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

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

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

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

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

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

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