Всем привет, дорогие читатели 🙂

Наверняка Вы думали о том, как создать favicon для своего блога ну или сайта. Все начинающие веб мастера первым делом придумывают название, а уж вторым - придумывают лого, которое бы выделяло их на фоне серой массы. Лого - обязательный атрибут любого сайта. Подумайте, что запомнит читатель, заходя на Ваш блог? Разумеется лого. По статистике его запоминают в 3 раза чаще, чем название. Но сегодня речь не о лого, точнее не об основном лого, а о том, как его переделать в favicon.ico. Давайте начнем.

Что такое favicon и зачем он нужен? Фавикон, это картинка, которая отображается в адресной строке браузера, и в поисковой выдаче:

Теперь Вы понимаете, о какой картинке идет речь. К ее созданию необходимо отнестись со всей серьезностью, ведь это Ваш отличительный знак, так сказать, Ваше второе название.

В этом уроке я покажу, как можно создать свою фавиконку с нуля и как можно ее сделать из уже имеющийся картинки.

Создаем Favicon.ico с нуля

Для созданию фавиконки нам потребуется очень удобный сервис favicon.cc.

Теперь просто нарисуйте с помощью стандартных инструментов нужную Вам картинку. Давайте разберем панель инструментов сервиса:

1. Здесь мы выбираем цвет. Думаю все знакомы с этой панелью выбора цвета: кто из фотошопа, а кто из paint;
2. Transparency - ползунок, который регулирует насыщенность цвета. Когда ползунок находится слева (как на картинке), цвет самый яркий, чем ближе Вы его подвинете к правому краю, тем тусклее будет цвет. И когда Вы ползунок доведете до самого правого конца, цвета не будет. Будет бесцветная краска;
3. Эта панелька показывает последние использованные цвета;
4. transparent - ластик;
5. pick existing color - пипетка. Это инструмент, который захватывает цвет. Наведите на нужный цвет пипеткой, нажмите на левую кнопку мыши, и начните рисовать данным цветом;
6. move - двигаем свое творчество от одного конца рамки к другому.

Попробовал я нарисовать свой логотип, получилось неплохо, но на фотошопе лучше:

Кстати, Favicon Вы также можете сделать анимированным! Как раз обратите внимание на картинку с моей фавиконкой, что выше. Под ней надпись «Use Animation», нажмите на нее и далее Вам будет предложено выбрать количество кадров, частоту их смены и так далее.

Чуть ниже картинки своей, уже нарисованной, фавиконки, Вы можете сразу посмотреть на свой фавикон «в деле».

Если Вам все нравится, нажмите на «Download Favicon». И скачайте его себе на компьютер.

Как сделать Favicon из готовой картинки?

Для этого очень удобен сервис favicon.ru. Просто выберите свое изображение на компьютере, и сервис автоматически Вам нарисует его копию.

Вот, что вышло у меня:

Это уже выглядит получше, чем нарисованный на другом сервисе своей рукой. Если все Вас устраивает - нажмите на «Скачать Favicon».

Серсисы с готовыми favicon.

Я не рекомендую скачивать чужие фавиконки, так как они не уникальны. Лучше самому что-нибудь придумать, хотя это весьма сложное задание, особенно для тех, у кого туговато с фантазией (у меня именно эта проблема 🙂 ).

1. iconj.com - хорошая база фавиконок.
2. audit4web - огромная коллекция иконок.

Ну в общем-то все. Есть, конечно, и другие сервисы, но на них либо скудный запас, либо те же самые иконки, что и на этих 2-х сервисах.

Как установить Favicon.ico на сайт?

1. После того, как Вы скачали файл, необходимо его закачать в корень сайта. Туда, где находятся папки wp-admin, wp-content и так далее.
2. Теперь откройте файл header.php и пропишите в нем следующий код:

Важно: код необходимо разместить между тегами и .

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

На сегодня все, надеюсь этот урок Вам помог. Это своего рода домашнее задание, необходимо не просто прочитать, а выполнить. Выполняя урок за уроком, Вы сами оформляете гарантию на свой успех 🙂 .

До скорых встреч на WPguru.ru!