Как создать favicon и установить его на сайт?

   

   Приветствую Вас, друзья на страницах Tipsite.ru! В этой статье я наконец-то добрался до favicon. Давно хотел написать об этом пост, но постоянно находились другие темы. И вот сегодня я расскажу, как создать favicon и установить его на сайт.

как создать favicon

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

Зачем нужен favicon сайту?

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

   Favicon – это небольшая иконка (картинка), на которой, в большинстве случаев, изображается логотип сайта или то, что связано с его названием и автором. В общем, как у всех пользователей Интернета есть свои аватарки, так и у сайта есть фавикон. Думаю, что понятно объяснил 😕 . Иконка сайта, хочу сказать, очень заметная вещь, потому что она отображается и в поисковой выдаче (рядом с сайтом), и в адресной строке браузера (в открытой вкладке) и даже в закладках.

фавикон

сделать фавикон 

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

   Размеры favicon стандартные – 16 х 16 пикселей. Можно, конечно, сделать размеры и побольше: 32 х 32 или 64 х 64 пикселей, но в итоге изображение все равно сожмется до стандартного. Моя тема WordPress, например, требовала загрузить фавикон размером 512 х 512 пикселей! Не знаю, для чего он ей такой огромный был нужен, может быть, хотела рассмотреть получше 😀 , но в итоге, как Вы можете видеть, favicon моего сайта обычного размера.

   Теперь вернемся к вопросу «Зачем нужен favicon сайту?». Следующие три пункта помогут ответить на него.

    1) Favicon позволяет Вашему сайту выделиться из толпы;

   2) Favicon привлекает внимание, благодаря чему люби охотнее и чаще открывают Ваш сайт;

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

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

Как создать favicon для сайта?

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

   Нарисовать favicon самому. Если у Вас есть творческие способности, то однозначно выбирайте этот способ. Открывайте всеми любимый Photoshop и рисуйте то, что считаете нужным. Затем сохраните полученную картинку в формате .jpeg и с помощью онлайн-генератора favicon.cc или favicon.ru конвертируем ее в файл .ico (это как раз нужный нам формат favicon).

favicon

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

   Скачать favicon с Интернета. Если с предыдущим вариантом у Вас не заладилось, например, Вы не умеете рисовать, так же, как и я 🙁 , тогда можно скачать готовую картинку. Можно также вырезать часть какой-то картинки и потом отконвертировать ее в формат .ico с помощью того же онлайн-генератора из предыдущего абзаца и использовать, как иконку сайта.

   Если уж совсем не хочется возиться, тогда можно скачать готовый favicon, но тут, как понимаете, может случиться так, что точно такая же иконка будет еще на нескольких сайтах. Большой выбор готовых иконок можно найти на сайте www.audit4web.ru/info/favicon.

   Итак, фавикон у нас в наличии, теперь будем его устанавливать.

Как установить favicon на сайт?

   Способ установки зависит от того, какая тема (шаблон) установлена на Вашем сайте. Некоторые темы позволяют установить иконку на блог прямо из админ панели. Для этого нужно в панели управления сайтом выбрать «Внешний вид», а затем «Настроить».

иконка сайта

   В открывшемся окне (пункт «Свойства сайта) мы сможем  загрузить заранее подготовленную картинку и установить ее в качестве favicon.

иконка

   Если шаблон Вашего сайта не поддерживает вышеприведенный способ, тогда мы пойдем другим путем. Во-первых, загружаем нужную картинку в корневую папку сайта, то есть туда, где находится файл robots.txt и папки wp-admin, wp-content. Внимание! Не забудьте переименовать загружаемую картинку в favicon.ico.

   Теперь переходим в панель управления сайтом и идем таким путем: “Внешний вид” → “редактор” → “header.php”.

логотип сайта

   В файле header.php нам нужно прописать такой код:

<link type=”image/x-icon” rel=”shortcut icon” href=”/favicon.ico” />

   Вставить этот код нужно между тегами <head> и </head>. Сохраняем изменения и, в принципе, можно попробовать посмотреть то, что у нас получилось. Для этого нужно почистить кэш браузера и обновить страницу. 

Если Вы сразу не увидите favicon, не расстраивайтесь, потому что может понадобиться 1-2 дня, чтобы все изменения вступили в силу.

   Установить favicon на сайт можно и с помощью плагина, например, Easy Favicons. Но все же постарайтесь справиться с установкой иконки без использования плагинов, которые тормозят загрузку сайта.

   Ну вот мы и справились с созданием и установкой favicon. Ничего сложного в этом нет, да и по времени не будет слишком затратно, а вот результат Вас порадует. Если у Вас возникнут вопросы при создании иконки сайта, тогда пишите об этом в комментарии. Спасибо за внимание и пока!








Ваш комментарий