Как создать favicon для сайта: файл favicon.iсo

Как создать favicon для сайта: файл favicon.iсo:
Привет всем,уважаемые посетители моего блога!Хочу предложить вам небольшой пост о том,как создать favicon для сайта.Эта статья даст необходимые инструкции по созданию файла favicon.iсo (фавикона),а также расскажет о том,какой сервис для этого использовать,как сделать,чтобы фавикон сайта появился в поисковой выдаче Яндекс рядом со ссылкой на ваш проект.
Прежде всего объясню,что это такое.Слово favicon получилось от слияния двух английских слов: favorite (любимый,избранный),icon (иконка,иллюстрация,символ).Вы,наверное,на раз замечали,что в строке различных браузеров появляется небольшой значок,который является по сути логотипом данного проекта.Благодаря ему сайт или блог wordpress становится узнаваемым,а значит приобретает дополнительные преимущества при продвижении.В общем,я считаю,что это пусть небольшой,но все-таки шаг по направлению к оптимизации проекта.К сожалению,Google не дает нам возможности лицезреть favicon при выдаче по поисковым запросам,несмотря на свою великолепную репутацию по многим пунктам работы поисковых алгоритмов.Ставим небольшой плюс Yandex,который это позволяет.Ну,со вступлением я закончил,переходим к технической части.

Как создать favicon (фавикон) для сайта,скачать и загрузить на сайт файл favicon.iсo

Для начала скажу,что иконка для фавикона должна представлять из себя графический файл размером16×16 пикселей и сохраняться в формате iсo.Можно сделать favicon,используя фотошоп,но не все с ним на дружественной ноге,в придачу он не может сохранять файлы формата iso.Поэтому проще и быстрее сделать это,используя онлайн сервисы (их еще называют on-line генераторы).
Я исследовал несколько сервисов по созданию фавиконов,но лучше,чем favicon.cc,пожалуй,не нашел (это,конечно,мой субъективный взгляд,который не претендует на исключительность,поэтому в конце поста дам альтернативные источники).Он имеет кучу преимуществ перед подобными сервисами.Здесь можно создать favicon с нуля,загрузить понравившуюся вам картинку,впоследствии отредактировав ее; кроме того,есть возможность выбрать уже готовое изображение.Итак,переходим по данной выше ссылке:

Сначала попробуем сделать фавикон сами.В центральной части расположена область,разделенная по пикселам (квадратикам).Здесь мы будем создавать изображение.В правой части под надписью «Color Picker» даны инструменты для генерации картинки.Передвигая  ползунок внутри квадрата палитры,нажав на левую кнопку мыши,корректируем необходимый оттенок цвета,который можно получить,если перемещать вертикальный ползунок вниз-вверх:

Если передвинуть горизонтальный ползунок «Transparency» вправо-влево,добьемся изменения прозрачности цвета.Показатель 0% означает полностью непрозрачный фон,100% — наоборот,полностью прозрачный.В процессе «рисования» favicon поставьте «галочку» напротив инструмента «transparent»,если желаете полностью удалить не понравившийся цвет с какого-либо пиксела.
Если не хотите «водить» ползунок по палитре,отметьте «галочкой» «pick existing color»,кликните левой кнопкой мыши последовательно по палитре,затем по пикселу,цвет которого хотите изменить.Инструмент «move» позволяет передвигать изображение в желаемом направлении,зажав его левой клавишей мышки.
Теперь попробуем создать favicon для сайта.Сначала я выбираю цвет на палитре,потом карандашом закрашиваю необходимые мне пикселы.Если вы хорошо представляете себе будущую форму favicon,можно,зажав левую кнопку мышки,непрерывным движением передвигая карандаш,быстро закрасить все пикселы.Получится нечто подобное:

Обратите внимание,чем еще мне нравится этот сервис,что в браузере,а также предосмотре «Preview»,расположенном ниже,одновременно с манипуляциями на «холсте» появляется изображение будущего фавикона,которое меняется в такт всем действиям:

Теперь,переставив ползунок «Transparency» на значение 50%,меняю прозрачность некоторых пикселов:

Далее использую «move» для перемещения изображения:

Вот таким образом можно создать свой favicon  для сайта,используя данный онлайн генератор.Создавайте,фантазируете,экспериментируйте!Как я уже отмечал,здесь можно не только создать фавикон с нуля,но также использовать уже готовое изображение.Для этого нажимаете «Import Image» на главной странице favicon.cc:

Затем выбираете файл с компьютера.Следующим шагом отмечаете «Keep dimensions»,если хотите сохранить пропорции; «Shrink to square icon» — картинка будет квадратной.Нажимаете «Upload»,изображение загружено:

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

После того,как изображение будет готово,необходимо скачать его на компьютер.Для этого кликаете кнопку «Download Favicon»,картинка сразу сохраняется в формате iсo.
В заключение хочу предоставить несколько других онлайн генераторов,возможно,они вам понравятся больше:

• Favicon.ru — простой русскоязычный генератор,думаю,там все просто
• Favicongeneranor — on-line генератор,аналогичный предыдущему,только англоязычный
• DeGraeve — очень функциональный сайт по созданию фавиконов,подобно favicon.cc,здесь можно создать иконку для своего ресурса с нуля,загрузить готовое изображение с целью редактирования и последующего его сохранения в нужном формате

Если у вас нет желания создавать свой фавикон или если нет подходящего изображения,то воспользуйтесь возможностью создать favicon.ico из собрания готовых картинок:

• Favicon.cc —  очень большая коллекция фавиконов,из числа которых,несомненно,можно выбрать подходящий
• Favicon Generator & Gallery — тоже большая галерея иконок,есть возможность выбрать подходящий

Итак,изображение готово,файл находится на компьютере,теперь необходимо загрузить его на ваш сайт.Для этого надо сделать следующее:
1.Файл favicon.iсo загрузить в корневую папку блога (вашего хостинга),у меня,например,он находится в папке public_html:

Теперь для проверки откройте ваш ресурс в браузере,иконка должна быть на месте.Советую проверить отображение favicon в других браузерах (Opera,IE,Firefox).Если ее нет,попробуйте перезагрузить страницу.В случае отрицательного результата необходимо очистить кэш (cash) браузера.Но,в общем,все должно получиться.
2.Далее открываем файл header.php (можно в админ-панели wordpress) и прописываем 2 следующие строки между тегами <head> и </head>:

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

• Правильный файл robots.txt для wordpress.Инструкции роботам Yandex и Google
• Обо мне и о блоге
• Семантическое ядро сайта как основа внутренней оптимизации
• Правила написания сео статьи.Алгоритм публикации статей на сайте или блоге
• Пошаговая инструкция для начинающих интернет-бизнес (1 часть)