RATBAG

Сегодня занялся созданием иконки для нашего сайта. Для этого использую онлайн редактор Favicon.cc.

UPD 2013.10.26: Сегодня я также обнаружил новый российский инструмент Iconizer.net, который хоть и не имеет paint-подобного редактора, но зато обладает большой базой иконок, легко искабельных по фразам, например, «компас». Иконки затем легко можно подгонять под нужный размер и скачивать в разных форматах: jpg, png, gif, bmp, ico. Он уже больше относится к сфере именно иконок для интерфейсов или логотипов, но и для создания вашего favicon.ico в принципе подходит.

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

В нашем же случае, иконку сайта я рисовал и придумывал «с нуля», поэтому просто выбрал нужный цвет и начал рисовать, пиксель за пикселем. В этом сервисе есть очень удобная фича: рисунок в режиме реального времени отображается как фавикон текущей страницы, а также на картинке-примере под окном реактора. Рисовать очень просто, палитра формируется «на лету» из выбранных вами цветов. Фал можете просто загрузить, а можете им поделиться с общественностью.

Примечательно, что при помощи данного сервиса можно рисовать и динамические анимированные иконки! Например, я нашел среди общедоступных иконок такую вот вращающуюся обезьянку. Хотя я не сторонник динамики на странице, так как это достаточно сильно отвлекает от самого контента. А если «дизайнер» особо постарался и добавил мигающий красный — то такие страницы я обычно просто закрываю, чтобы не мельтешило в глазах! Во всем надо знать меру…

Как рисунок будет готов, по кнопке «Download Favicon» загружаем себе на компьютер файл favicon.ico. Потом скидываем его в корневой каталог себе на сервер через FTP или менеджер файлов панели хостинга. Этого уже в принципе достаточно для отображения иконки во вкладке браузера. Но для большей совместимости с разными браузерами, желательно также прописать в HTML-размете страницы в области HEAD мета-тэг указывающий на файл иконки:

...
	<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
...

Если у вас CMS WordPress то это делается в редакторе тем в меню: «Внешний вид -> Редактор -> Заголовок (header.php)».

Ну вот в принципе и всё…