Как создать фавиконку (favicon.ico) для сайта

Что такое Favicon.ico

Favicon -  это простая маленькая картинка 16×16 пикселей, которая имеет формат .ico и отображается рядом с заголовком вашего веб-сайта или веб-страницы, которую мы можем увидеть в браузере над строкой ввода URL адреса. Еще можно сказать, что это в своем роде Лицо вашего сайта, т.к. передвигаясь по блогу, перейдя на любую страницу блога, мы всегда видим вверху это изображение (Favicon.ico). Создать мы его можем, использовав специальную программу IcoFX, которая предназначена для создания иконок, либо использовав любую другую программу, например: Photoshop. Также в интернете созданы онлайн генераторы, которые позволяют создать фавиконки онлайн или скачать уже готовые с каких-либо других ресурсов в сети интернет, но об этом чуть ниже.

Favicon это вообще клево, когда в поисковой системе, обычно Яндекс ищут информацию, то слева от названия ресурса изображена эта самая картинка, и она как бы смотрит на пользователей и говорит им – нажмите сюда, зайдите на мой сайт, здесь есть вся интересующая вас информация.

Многие пользователе причем переходят на сайты, у которых иконка весьма интересная и это действительно так. НУ и как мне кажется это просто прикольно иметь какую-то оригинальную картинку своего блога. Как вы уже наверное заметили, на моем сайте в поиске Яндекса отображается другая картинка, которую я когда-то рисовал сам для своего прежнего дизайна. Совсем недавно я изменил дизайн и соответственно изменил Favicon.ico у себя на блоге, который вы можете посмотреть выше, где написан заголовок моей веб-страницы, над строкой ввода URL адреса сайта.

Как создать картинку Favicon.ico для сайта: Photoshop \ Онлайн генератор \ Загрузить готовый фавикон

Создать favicon для сайта можно несколькими способами, это:

• Нарисовать favicon в Photoshop или других графических редакторах
• Можно воспользоваться онлайн генератором favicon.ico
• Скачать уже готовые favicon.ico с различных сайтов

Если вы владеете программой Photoshop и хорошо рисуете, то вы можете нарисовать свой Favicon самостоятельно именно через эту программу. Здесь у вас возникнет небольшая проблема по сохранению файла, т.к. фотошоп не поддерживает формат (.ico) поэтому вам нужно будет установить небольшое дополнение(плагин) для Фотошопа. После вам нужно будет его установить, для этого давайте откроем Архив и скопируем файл ICOFormat.8bi в папку с плагинами Фотошопа, которая находится в том месте, куда вы установили Photoshop на своем компьютере и называется Plug-ins, т.е. открываем папку Ваш путь на локальном диске/Photoshop/Plug-ins/ и сюда вставляем файл ICOFormat.8bi . После чего при сохранении файлов, мы можем выбрать формат (.ICO), а да еще вот что, если у вас открыт Фотошоп во время установки плагина, то вам нужно будет в него просто перезайти для работы плагина.

Так, значит, скачали дополнение – установили – нарисовали изображение 16 на 16 пикселей – сохранили в формате .ico и все готово, можно загружать на сайт! Прежде чем загрузить на сайт, мы с вами разберем еще другие методы создания фавиконки, так как не все умеют пользоваться Фотошопом и рисовать там замечательные иконки, если это у кого-то получается просто шикарно, то у других это может вызвать ужас. Поэтому давайте рассмотрим другие варианты создания Favicon.ico
Второй способ создания Favicon.ico заключается в том, чтобы создать его с помощью Онлайн генератора. Здесь мы будем рассматривать такой онлайн генератор как  http://www.favicon.cc/. Он довольно прост в использовании по сравнению с Photoshop, не нужно выбирать размеры, т.к. он автоматический 16 на 16 пикселей, также можно делать фавиконку с помощью загрузки какой-нибудь картинки, т.е. загружаем картинку в онлайн генератор и она автоматический уменьшается до нужных размеров, которую можно сразу от туда скачать и установить на свой блог. И в чем еще такой большой плюс онлайн генератора, это то, что можно смотреть результат во время рисования самой Фавиконки. Давайте подробно рассмотрим этот онлайн сервис favicon.cc.
Заходим на сайт favicon.cc и в центре экрана видим такое место для рисования, т.е. здесь конечно же мы можем рисовать саму фавиконку как в обычном графическом редакторе, где 1 клетка равна 1 пикселю (1px), это можно даже посчитать по самим клеткам.

Чуть ниже, если прокрутить колесико на мышке мы увидим такое окно Preview, где вы всегда сможете посмотреть результат вашей художественной faviconКи, результат вашей картинки, как она будет смотреться рядом с заголовком веб-сайта или веб-страницы вашего ресурса. Как вы уже наверно заметили, на картинке я выделил кнопку Import Image – Импортировать\Загрузить Картинку. Нажав на эту кнопку у нас откроется окно, где мы можем загрузить любое изображение со своего компьютера в этот онлайн генератор, он автоматический уменьшит ее до 16×16 пикселей и вы также сможете посмотреть получившийся результат немного ниже в окне Preview. Так значит, создали фавиконку, получилась она ну просто супер пупер клевая, теперь соответственно нам нужно ее Сохранить на свой компьютер, чтобы уже потом мы смогли закачать ее к себе на блог. Тут все очень просто и легко, в этом же самом окне Preview чутка ниже есть такая кнопка Download Favicon – Сохранить Фавикон, нажали на нее и выбираем место для сохранения!

Третий способ создать favicon.ico для своего сайта:
Если не хотите вникать в рисование Фавикона, просто не умеете пользоваться программой Photoshop и не хотите самостоятельно воспользоваться Онлайн генератором и сделать favicon из любой вашей картинки, то есть более простое решение. Это скачать уже готовый favicon.ico с галереи каких-либо интернет ресурсов. Сейчас чуть ниже, я представлю несколько сайтов, на которых вы можете просмотреть эти галереи и найти для себя более подходящий Фавикон, и если вам там что-нибудь понравится, то вы легко сможете его скачать.
iconj – содержит достаточно объемную галерею с картинками favicon.ico размерами 16×16 px, т.е. то что нам и нужно.
favicon.cc -  уже знакомый нам онлайн генератор, который мы рассматривали чуть выше. Здесь вы тоже можете найти достаточно много готовых фавиконок для своего сайта или блога.
В интернете вы можете найти достаточно большое количество сайтов с готовыми фавиконами, здесь я представил всего три сайта, но я думаю, этого будет вполне достаточно, чтобы подобрать для себя клевый favicon.

Как установить Favicon.ico к себе на блог с движком WordPress

После всей проделанной работы, когда вы создали иконку для сайта и готовы ее установить, то теперь нам понадобится сделать небольшую работу по загрузке favicon.ico на блог. Файл фавикона поисковая система Яндекс и браузеры ищут в корневой папке вашего блога, т.е. вам нужно будет закачать файл favicon.ico размерами 16 на 16 пикселей (обязательно) в корневую папку вашего блога (public_html)с помощью FTP менеджера. После чего нужно будет просто обновить страницу в браузере и посмотреть на разультат.
Если в браузере мы не увидим этой картинки, то нужно будет попробовать очистить кэш браузера и обновить страницу вашего сайта. Попробуйте загрузить свой блог в различных браузерах, например у меня сразу изменилась иконка без очистки кэша в Опере, так что пробуйте открывать сайт в различных браузерах и если никакого изображения не появляется, пробуйте очищать кэш. И если в браузере мы можем увидеть эту картинку сразу, то в поисковой выдаче Яндекса придется немного подождать, пока Яндекс проиндексирует этот favicon. Иногда даже в браузере приходится немного подождать, чтобы увидеть нашу иконку. Если у кого-то не получается что-то здесь сделать, прошу писать в комментариях, я помогу вам с решением вашей проблемы.
Напоследок хочется затронуть Анимированные иконки (favicon.gif). Как мы видим, они уже имеют формат не .ICO, а .GIF что позволяет создать анимацию, какое-то движение в картинке. При выборе картинки в галереях, которые вы можете найти в интернете, либо пройтись по моим ссылкам, которые я давал выше, вы можете заметить много различных анимированных фавиконок. И если вдруг, вы захотели поставить к себе на сайт именно анимированный favicon, то вам обязательно нужно учесть, что в поисковой выдаче запросов пользователем  Яндекс анимация не будет происходить, т.е. Яндекс просто зафиксирует иконку, как и в обычном изображении favicon.ico. Ну, вы меня поняли, что она не будет анимированной в поисковой выдаче Яндекса. Ага, значит, здесь вы можете спросить, а где будет показана эта анимированная фавиконка? А анимированной она будет отображаться только лишь в браузере FireFox на вашей странице блога, сверху над строкой ввода URL адреса. По крайне мере на сегодняшний день это так, так что мое мнение, не стоит ставить к себе на блог анимированный favicon, и лучше обойтись стандартным, favicon.ico обычным изображением без всякой анимации. Поверьте, она тоже будет клево смотреться и радовать вас!