Favicon.ico или фавикон. Что это?

Фавикон для сайтаФавикон по другому Favicon.ico  - что это такое? При переводе с английского языка FAVorites ICON буквально это означает - иконка самого сайта или его веб-страницы для избранного.  

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

Зачем нужен фавикон (Favicon.ico)

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

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

 Фафикон или favicon-ico

Можно сказать, что фавикон – это логотип сайта, который работает как бренд.

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

 

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

Сразу нужно отметить, что:

  1. Яндекс не любит полупрозрачные иконки
  2. Анимированные фавиконы будут отражаться только в браузере FireFox
  3. Для уменьшения нагрузки на сайт лучше использовать иконку размером 16х16 пикселей в формате .ico
  4. Создавая Favicon.ico иконка должна соответствовать тематике сайта, а лучше будет, если она является его логотипом или если это авторский блог, то можно использовать и фото автора

Как сделать иконку для сайта или фавикон?

Сделать Favicon.ico можно:

  • с помощью онлайн генераторов
  • заказав картинку иконки у дизайнера
  • самостоятельно в фотошопе, сохранив картинку в формате .ico
    • нужно создать картинку 128х128 пикселей, а затем уже уменьшите её масштаб до 16х16, при этом качество не ухудшится 

Как создать фавикон самостоятельно

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

  • специальные программы для компьютера:
    • Icon Empire
    • IcoFX
    • Favicon Create
  • онлайн генераторы для создания иконок 
    • favicon.cc
    • tools.dynamicdrive.com/favicon
    • favicon.ru
    • htmlkit.com/services/favicon
    • favicon.by

Где скачать готовый фавикон

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

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

  • http://www.audit4web.ru/info/favicon/
  • http://findicons.com/

Давайте, к примеру, подробнее пройдемся по сервису http://findicons.com/

Нужно ввести в поисковую строку внутри сервиса ключевой запрос вашего сайта в переводе на английский

Например:

  1. Для сайта по домоводству, запрос «дом» переводим на английский «house».
  2. Вводим запрос на английском в поиск сервиса и в результате получаем много иконок.
  3. На выьранной иконке нажимаем на "Детали" - (значок «i»)
  4. Выбираем вкладку «Другой размер»
  5. Размер 16х16
  6. Выбираем формат .ico
  7. Иконка закачивается на ваш компьютер.

 

Как установить фавикон - favicon.ico на ваш сайт

Иконка выбрана или создана. Теперь нужно установить её на сайт. Для этого:

Можно установить её с помощью кода, плагина или если тема содержит возможность установки фавикона, то используйте её.

Установка фавикона с помощью кода:

  • выбираем фавикон (favicon.ico) на компьютере и загружаем его в «Медиафайлы»
  • в списке в медиафайлов выбираем нашу картинку и нажимаем на «Изменить»
  • в открывшемся окне выбираем «Ссылку на файл»
  • скопируем эту ссылку
  • идем в Консоль сайта

Внешний вид -> редактор -> Заголовок - header.php.

  • Затем вставьте специальный код в редакторе сайта  в header.php между тегами <head>  и  </head>

<link rel="icon"скопированная ссылка на картинку фавикон" type="image/x-icon"> 
<link rel="shortcut icon"скопированная ссылка на картинку фавикон" type="image/x-icon">  

  • Не забудьте обновить файл

Установка фавикона с помощью плагина

Используйте один из плагинов:

  • Easy Favicons
  • Insert Headers and Footers
  • All in one Favicon

Устанавливаем плагин как обычно и активируем его. Затем настраиваем его одним из способов:

  1. выбираем фавикон из доступного списка иконок
  2. загружаем свой фавикон
  3. даем ссылку на иконку, расположенную на другом сервисе в сети 

Нужно знать, что фавикон не сразу появится в браузере, а только после новой индексации сайта.

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

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

Желаю успеха!

@М.Антонова автор  блога «Первый старт сайта»

Статьи по теме:

  1. Оптимизация интернет сайта. Что это такое?  
  2. Сайт твой дом 
  3. All in One SEO Pack – основной плагин оптимизации сайта  
  4. Как правильно написать оптимизированную статью для сайта  
  5. Оптимизация статей с помощью плагина «Все в одном SEO Pack» All in One SEO Pack
  6. Размещение и оптимизация картинки на сайте  
  7. Что такое юзабилити (usabiliti) сайта

 

 

Статьи на эту тему

14 комментариев

  1. Фавикон делала сама, правда, пришлось помучиться, а потом еще чуть не месяц ждала, когда этот значок появится в поисковой системе Яндекса, тогда, как в поисковой строке браузера он появился быстро.
    Жаль,Марина, что такое подробное описание всех действий по созданию фавикона мне не «попалось» раньше. Теперь вряд ли появится желание что-то переделывать, хотя, на сколько я знаю, многие меняют этот значок регулярно к разным праздникам. Ну, это пусть делают продвинутые блогеры. Хотя, как говорится, никогда не говори никогда. В любом случае, буду знать, где можно найти такое доступное для понимания любого «чайника» описание процесса установки фавикона.

  2. Марина, огромное спасибо за статью. Я тоже хочу поставить фавикон, только вот никак не созрею для этого. Мне почему-то кажется, что это очень трудно. Вот если бы взять готовый фавикон с кодом и вставить на блог…Такого нет? Но попробую, наверное, по вашей записи сделать пошагово.А то только смотрю на блоги, у которых он есть, и завидую, что они это уже сделали.Надо собраться с силами и сделать, наконец, эту работу.Статья вышла очень хорошая и подробная, пошаговое обучение. Люблю такие статьи, где всё просто, доступно, написано доступным языком для начинающих и не только.Желаю вам всего самого доброго и светлого во всём и всегда.Заходите в гости, буду рада, ответный визит вам обеспечен.

  3. Вы знаете, вот после прочтения вашей статьи, я не могу успокоится, потому что всё время у меня сидит мысль в голове, что нужно сделать фавикон. Зашла на сервис фавиконов, но там оказалось не так просто получить их. Вводила определённые слова, но он не открылся, требовал более общих слов. Короче, буду пробовать разные варианты. Вот видите, снова зашла к вам, чтобы ещё раз прочитать вашу статью и попытаться что-то сделать.ещё раз вас благодарю за вашу работу.Заходите в гости, есть изменения, буду вам рада.Всем — здоровья, удачи и ЛЮБВИ!

  4. Марина, здравствйте! У меня к вам просьба, возможно, это будет нужно и другим, кто захочет поставить фавикон.Сделайте, пожалуйста, скриншот кода, куда нужно вставить вот эту часть специального кода header.php между тегами и

    , чтобы было понятно то место, куда нужно вставить, выделите его цветом. Этот код в комментарии затем удалите. Спасибо.Извините за настойчивость.

  5. Марина, ещё раз меня извините. Я в генераторе сделала фавикон, взяла код, который он мне выдал и вставила его вот здесь:[php]

    [php]в самом начале.Обновила файл, но ничего не изменилось на блоге.Он должен появиться сразу или ему нужно время? У вас на скриншоте эти две строчки вставлены в самом конце.Я прочитала, что их можно вставить в любом месте, лишь бы до .Где у меня ошибка? Спасибо огромное за скриншот!!!И за ответ тоже!!!!!

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

  6. Марина, здравствуйте! Подскажите, а как очистить историю в браузере? И ещё одно. Мне прислали мои читатели вот такую ссылочку на блог Александра Борисова, известного в рунете блогера, прочитайте его статью и поделитесь своими мыслями по этому поводу.Я просто в ШОКЕ от того, что узнала.ВОТ ССЫЛОЧКА:http://isif-life.ru/blogovedenie/dubli-stranic-replytocom-wordpress-ili-kak-umerli-i-umirayut-tysyachi-blogov-dazhe-ne-podozrevaya-ob-etom.html. Эти изменения я уже видела на блогах тех, кто это сделал.Жду ваших комментарий по этой статье.Удачи!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *