Фавикон для сайта – зачем нужен и как сделать?

Доброго времени суток, дорогие читатели блога powerballs.su. Наверное, Вы не раз могли замечать некое изображение рядом с названием сайта в поисковой выдачи Яндекса или же рядом с адресом сайта в строке (вкладке) того или иного браузера. Данное изображение называется Фавиконом сайта, основная цель которого выделить сайт из “серой массы” сайтов, не имеющих фавикона.

Фавикон для сайта – зачем нужен и как сделать?

По определению Википедии,Фавикон (Favicon) – это “значок для избранного”, а также значок веб-сайта или веб-страницы. Другими словами, Фавикон является персонализированным значком для сайта. Не все, обычно, начинающие веб-мастеры используют для своего “детища” данный интересный “апгрейд”, а зря и сейчас я объясню почему.

У сайтов имеющих свой уникальный значок есть преимущества перед остальными:

  • Выделение Вашего сайта в поисковой выдаче Яндекса. Бытует мнение, что у сайтов, имеющих фавикон несколько лучше CTR в поисковой выдаче, но это только предположения и догадки, поэтому не стоит надеяться на взрыв посещаемости после установки фавикона на блог.
  • Брендинг. У всех крупных порталов, авторитетных сайтов, поисковый систем есть свой уникальный значок, который Вы наверняка помните (благодаря зрительной памяти). Если в фавикон вложить некое ключевое слово или название сайта (если оно короткое), то пользователь после нескольких заходов на такой сайт может автоматически запомнить его название или адрес, хотя это только моя гипотеза, не имеющая под собой никаких обоснованных фактов, но все же...
  • Улучшение юзабилити. Сказано немного грубо, так как на удобство пользования сайтом практически никак не влияет, но прибавит изящности Вашему проекту.
  • Повышение авторитетности. Опять-таки очень грубо, но у всех серьезных проектов есть свой значок для сайта, поэтому, если Вы настроены решительно и относитесь к своему блогу со всей серьезностью, то необходимо уделить внимание всем составляющих качественного полноценного сайта, в число которых входит обсуждаемый нами фавикон.

С преимуществами заветной картинки, думаю, разобрались. Теперь можно перейти к техническим аспектам, а именно к установке фавикона на сайт.

Как создать Фавикон (Favicon)

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

  • Размер 32х32 пикселя – стандартный размер фавикона для сайта;
  • Расширение файла .ico – при любом другом расширении, картинка отображаться не будет;
  • Прозрачный фон – так как цветовая схема у всех браузеров разная, лучше всего будет смотреться значок с прозрачным фоном

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

Как создать Фавикон (Favicon) самостоятельно?

Если Вы выдающийся интернет-художник, то этот способ подходит Вам на все 100%, ну а если Вы умеете рисовать на холсте 32х32 пикселя, то и на все 200%. Для самостоятельно создания фавикона воспользуемся замечательным сервисом favicon.ru, который как раз специализируется на значках для сайта.

Как создать Фавикон (Favicon) самостоятельно?

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

  • Палитра;
  • Кисть (Рисовать);
  • Фоновый ластик (Прозрачный);
  • Пипетка;
  • Инструмент перемещения (Переместить);
  • Заливка

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

Иконка в браузере

Предпросмотр очень удобен, так как Вы в режиме реального времени контролируете весь процесс создания и можете внести коррективы в любой момент. После создания Фавикона необходимо скачать его к себе на компьютер.

Как создать Фавикон (Favicon) из готового изображения?

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

  • Изображение должно быть квадратным (100х100 px, 200×200 px и так далее);
  • У изображения должен быть прозрачный фон (для чего – читай выше);
  • На картинке должен быть один элемент с четкими границами контура

Для примера давайте создадим Фавикон из готовой картинке с помощью того же сервиса favicon.ru, который позволяет нам это сделать. Для эксперимента я взял изображения Смайла, размером 640х616 пикселей:

Как создать Фавикон (Favicon) из готового изображения?

Воспользовался инструментом создания фавикона из готового изображения и получил следующий результат:

фавикона из готового изображения

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

улыбка

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

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

Установка Фавикона (Favicon) на сайт

Установить готовый Фавикон на Ваш блог очень просто. Необходимо создать FTP соединение с Вашим сайтом и скопировать файл favicon.ico в корневую директорию, в случае WordPress в папку public-html:

Установка Фавикона (Favicon) на сайт

Для того, чтобы наш Favicon начал отображать, следует прописать следующий код:

link href=«http://Ваш сайт/название картинки.ico»rel=«icon»type=«image/x-icon»/

Данный код следует вставить в файл темы header.php между тегами и, после чего сохранить изменения. Не забудьте в представленном выше коде указать правильный путь к Вашему значку для сайта.

Поздравляю, Фавикон для Вашего сайта готов, любуйтесь наздовровье...

579