Май01

Как создать свой фавикон

Галлерея бесплатных фавиконовВсё началось с того, что ни одна картинка фавикона из 100, которые предлагал мне на выбор TimeWeb, меня не устроила. Я попробовала поискать в каталогах и галереях фавиконов. Слов нет – 1500 различных картинок фавиконов – одна лучше другой, да только мне не подходят.

И дело-то всё в том, что мне нужен самый простенький фавикон, без "архитектурных излишеств" - всего только первая буква названия моего блога KATRIONA.RU.

Фавикон - это как первая буква, с которой начинается книга, это буквица, с которой начинается сказка! Без него дизайн сайта выглядит незавершённым. "Не боги горшки обжигают", - решила я, немного полазила по интернету и сделала свой фавикон. А поскольку на этом пути у меня встретилось несколько вопросов, ответы на которые я нигде не могла найти, то пришлось мне немного самой покопаться. И чудом, по какому-то наитию, я всё же поняла где и как нужно установить фавикон. И я решила поделиться обретёнными знаниями.

Опытных пользователей прошу не беспокоиться, эта инструкция предназначена для людей, впервые делающих свой фавикон самостоятельно.

Последовательность действий я буду иллюстрировать на примере фавикона своего сайта.

Итак…

Перво-наперво нам нужно получить исходную картинку. Как я уже говорила, мой фавикон – это просто буква "K" - первая буква названия моего сайта. Но Вы можете выбрать любую картинку. Условие только одно – картинка должна быть достаточно простая и чёткая, иначе фавикон будет невыразительный. Для примера - для другого своего бога я решила выбрать в качестве фавикона изображение монеты екатерининской эпохи – посмотрите, что из этого получилось:

Рисунок для фавикона должен быть лаконичный и чёткий, иначе фавикон получится слишком неавыразительным

Теперь Вы понимаете, почему слишком сложный рисунок для фавикона не подойдёт.

Что сделала я. В ворде я написала заглавную букву "К", подобрала подходящий шрифт, сделала размер шрифта как можно больше, изменила цвет шрифта на красный и на клавиатуре нажала на кнопку "Print Screen" (у меня она называется "Print Screen SysRq").

Как сделать самостоятельно фавикон, шаг 1

Затем открываем программу Photoshop, создаём новую страницу...

Как сделать самостоятельно фавикон, шаг 2

Как сделать самостоятельно фавикон, шаг 3

и вставляем в неё картинку:

Как сделать самостоятельно фавикон, шаг 4

Как сделать самостоятельно фавикон, шаг 5

Наша цель – буква "К", фавикон имеет квадратную форму, поэтому нам нужно вырезать квадратик с нашим будущим фавиконом. Для этого зажимаем клавишу "Shift", выделяем в левой вертикальной панели инструмент "Рамка" и заключаем букву "К" в квадратик.

Как сделать самостоятельно фавикон, шаг 6

Дальше – всё совсем уж просто: устанавливаем размер изображения 48Х48 px и сохраняем заготовку для фавикона в папочку под любым названием.

Как сделать самостоятельно фавикон, шаг 7

Теперь пришло время сделать сам фавикон. Для этого открываем сайт http://favicon.ru/. Нажимаем на кнопку "Обзор" и указываем путь к файлу, где мы сохранили заготовку для фавикона. Ставим две галочки: "значок 32Х32 px" и "значок 48Х48 px". Затем нажимаем кнопку "Создать фавикон".

Как сделать самостоятельно фавикон, шаг 8

Фавикон создан, теперь скачивайте его на свой компьютер.

Как сделать самостоятельно фавикон, шаг 9

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

Итак, для того, чтобы закачать фавкон, войдите в свой аккаунт на TimeWeb , заходите в файловый менеджер, находите папку public_html, а в ней папку wp-content, далее папку uploads, далее год - 2011 и месяц – 04. Затем нажимаете кнопку "Файл", "Закачать" и указываете путь к папке, где лежит сохранённый фавикон.

Как сделать самостоятельно фавикон, шаг 10

Фавикон закачан на сайт, но это ещё не всё. Осталось указать путь к фавикону на WordPress. Делается это в меню "Параметры/Favicons". Вставляем в окно путь к фавикону, у меня этот путь прописан так: http://katriona.ru/wp-content/uploads/2011/04/favicon.ico. У Вас, возможно, будет немного отличаться. В любом случае, что-то похожее Вы должны будете вставить в окно, а после этого внизу обязательно нужно нажать кнопку "Save changes":

Как сделать самостоятельно фавикон, шаг 11

Поздравляю! Теперь у Вас есть свой собственный фавикон!

теги: Из личного опыта

Отзывы на «Как создать свой фавикон»

  1. Юрий пишет:

    Спасибо за статью, очень нужные знания. Что мне больше всего нравится так это подробные картинки

    Ответить
  2. Наталья пишет:

    Спасибо за подробную информацию, обязательно пригодится. Готовые фавиконы мне тоже не подошли.

    Ответить
  3. Альберт пишет:

    Еще могу посоветовать такой сервис http://www.softicons.com/icon-tools/favicon-generator. В favicon нужен всеголишь один размер 16 на 16. Остальные ни к чему. А в вашей иконке я бы посоветовал сделать прозрачный фон вместо белого и будет отлично.

    Ответить

Ваш отзыв



CAPTCHA