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

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

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

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

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

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

Графические редакторы

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

На скриншоте пример «шедевра», который я начал изображать с помощью сервиса Pixlr:

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

Онлайн сервис Favicon.cc

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

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

Онлайн генераторы фавиконки

Еще один вариант решения задачи — веб-сервисы, которые в автоматическом режиме генерируют картинку. Например проект Логастер.

Так как сайт изначально заточен на разработку логотипов, то сначала придется начинать именно с него. Затем специальный инструмент подберет разные варианты favicon для вашего случая. Редактор позволяет менять внешний вид объектов картинки, текстов и оформления. Детальнее об этом читайте в статье про создание фавиконки в Логастере. Заметка пригодится новичкам, если сходу разобраться сложно.

Установка favicon

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

<link rel="shortcut icon" href="Путь_к_иконке/favicon.ico" type="image/ico" />
<link rel="icon" href="Путь_к_иконке/favicon.ico" type="image/x-icon" />

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

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

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