Как установить favicon на сайт. Установка фавикона на WordPress
05 Окт, 2012 
Комментариев 83
В прошлой статье речь шла о том, что такое фавиконы и где можно скачать готовые иконки для сайта ico. Надеюсь, вы уже подобрали себе подходящую картинку? Если нет, то в следующей статье я расскажу, как сделать favicon для сайта с помощью онлайн генераторов. Не пропустите. Сегодня же поговорим о том, как установить favicon на сайт или заменить его, если он вам не нравится. Эта процедура одинакова для любых веб-ресурсов, но я покажу весь процесс установки на примере CMS WordPress.
Выбирая или создавая иконку, позаботьтесь о том, чтобы она была уникальной и привлекала внимание. Вы же не забыли, что в поисковой выдаче Яндекс favicon показывается рядом с вашим сайтом. Оригинальный фавикон может увеличить количество переходов на сайт, что не может не радовать.
Как установить favicon на WordPress
При установке иконок для сайта возможны три варианта развития событий:
- из админки блога Вордпресс, используя настройки шаблона;
- обычная установка без плагина;
- с помощью плагина.
Вставляем фавикон на блог из админки
Это самый простой способ. Во многих премиум-шаблонах WordPress есть возможность устанавливать логотипы и иконки. Для этого идем в настройки темы, выбираем нужный файл на компьютере и жмем “Загрузить“. Сохраняем изменения и любуемся результатом. В моей теме можно загружать картинки в формате png или gif размером 16х16.
Установка favicon на сайт без плагина
Допустим, что у нас уже есть готовый фавикон. Это может быть картинка с любым названием в форматах GIF, JPEG, PNG или BMP. Однако напомню, что лучше всего, если это будет файл изображения в формате .ICO с размером 16×16 пикселей favicon.ico. Переименуйте, если у вас не так.
Добавить Favicon на сайт очень легко. Надо просто скопировать его в корневую директорию сайта по FTP. На Вордпресс это папка public_html (там, куда устанавливали robots.txt). Как заливать файлы на хостинг с помощью FTP-клиента FileZilla, читаем здесь.
В принципе, можно больше ничего не делать. Современные браузеры сами найдут пиктограмму, если она расположена в корневой папке блога. Но мы ведь хотим, чтобы наша иконка отображалась и в поисковой выдаче. Поэтому, будет лучше, если указать специальному роботу Яндекса путь к файлу favicon.ico. Для этого в html-коде страниц блога между тегами надо прописать такой код:
или
В данном примере файл находится в корне сайта, а его адрес прописан в виде относительной ссылки. Если вы загрузили картинку в другую папку, то укажите полный путь к ней в атрибуте href. Если картинка не в формате .ico, то укажите это в атрибуте type, заменив x-icon на нужный формат.
Многие советуют вставлять обе строки, но я считаю это лишним и советую прописывать только верхнюю строчку. Поясню, для Internet Explorer пишем значение “shortcut icon“, остальные браузеры понимают “icon“, которое уже входит в это значение.
Как прописать код favicon для WordPress:
- Идем в админку “Внешний вид” – “Редактор“.
- Открываем файл header.php.
- Вставляем код до закрывающего тега .
- Жмем “Обновить файл“.
Как поменять иконку сайта
Если на сайте уже установлен favicon, но вы хотите заменить его другим, то просто открываем по FTP корневую папку блога и меняем существующий файл на новый с таким же названием и форматом.
Если картинка расположена в другом месте, то делаем следующее:
- Открываем в браузере код страницы сайта (Ctrl+U).
- Ищем строку, где прописан адрес фавикона.
- Заменяем файл по указанному адресу.
Почему не отображается favicon
Если favicon не отображается в браузере после установки или замены, надо:
- перезапустить браузер;
- обновить кеш;
- проверить правильность пути к пиктограмме сайта.
В поисковой выдаче Яндекса favicon появится только после того, как сайт посетит специальный робот. После этого фавиконка преобразуется в формат PNG и добавляется на сервер Яндекса по адресу http://favicon.yandex.net/favicon/blogibiznes.ru. Чтобы увидеть иконку своего сайта, замените имя моего домена своим. Бывает, что Яндекс долго не отображает пиктограмму в выдаче. Надо подождать и, если через месяц иконка не появится, можно задать вопрос в тех.поддержку.
Easy Favicons – Wordpress плагин для установки фавикона
Считаю, что использовать плагин для установки favicon на WordPress, это лишнее. Тем не менее, такая возможность для особо ленивых есть. Существует много подобных плагинов, но я покажу один, которым сам когда-то пользовался. Он называется Easy Favicons. Скачать его можно по этой ссылке.
Устанавливаем и активируем плагин (как установить плагин Вордпресс). Открываем в админке страницу с настройками.
Как видно выше, есть возможность установить фавикон тремя способами:
- использовать свой Gravatar;
- указать путь к картинке;
- выбрать иконку для сайта из установленного набора.
После не хитрых настроек нажмите “Сохранить изменения” и Favicon будет установлен.
Вот и все дела. Теперь, надеюсь, понятно, как установить фавикон на сайт. Какой бы способ вы не выбрали, помните, что любой популярный сайт должен иметь свою узнаваемую иконку. Кроме того, ее можно периодически обновлять. Например, во время каких-то интересных событий или праздников. Представьте, если под Новый год человеку в поиске попадется ваш блог с картинкой Деда Мороза. Это может лишний раз привлечь внимание пользователя и заставить его выбрать именно ваш ресурс.
Ну вот, хотел покороче, получилось, как всегда. А как вы установили favicon на свой сайт?
Понравилась статья? Нажимай на кнопки:
Я устанавливал фавикон кодом… Так меньше нагрузки, хотя и заморочек больше
А то, что различные способы в статье описаны – это говорит о том, что Олег компетентен в этом вопросе, так что устанавливайте смело по его инструкциям
Влад, я тоже кодом устанавливаю, если в шаблоне нет такой фишки. Спасибо, за рекомендацию :-).
Точно компетентен!!!
Я столько способов до сего момента перепробовала… Урааа, получилось!!!
До сего момента у меня было: фавикон на главной странице №1, на стр. консоли №2, а на других вообще не было никакого фавикона и не знала что делать, а тут прямо сразу получилось!!! На всех страницах сайтика один и тот же фавикон)))
1 вариант: устанавливала через плагин favicons.zip, потом этот плагин удалила, а фав остался… и никак не удалялся!
При этом 2-м способом (тоже по совету какого-то блога): загрузила favicon.ico через медиафайлы и прописала 2 строки там же где и Влад советует, но строки отличаются от Владовых (если их приводить, то будет многабукф)
Спасибо большое-пребольшое!!
Через плагин устанавливать фавикон – откровенная жесть!!! А вот о том, что такие настройки бывают в темах никогда не слышал. Интересно, как их прописывают. Наверно в функциях?
В подробности не вдавался. В конечном итоге в коде страницы прописывается такой же код, как и при ручной установке.
Спасибо дорогой! Твит и гугл те за такое обширное описание!
Благодарю за подробные инструкции по установке фавикона!
Ой, спасибки, когда начинали, ничего не понимали и по совету Старт Апа установили фавикон с помощью плагина. Сайт и так тяжелый, а мы еще лишний плагин впихнули по незнанию. Пошла прописывать код, спасибо, Олег.
Я тоже первый раз плагином ставил, но уже давно исправил.
Ещё недельки две и вы 100% тысячник=)
Хорошо бы :-).
Отличный пост, тоже кстати первый раз вставлял плагином.
Спасибо вам большое за такую познавательную статью. Она многим поможет. Я сама недавно устанавливала фавикон с помощью такой статьи и все получилось.
Спасибо за советы! Можно дополнить список наверное сааамым простейшим способом – положить файл favicon.ico в папку public_html, wordpress сам его подхватит =)
Так я об этом упомянул, но для страховки не помешает прописать одну строку кода. Кстати, Яша не все фавиконы показывает в выдаче. Есть у меня сайт, где уже несколько месяцев иконка не отображается в поиске. Не знаю, от чего это зависит, но возможно, если ему конкретно указать путь, то он сделает это быстрее.
Точно! Невнимательно прочитал =)
Действительно хорошие и полезные советы! Я лично пользуюсь кодом, как-то удобнее. Да и вообще стараюсь обходиться без плагинов, уж очень они грузят сайт.
Отличное описание и подробный разбор. С этой статьей не остается никаких вопросов по установке фава.
Да, там кода одну строчку прописать, да еще картинку загрузить. Ради этого вряд ли стоит плагин закачивать.
Бывает, что для новичка это проблема. Сам таким был.
На мой взгляд, самый простой способ установить фавикон на блог – без плагина, с помощью Редактора в админке. Или если он уже есть – изменить картинку. Я, кстати, экспериментировал с разными размерами фавиконок, и мне больше понравился размер 50х50, картинка получается качественная.
Наверное, самая ленивая здесь – это я. Или трусливая по отношению к коду. Но плагин не очень хочется ставить. Спасибо, Олег, замечательная и актуальная для меня статья. Пошла хотя бы поделюсь с друзьями для начала.
Да может даже код и не надо будет трогать, только залить файл в корень сайта.
Спасибо большое за статью!!! Сегодня кучу вариантов перепробовал и по разному код переписывал в редакторе, но только под вечер по рекомендации описанной здесь, всё получилось хорошо. Правда интернет Эксплоэр всё равно не отображает. Ну и ладно, надоело уже под него подстраиваться.
У него всегда свои закидоны.
Спасибо за пост. Всё ок.
Это лучшая статья по вопросу фавикона:)
СПАСИБО огромное!
Рад, что понравилось.
Спасибо администратору! Самое наглядное описание по установке фавикона=)
Честно говоря, не особо рассчитывал, что эту информацию еще кто-то не знает. Но убеждаюсь в обратном, многим это еще нужно.
Подскажите пожалуйста – иконка отображается только на главной, на страницах ничего нету. Как можно поправить?
Спасибо.
Посмотрите в коде страниц, прописан ли там путь к картинке. Проверьте фавикон, как я писал здесь: https://blogibiznes.ru/pochemu-ne-otobrazhaetsya-favicon-proverka-favikona.html
Добавил favicon.ico во все основные папки сайта и стало везде отображаться. Хм. Странно. Да и ладно. Спасибо.
Интересное решение вопроса.
Читаю и все понятно, но иконка не появляется. Думала может не сразу появляется, но, судя по комментам, не появилась иконка только у меня( А статья хорошая, спасибо.
А где не появляется, в браузере или в выдаче? Подождите немного, может все заработает.
Проверьте саму картинку, что-то она открывается, а самой картинки нет.
Спасибо за отличную статью! Наконец, дошли и у меня руки до фавикона без плагина (тоже из стартапа :)) Делала кодами и с чистой совестью снесла плагин. Ура!!!
А у меня вот не получилось установить свою картинку. Ну никак мне не поддается этот фавикон!
А вы сам файл в корень добавили? Что при открытии открывается не картинка, а начинается загрузка файла. Проверьте правильность пути к фавикону или загрузите его в другую папку, изменив адрес в коде.
У меня в браузере сейчас Ваш фавикон отображается.
Олег, спасибо за статью, у меня все таки получилось установить свою картинку (я просто закинула его не в ту папку). И все это благодаря вашей статье, я так рада, что у меня получилось, сколько я с этим фавиконом мучилась.
Ну, отлично. Теперь нормально открывается по ссылке.
Спасибо!!! Помог код shortcut icon… (первый который).
Я не отношусь к ленивым людям, просто для меня все технические вопросы сложны, а уж с html – тут для меня китайский язык со словарем. Поэтому установила через плагин и Gravatar. Сижу себе радуюсь, что в окошечке браузера красуется моя физиономия. Однако, второй месяц пошел, а в поиске Яндекса фавикон так и не появился. Чешу затылок – что это может быть???
У меня в браузере Ваш фавикон отображается. Я там писал статью, как проверить правильность установки иконкт. Хотя Яндекс может долго не отображать.
Елена, у меня тоже яндекс очень долго фавиконку не отображал (месяца 3, наверное, не было), а потом сама появилась. Я тогда тоже через плагин ее ставила.
Спасибо, Елена, подожду! Вы меня успокоили!
Код, только код – нечего лишний раз нагружать сайт плагинами.
А я вот уже без малого год жду, когда Янедекс мой фавикон отображать начнет.
Яндекс непредсказуем, причем, фавикон это еще цветочки.
Олег, опять вернулась к вашей статье. Фавикон в Яндексе так и не отображается. Что ж, решила я пойти другим путем и сделать свой собственный.Сделала. А теперь “застряла”, так как в плагине есть возможность использовать свой значок, но надо указать путь к файлу. Простите, если вопрос покажется дурацким, но как указать путь, да еще и с http, если значок у меня в компьютере?
Да, еще тут в комментариях вычитала, что используют значки размерами не 16 х 16, а даже 50 х 50. И такое допустимо?
Значок нужен 16 х 16, это стандарт. Возможно 24 х 24, 32 х 32, но не вижу смысла. Загрузите файл в корень блога (там где находится файл robots.txt) и потом пропишите путь к картинке – _http://имя домена/favicon.ico.
Олег, поздравьте меня, я стала счастливым обладателем фавикона. Я ждала этого год, после третьего письма в Яндекс, мне вежливо пообещали разобраться в проблеме, и на следующий день фавикон стал отображаться.
Здорово, поздравляю! Оказывается надо писать в Яндекс в таких случаях.
Спасибо большое за статью.
Спасибо! Очень страшно было лезть в код, но по Вашим инструкциям все легко получилось!
Делайте предварительно копии файлов и ничего не бойтесь.
Олег, спасибо за подробную инструкцию!
У себя на Блоге использовал второй способ установки – “обычная установка без плагина”.
В Хроме, Мазиле и Опере favicon успешно отображается, а вот в Internet Explorer почему-то не отображается..
Так как я не эстет, позвольте поинтересоваться, не слишком ли я страшную картинку в адресную строку вставил?)
Спасибо!
Как я понял, это правый глаз кошки? Прикольный фавикон.
На Explorer не обращайте внимания, там все не как у людей.
Да-да, он самый. Еще раз спасибо.
А мне помог плагин All in one Favicon – тоже буквально в пару кликов все ставится.
Спасибо большое! Я сделал.
Спасибо! Отличная статья!
Есть поправка – “Однако напомню, что лучше всего, если это будет файл изображения в формате ISO с размером 16×16 пикселей favicon.ico.”
Возможно, вы опечатались вместо .ISO надо .ICO
Действительно, ошибся. Спасибо за подсказку! Уже исправил.
Я тоже сегодня полночи билась над этим фавиконом и столько статей пересмотрела, наконец-то получилось установить. Спасибо большое! Только почему в уголке шапки сайта он у меня не отображается, а только в верхней строке?
Не совсем понял, в каком уголке? Если Вы о том, что у меня в шапке есть фавикон, то это я просто на логотип картинку добавил. У Вас все нормально отображается.
Спасибо за статью! Всё понятно. Вчера вечером очень быстро установила нужный мне фавикон – и в корневую папку закачала, и в код прописала. А сегодня утром хотела поменять его – не получилось! Новый файл закачала в нужное место, а фавикон в браузере отображается старый. Браузеры почистила – не помогает. Не знаю, что делать. Перечитала статью – вроде должен поменяться, но нет.
Если старый удалили, то должен отображаться новый.
Спасибо автору за статью, поставил иконку кодом. До этого тотал командером просканировал все файлы и удивлялся, что там нет упоминаний о favicon.ico.
Теперь то все ясно, что у Вордпресса такая особенность)))
Спасибо большое! Очень подробно и понятно!
Спасибо большое!
Не знал о плагине, сделал самостоятельно фавикон и поместил в корневой каталог. Все хорошо, НО вот только в поисковых запросах на Яндексе мою иконку не отображало, пришлось добавлять строку с кодом в хэдер.
Хм, странно, я вот создал favicon для своего блога, закинул его в корневую папку сайта, и все работает.
Спасибо за статью. У меня есть уже готовая иконка, сейчас попробую ее вручную без плагинов установить.
Скажите, пожалуйста, если я поставила фавикон с помощью плагина, я могу его отключить, когда фавикон уже стоит?
Надо посмотреть, останется ли сам фавикон в папке и будет ли прописан путь к ней в коде.
Советую загрузить его вручную в корень сайта, прописать одну строчку кода и удалить плагин вообще.
Спасибо, статья помогла, устоновил через плагин.
Перебрала много сайтов, на которых есть инструкция по установке фавикона без плагина, но лучшего описания чем у Вас нигде не нашла. Все подробно, понятно, просто изложено. Спасибо автору за статью! Пойду реализовывать установку фавикона на практике
Спасибо… понятно… в принципе логично.
Попробовала из админки… слетают все настройки темы. Попробовала положить в папку… ничего не произошло. Скачала плагин (хотя и не хотела им пользоваться) иконка из Gravarar появилась, а я хочу свой файл. Где он должен быть расположен, чтобы путь к нему был для прописки во втором способе? Сразу извиняюсь за тупизм, я новичок в этом деле.
Файл нашла в теме заменила, все получилось, правда поисковики не видят, но и ладно. Спасибо за статью.
Поисковикам надо время для индексации фавикона.
Спасибо! Так просто оказалось.