Об авторе

Здравствуйте, друзья ! Меня зовут Александр Катрич. Я живу в красивейшем городе Украины, Днепропетровске. Люблю слушать хорошую спокойную музыку, люблю смотреть фильмы со смыслом, занимаюсь в тренажерном зале. Я интернет-предприниматель. Если Вы хотите узнать о поисковой оптимизации и продвижении, о технических моментах инфобизнеса, о том как вести блог, о социальных сетях, об интернет бизнесе. При этом творчески самореализоваться, постоянно развиваться и быть финансово обеспеченным человеком и получать удовольствие от жизни, то для Вас я веду свой авторский блог: INTERNET БИЗНЕС.

3 286 просмотров

Фавикон сайта, как создать и установить на сайт


Фавикон сайта на WordPress

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

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

Давайте теперь отступим от лирики, и я Вам расскажу все по порядку:

  • — Что такой фавикон;
  • — Почему его следует устанавливать в обязательном порядке;
  • — Как можно создать картинку под фавикон с помощью онлайнового сервиса;
  • — Где можно найти и скачать готовые картинки под фавикон.

Фавикон сайта

Фавикон (favicon.ico) – это такая очень маленькая иконка или иными слова аватарка сайта (блога), которая находится и отображается в строке браузера вместе с сайтом.

Еще она переводится, как «любимая иконка». Здесь однако, надо сказать, что отображается она только в поисковой системе Яндекса. Хороший и грамотно выполненный фавикон сайта, играет не последнию роль в нагоне трафика на сайт из поисковой системы Яндекса.

Фавикон сайта, идет только с расширением ico . Имя файла с фавиконом будет выглядеть так — favicon.ico

Почему его следует устанавливать в обязательном порядке

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

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

Сайт с картинкой вызывает больше доверия у людей, чем сайт без фавикона.

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

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

Проверить проиндексировал ли робот Ваш фавикон сайта, можно с помощью команды в поисковой строке Яндекса:

——————————————————————————————————————————————-

http://favicon.yandex.net/favicon/blogkapital.ru

(вместо blogkapital.ru Вы ставите свой адрес сайта)

———————————————————————————————————————————————

Пример фавикона, который я установил себе на сайт (прошу не судить строго, я эстетически не очень развит):

Фавикон моего блога

Пример других фавиконов из поисковой выдачи:

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

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

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

  • — Картинка желательно должна иметь квадратную форму;
  • — Желательно чтобы она была формата 50×50 пикселей или меньше. Если такой нет, то можно использовать для преобразования и чуть побольше формат, скажем 100×100 пикселей. Но больше брать не стоит, так как конечный результат будет не очень хорошего качества, да и сервис большую картинку не сможет преобразовать.

На выходе после преобразования у Вас получится готовый фавикон размером 16×16 пикселей.

Мой Вам бесплатный совет:

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

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

— http://www.iconj.com/gallery.php

— http://www.favicon.co.uk/gallery.php

— http://www.audit4web.ru/info/favicon

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

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

Онлайновый сервис для создания и редактирования фавикона: http://favicon.ru

В этом скриншоте показано, как закачать на сервис картинку для редактирования под фавикон сайта:

После того, как загрузили картинку со своего компьютера, нажимаем «ДАЛЕЕ» для дальнейшего редактирования:

В этих кубиках редактируем картинку, если она нас чем-то не устраивает. После того, как навели «марафет» изображению, мы можем ниже видеть, как она будет выглядеть в браузере:

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

Как установить иконку на сайт под управлением WordPress

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

Прежде всего, поисковый робот Яндекса и Ваш браузер будут искать созданную нами иконку в корневом каталоге сайта. Корневой каталог сайта на WordPress, это папка public_html.

Поэтому через протокол FTP (например с помощью программы FileZilla) соединяемся с нашем сайтом. Затем открываем на сайте папку public_html  и копируем туда созданный нами файл favicon.ico  После этого иконка появится в корне Вашего сайта http://Ваш сайт/favicon.ico

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

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

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

И поэтому надо либо заменить на свой фавикон или прописать в теме шаблона путь к своему фавикону.

Давайте просто пропишем путь к своему favicon. Делаем как и прежде, – заливаем иконку в корень сайта и в файле своего шаблона  header.php между тегом <head></head> прописываем следующее:

<link  rel=»shortcut icon» href=»http://Ваш сайт/favicon.ico» />

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

P.S. Друзья! Убедительная просьба, после прочтения статьи, пожалуйста, оставьте свои комментарии по поводу прочитанного. Мне очень важно Ваше мнение.

Спасибо за внимание, с уважением Александр Катрич.

Подписаться на Рассылку и Забрать Подарки!

Рекомендую еще прочитать:


Навигация по записям

Предыдущий пост:     ←
Следующий пост:    

К записи "Фавикон сайта, как создать и установить на сайт" 30 комментариев

  1. Решил поставить фавикон, но столкнулся со следующей проблемой. У меня на сайте нет папки public_html. Закинул в папку сайта. Прописал в шаблоне. Фавикон не отображается.

  2. Евгения:

    Спасибо за полезную статью. Пробовала как то сама установить, но почему то не получилось, теперь попробую по вашей инструкции.

  3. Спасибо) Все доступно объяснили, вопросов не возникло. Хоть у меня и стоит фавикон, (ставила не я, а программер), теперь могу и без него поменять. И обращаться к нему не надо будет)

  4. Раиса:

    Здравствуйте, Александр! Как я вас понимаю! У меня такая же история, до сих пор -без фавикона и всё что — то отвлекает, мешает, хочу, а руки не доходят. И вот ваше письмо в моей почте заставило обратить внимание, по слову, фавикон. Пыталась не однажды и не всё было мне понятно прежде, а сейчас так ясно, разумно и доходчиво, что теперь очевидно без труда справлюсь. Спасибо! Пока поставила эту страницу в закладки, как только настрою FileZilla, вернусь на вашу страницу. Да и понимание важности тоже теперь будет торопить. С уважением, Раиса.

  5. Спасибо за полезную статью. Пробовал как то сам установить, но почему то не получилось, теперь попробую по вашей инструкции.

  6. Спасибо, что напомнили — давно планировала, но вот как-то подзабылось за прочими делами.
    Сейчас установила, однако!
    Всё просто!

  7. Огромное спасибо! Давно думал о такой штуке! Но как то руки не доходили. Прям сегодня попробую установить! Еще раз большое спасибо!

  8. Статья в тему! Спасибо!
    Давно хотел сделать такую аватарку, но не знал как установить на сайт, теперь попробую.
    http://blogkapital.ru/a5a887/W01EFlhLTgZfVVsFEhZcSwIEHkIR/

  9. Сделал фавикон за пятнадцать минут!
    Спасибо ещё раз за нужную статью!
    Сайт: http//dommaster50.ru — можете проверить.

  10. Александр Распопов:

    Спасибо за статью, как раз начинал думать об этом. Все хорошо, когда вовремя.
    Большое спасибо и дальнейших успехов.

  11. Владимир Новосёлов:

    Спасибо за интересный материал. По поводу того, что не нужны плагины для этого согласен на все 100%.
    У меня блог лежит в отдельной папке, а так как папок несколько (книги, блог, продажники) я держу две копии. Одна непосредственно в корне, и вторая в папке где лежит index.php от блога/
    В результате чего все папки открывающиеся с одного адреса имеют общую иконку

  12. Виталий:

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

  13. Анна:

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

  14. Людмила:

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

    • Людмила Вы все сделали правильно, только что смотрел Ваш код сайта. Если ничего не получается, значит это особенность Вашей темы.

      Попробуйте закинуть фавикон в корень, где находятся темы /public_html/wp-content/themes

      Если не поможет, то в корень Вашей непосредственной темы, которую Вы используете. Если Вам будет нетрудно, то отпишитесь, получилось или нет.

  15. Людмила:

    я вчера занималась этим, и только что перепроверила, фавикон стоит в корне темы /public_html/wp-content/themes , очень жаль, если это особенность темы…или может есть другие способы решить эту проблему…

    • Александр Катрич:

      Сейчас фавикон у Вас стоит не в корне темы, а в корне сайта. Вот Ваш код

  16. Людмила:

    Здравствуйте, Александр!
    Спасибо за ваши очень полезные статьи. Давно хотела поставить иконку на сайт, но не знала как это сделать. Мне, правда, пришлось повозиться, так как я не знала как пользоваться программой FaleZilla. Вот теперь и ее, в какой-то степени освоила. Фавикон я сделала сама в фотошопе. Мне фавикон очень понравился, но выяснилось, что он плохо смотрится в таком маленьком масштабе. Я его переделаю, так как мне это уже совсем не сложно.
    Мой сайт: magia-decora.ru.
    С уважением, Людмила.

    • Людмила:

      Здравствуйте, Александр!
      Пишу в дополнение к выше написанному.
      Я поменяла свой не очень удачный фавикон на новый, который хорошо смотрится и выражает суть моего сайта. Главное, что это можно делать быстро и сразу же видно, как он будет смотреться. Я сделала несколько заготовок в фотошопе, а потом просмотрела каждую их них на сайте favicon.ru и выбрала лучшую.
      Еще раз, большое спасибо за урок.
      С уважением, Людмила.

  17. похоже я именно так поставила свой фавикон. уже не помню 🙂

  18. Здравствуйте Александр! Ваша статья по установке фавикона — буквально как по заказу! В настоящее время я занимаюсь созданием красивых открыток http://blogkapital.ru/a5a887/W01EFlhLTglfTVUMTxBWW1hfX0BKQwcNQlJGBw4MW1FSF1VLAxEVDUBZT0oCDVQ=/ , и вот при написании при написании кода возникла необходимость установить свой фавикон. Как это сделать, я не знал, и собирался поискать в интернете. а тут Вы. Все четко и понятно! Буквально сегодня-завтра займусь этим вопросом.
    Спасибо Вам и удачи.
    С уважением, Виктор Кривуляк.

  19. Павел:

    Грамотная статья. Молодцы! Для новичка в самый раз!

  20. Вячеслав:

    Привет Александр.
    Спасибо за интересные и полезные статьи ваши.
    У меня почему то не получилось, всё сделал как Вы и написали
    файл .ico у меня находился в корневом папке я его заменил на новый полученный из сайта favicon., и в файле header.php вписал
    ,
    выше указанные папки у меня нет,
    кеш почистил
    итог без изменение.
    Сайт разрабатываю на локалке денвер.
    Что не так сделал?
    Заранее спасибо.

    • Александр Катрич:

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

  21. Александр, спасибо большое вам за статью. Я никогда не сталкивалась с фавиконом, но попробую поставить обязательно!

  22. Владимир Новосёлов:

    Впервые встречаю пост, где Не рекомендуют использовать плагины. В 9 из 10 случаев пишут наоборот. А потом сайты как братья близнецы с фавмконами из набора в одном плагине.
    Спасибо, Александр.

Оставить свой комментарий