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

И где можно скачать готовые иконки для сайта ico. Надеюсь, вы уже подобрали себе подходящую картинку? Если нет, то в следующей статье я расскажу, с помощью онлайн генераторов. Не пропустите. Сегодня же поговорим о том, как установить favicon на сайт или заменить его, если он вам не нравится. Эта процедура одинакова для любых веб-ресурсов, но я покажу весь процесс установки на примере CMS WordPress.

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

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

При установке иконок для сайта возможны три варианта развития событий:

1. из админки блога Вордпресс, используя настройки шаблона;
2. обычная установка без плагина;
3. с помощью плагина.

Вставляем фавикон на блог из админки

Это самый простой способ. Во многих премиум-шаблонах 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.. Чтобы увидеть иконку своего сайта, замените имя моего домена своим. Бывает, что Яндекс долго не отображает пиктограмму в выдаче. Надо подождать и, если через месяц иконка не появится, можно задать вопрос в тех.поддержку.

Easy Favicons – Wordpress плагин для установки фавикона

Считаю, что использовать плагин для установки favicon на WordPress, это лишнее. Тем не менее, такая возможность для особо ленивых есть. Существует много подобных плагинов, но я покажу один, которым сам когда-то пользовался. Он называется Easy Favicons . Скачать его можно по .

Устанавливаем и активируем плагин (). Открываем в админке страницу с настройками.

Как видно выше, есть возможность установить фавикон тремя способами:

1. использовать свой Gravatar;
2. указать путь к картинке;
3. выбрать иконку для сайта из установленного набора.

Вот и все дела. Теперь, надеюсь, понятно, как установить фавикон на сайт. Какой бы способ вы не выбрали, помните, что любой популярный сайт должен иметь свою узнаваемую иконку. Кроме того, ее можно периодически обновлять. Например, во время каких-то интересных событий или праздников. Представьте, если под Новый год человеку в поиске попадется ваш блог с картинкой Деда Мороза. Это может лишний раз привлечь внимание пользователя и заставить его выбрать именно ваш ресурс.

Ну вот, хотел покороче, получилось, как всегда. А как вы установили favicon на свой сайт?

>> Как добавить иконку на сайт

Как легко и просто добавить иконку на сайт.

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

На вопрос стоит ли ставить иконки на сайт, я думаю стоит. Этот метод приманивает больше посетителей с поисковой системы Яндекс. По иконкам посетитель может определить тематику вашего сайта, или она просто может загипнотизировать интернет-пользователя.

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

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

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

Пример: как добавить иконку "favicon" на сайт.

Создание иконки для сайта я покажу на примере одного простого сервиса. Данный сервис находится по url-адресу http://favicon.ru . После того, как Вы зайдете на данный сервис, то у вас появиться вот такое окно:

Здесь вы можете сделать 4 действия - это заказать favicon у дизайнера (стоимость заказа 500 руб), нарисовать favicon самому внизу страницы с помощью инструментов и клеточного поля, загрузить понравившуюся вам картинку, после чего результат будет отображаться в Предпросмотре внизу страницы (помечено красным квадратом), предложить свои услуги дизайнера для создания иконок заказчикам.

После того как вы нарисуете или загрузите картинку и вас будет все устраивать, то следующим этапом вам нужно будет ее скачать себе на компьютер.Для этого нажмите на кнопку "СКАЧАТЬ FAVICON " и сохраните его на своем компьютере. После этого вам нужно данную иконку загрузить на свой сайт в корень сайта (там, где находится ваша главная страница) и после чего у вас в браузере в окне, как показано на скриншоте выше, должна, загрузится ваша иконка сайта.

Если ваша иконка не появиться на сайте в верху url-адреса сайта, то скопируйте и вставте себе на сайт на каждую страницу сайта внутри парного html тега такой код:

Если у Вас не появиться ваша иконка на сайте, то сделайте еще пару действий;

1. Перезагрузите вашу страницу сайта.

2. Потяните мышкой зажав левую кнопку за угол где должна появиться иконка и потяние ее вниз.

Все после этого, радуемся появлением иконки на своем сайте.

В Яндексе ваша созданная иконка появится не сразу, а после того как Яндекс переиндексирует ваш сайт.

На этом у меня все.

Надеюсь моя статья оказалась вам полезной и интересной и вы теперь знаете как добавить иконку на сайт.

Иконка, отображаемая на вкладке браузера, перед названием страницы называется favicon (от англ. FAVorite ICON - «значок для избранного»). Эти иконки используются в списках избранного в браузере, вы можете увидите их в результатах поиска Яндекс и многих других местах.

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

Как отредактировать файлы шаблона в сайте на wordpress, в том числе header.php, содержащий секцию head (изложено на примере футера), .

Почему название файла иконки — favicon.ico?

При подключении, указанным выше способом, вы вообще-то можете задать произвольное название файла, например, my-icon.ico . А название favicon связано с историей появления иконки.

В 1999 году компания Microsoft выпустила свой браузер Internet Explorer 5. Он впервые стал поддерживать значки для сайта. Таким значком выбирался файл с именем favicon.ico, который должен был быть помещён в корневой каталог сайта. Т.е. изначально не требовалось даже описывать в HTML документе его наличие. Иконка должна была использоваться при добавлении файла в «избранное».

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

Надо заметить, что файлы ICO морально устарели — их максимальное разрешение 32×32 точки. Но если вы хотите «угодить» любому, даже самому дряхлому браузеру, то для создания иконки в формате ICO вам поможет сайт favicon.cc . Там вы можете преобразовать произвольную картинку в файл.ico и/или нарисовать и отредактировать иконку в пиксельном редакторе.

Другие форматы иконки для сайта

Все современные браузеры могут использовать в качестве иконки jpeg, png или gif изображение. Некоторые из них (firefox и opera) работают в том числе и с анимированными иконками.

Как подключить иконку в другом формате. Для этого в секцию head нужно добавить вот такой HTML код (покажу сразу несколько примеров):

< head > < ! -- примерподключенияиконкивформате. ico -- > < link rel = "icon" type = "image/vnd.microsoft.icon" href = "http://www.mydomain.com/myicon.ico" / > < ! -- примерподключения. png -- > < link rel = "icon" type = "image/png" href = "mypath/icon.png" / > < ! -- примерподключения. gif -- > < link rel = "icon" type = "image/gif" href = "mypath/favicon.gif" / >

Favicon — это небольшое изображение во вкладке браузера, идентифицирующее ваш сайт. Так же оно служит добавлении вашего сайта на рабочий стол мобильного устройства для быстрого доступа. Отсутствие favicon у сайта — одна из 25 популярнейших проблем при создании сайта.

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

Почему вам стоит добавить favicon на ваш сайт?

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

Посмотрите на изображение и сразу поймёте, как выглядят favicon сайтов в Google Chrome, например:

Или вот пример из другого браузера - Vivaldi:

Каждый из этих сайтов имеет свою уникальную иконку и можно безо всяких проблем (зная, где чья) открыть нужный сайт, не перебирая каждую вкладку и не подводя мышкой к заголовку. Всё как на ладони — нужно лишь запомнить иконки часто используемых вами сайтов. Если вы активный пользователь интернет, то у вас скорее всего в каждом браузере открыто по 30-40 вкладок. Без иконок было бы очень тяжко… :-)

Как создать favicon

В самом простом варианте — это иконка квадратного размера, в идеале 32х32 или 16х16 пикселей, которую без проблем можно сделать в Photoshop, либо любом другом графическом редакторе. Для простоты — создайте изображение размером 128х128 пикселей, а затем уменьшите масштаб до 32х32 или 16х16, качество не должно особо пострадать. Затем сохраните изображение в формат PNG.

Создаём фавикон с помощью онлайн-генератора LOGASTER

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

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

Когда логотип готов, выберите функцию «Создать фавиконку с этим логотипом»:

Подберите иконку, которая вам понравится. В редакторе также видно, как она будет смотреться в уменьшенном варианте. Сохранённый фавикон можно скачать в PNG и ICO форматах разных размеров.

Рисуем иконку вручную

Если вы не владеете графическим редактором и не хотите обращаться к дизайнерам на биржах труда, тогда есть второй вариант - нарисовать иконку с помощью онлайн-сервиса. Есть несколько вариантов: favicon.cc , Faviconer , DynamicDrive . Там же можно выбрать из готовых вариантов, загруженных другими пользователями.

Вот так выглядит процесс создания иконки вручную в сервисе Favicon.cc:

Установка favicon на WordPress

Есть несколько вариантов подключения иконки. Первый — самый простой и доступный практически всем с новой версией WordPress – воспользоваться инструментами нашего движка. Если настройки вашей темы имеют опцию для установки favicon — используйте её.

Третий способ - это внесение двух строк в файл вашей темы; четвёртый — использование плагинов для этой задачи. Я рекомендую попробовать сначала первый вариант, потому что держать дополнительные плагины — это не самое лучшее решение, тем более, для такой разовой операции, как favicon для сайта.

Многие некачественные бесплатные темы жёстко прописывают путь до иконки в код файла header.php. И если ни один из предложенных вариантов не срабатывает, то вам нужно открыть файл header.php в директории с вашей темой и удалить все упоминания в тексте со словом «favicon». Помогает — пробовал! :-)

Способ 1: Используем возможности WordPress

По хорошему же, если у вас версия WordPress 4.3 и новее, то вам достаточно будет загрузить графический файл размером 512х512 пикселей и через интерфейс «Внешний вид» - «Настроить» перейти в раздел «Свойства сайта». После этого загрузить ваш файл через загрузчик WordPress и он автоматически масштабируется под все необходимые размеры.

Способ 2: Использование настроек вашей темы

Во многих темах (премиумных или бесплатных) есть настройки, которые находятся в меню «Внешний вид» — «Настройки темы». В первую очередь я бы рекомендовал просмотреть все имеющиеся варианты настроек и отыскать то, что относится к favicon.

Вот так, например, выглядит эта опция в моей теме:

Раскрываем этот блок и видим следующее:

Теперь останется лишь загрузить изображение и сохранить настройки. Не перепечатывайте слепо адрес моей иконки с изображения выше - у вас будет свой адрес изображения и, скорее всего, он будет выглядеть так: http://адрес-вашего-сайта.ru/wp-content/uploads/2016/название-файла.png .

Это самый быстрый способ подключить favicon к вашему сайту!

Способ 3: Подключение в файл header.php

Загрузите созданную вами иконку на ваш хостинг, путём подключения на FTP, SSH, либо через файловый менеджер вашей хостинг-панели. Файл нужно разместить в корневой директории, чтобы он был доступен по адресу http://адрес-вашего-сайта.ru/favicon.ico , либо favicon.png, в зависимости от типа иконки.

Теперь зайдите на хостинге в директорию с вашей темой (/wp-content/themes/ваша_тема/) и откройте на редактирование файл header.php. После открывающего тега вставьте следующий код:

Либо же измените разрешение на.png, если у вас иконка этого типа.

Способ 4: Плагин «Insert Headers and Footers»

Заходим в раздел «Плагины» — «Добавить новый», в поиске вбиваем Insert Headers and Footers, устанавливаем найденный плагин и активируем его.

Если не можете найти, воспользуйтесь ссылкой на официальный репозиторий WordPress: Insert Headers and Footers . Сохраните его на компьютер и установите через ссылку «Загрузить», раздела «Плагины» — «Добавить новый».

После этого зайдите в пункт меню «Параметры» — «Insert Headers and Footers» и в области Header вставьте тот HTML код, который был приведён в пункте выше, для подключения favicon вручную.

Не забудьте нажать кнопку «Save settings» для сохранения настроек.

Способ 5: Плагин «All In One Favicon»

Если и с предыдущим вариантом у вас ничего не получилось, тогда остаётся самый последний вариант — подключить плагин с названием All In One Favicon , устанавливается он абсолютно аналогично всем остальным плагинам, поэтому по шагам писать не буду. Нюанс в том, что данный плагин не обновлялся больше трёх лет.

После установки и активации плагина, заходите в раздел меню «Параметры» - «All in one Favicon» и видим следующий экран с настройками:

Frontend Settings – это для отображения иконки при просмотре сайта со стороны посетителя; Backend Settings – это административная часть, её можно не заполнять. Осталось выбрать соответствующие иконки и нажать «Сохранить изменения».

Заключение

Если у вас не сработала установка иконки ни с одним из предложенных мною способов - напишите в комментарии, обсудим, как решить вашу мелкую проблему. Но, как лично мне кажется, этих вариантов более чем достаточно чтобы решить столь простую проблему. ;-)

Если вы хотите поблагодарить меня за материал - можете сделать это здесь:-)

Или угостить кофе;-)

Buy me a coffee

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter .

Основной формат для favicon — . Такой формат поймут все современные браузеры. Более новые и "продвинутые" воспринимают форматы (включая анимированные GIF), and .

Размеры и цвета favicon — 16x16 пикселей, 256 цветов или TrueColor. Эта картинка будет отображаться рядом с адресной строкой, в закладках, табах и результатах поиска. Допускается использование нескольких картинок для favicon разных размеров (32х32, 48х48) и форматов, для нормального отображения иконки и на рабочем столе.

Размещение favicon

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

Заметка

Использование резервирования расположения на веб сайтах протеворечит архитектуре WWW , сайт лишается гибкости.

Подключение favicon

Подключение производится в секции , посредством тега < >.

[…] […]

Результат . По рекомендациям тегу head добавляем атрибут profile, у которого есть ссылка на документ, поясняющий назначение атрибута rel. Документ http://www.w3.org/2005/10/profile вариант такого пояснения. Можно использовать его, а можно создать свой.

Заметки

• В 2003 году ICO формат был зарегистрирован в IANA как тип image/vnd.microsoft.icon . С тех пор тип image/x-icon является не корректным.
• отобразит значок в адресной строке только после добавления сайта в избранное.
• если зашли на сайт, где не было favicon, затем его подключили, чтобы увидеть иконку нужно обновить кеш (иногда требуется перезапустить браузер)

Примеры подключения favicon различных форматов

Заметка

В требуется указывать полный путь к файлу favicon, в можно использовать относительный.

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