Как установить favicon на WordPress
Favicon (сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками в MSIE) это значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.
Допустим, что у нас уже есть готовый фавикон (favicon ). Это может быть картинка с любым названием в форматах GIF, JPEG, PNG или BMP. Однако напомню, что лучше всего, если это будет файл изображения в формате .ICO с размером 16×16 пикселей favicon.ico. Переименуйте, если у Вас не так.
Добавить Favicon на сайт очень легко. Надо просто скопировать его в корневую директорию сайта по FTP. На Вордпресс это папка public_html (там, куда устанавливали robots.txt).
В принципе, можно больше ничего не делать. Современные браузеры сами найдут пиктограмму, если она расположена в корневой папке блога. Но мы ведь хотим, чтобы наша иконка отображалась и в поисковой выдаче. Поэтому, будет лучше, если указать специальному роботу Яндекса путь к файлу favicon.ico. Для этого в html-коде страниц блога между тегами <head> </head> надо прописать такой код:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> |
или
<link rel="icon" href="/favicon.ico" type="image/x-icon"> |
В данном примере файл находится в корне сайта, а его адрес прописан в виде относительной ссылки. Если Вы загрузили картинку в другую папку, то укажите полный путь к ней в атрибуте href. Если картинка не в формате .ico, то укажите это в атрибуте type, заменив x-icon на нужный формат.
Многие советуют вставлять обе строки, но я считаю это лишним и советую прописывать только верхнюю строчку. Поясню, для Internet Explorer пишем значение “shortcut icon“, остальные браузеры понимают “icon“, которое уже входит в это значение.
как прописать код favicon для WordPress:
- Идем в админку “Внешний вид” – “Редактор“.
- Открываем файл header.php.
- Вставляем код до закрывающего тега </head>.
- Жмем “Обновить файл“.
как прописать код favicon для WordPress:
Как поменять иконку сайта
Если на сайте уже установлен favicon, но Вы хотите заменить его другим, то просто открываем по FTP корневую папку блога и меняем существующий файл на новый с таким же названием и форматом.
Если картинка расположена в другом месте, то делаем следующее:
- Открываем в браузере код страницы сайта (Ctrl+U).
- Ищем строку, где прописан адрес фавикона.
- Заменяем файл по указанному адресу.
Почему не отображается favicon
Если favicon не отображается в браузере после установки или замены, надо:
- перезапустить браузер;
- обновить кеш;
- проверить правильность пути к пиктограмме сайта.
В поисковой выдаче Яндекса favicon появится только после того, как сайт посетит специальный робот. После этого фавиконка преобразуется в формат PNG и добавляется на сервер Яндекса по адресу http://favicon.yandex.net/favicon/blogibiznes.ru. Чтобы увидеть иконку своего сайта, замените имя моего домена своим. Бывает, что Яндекс долго не отображает пиктограмму в выдаче. Надо подождать и, если через месяц иконка не появится, можно задать вопрос в тех.поддержку.
Вконтакте
Одноклассники
Мой мир
как сделать и добавить в WordPress блог
Здравствуйте, дорогие друзья!
Сегодня расскажу, как установить favicon на сайт, а так же как его создать. Если вы заметили, у моего блога теперь новый фавикон. Пора и вам этому научиться. Из данной статьи вы узнаете, как сделать иконку с помощью favicon online generator или нарисовать самостоятельно, какого она должна быть размера и почему она так необходима каждому сайту. Если на вашем WordPress блоге до сих пор не установлен фавикон, сделаете это прямо сейчас.
Что такое favicon иконка
Вы еще не знаете, что такое favicon и зачем он нужен?
Как видно из скриншота, каждый сайт имеет иконочку, как правило, не ней изображен логотип сайта.
Favicon – это маленькая иконка, которая отображается в адресной строке браузера, на вкладке открытого сайта, рядом с его Title. Так же он присутствует в закладках, избранном и главное — в выдаче поисковых систем! Технически он представляет собой графический файл с расширением .ico.
Зачем нужен favicon.ico для сайта
Нужен он обязательно — это лицо вашего сайта. Он повышает CTR и помогает вашему сайту выделиться из общей массы, поэтому должен быть ярким и запоминающимся!
- Пользователи, просматривая выдачу ПС, чаще кликают на сайты с привлекающим внимание фавиконом. Как видно из предыдущего скриншота, третий сайт без фавикона выглядит безликим и не привлекает внимания.
- Пользователи, которые уже переходили на ваш блог через поисковые системы, запоминают вашу иконку. И в следующий раз, увидя ее в выдаче, обязательно кликнут по ссылке рядом.
Как сделать favicon и где его взять:
- Нарисовать фавикон можно самостоятельно, если вы обладаете художественными навыками.
- Или подобрать готовую картинку и конвертировать ее в файл favicon.ico для сайта.
- Можно найти готовый фавикон в формате .ico.
Размеры favicon для WordPress
Favicon имеет стандартный размер 16×16 пикселей. Конечно же, это и для Worpdpress и для чёрта в ступе. Но можно сделать и больше, например, 24×24, 32×32, 48×48 или 64×64 пикселей. В этом случае иконка просто сожмется до стандартного размера. При этом, если кто-то захочет ее сохранить себе на компьютер, она опять станет большого размера и будет хорошо смотреться в виде ярлыка на рабочем столе:)
Favicon как сделать самостоятельно
Нарисовать иконку вы можете в привычном для вас графическом редакторе (Paint, Photosh0p), как обычную картинку. А затем преобразовать эту картинку в файл .ico с помощью онлайн генератора. Это не совсем удобно, т.к. в обычном редакторе вы не чувствуете масштаба и при конвертировании может пострадать качество.
Другой вариант того, как сделать favicon — нарисовать, используя онлайн сервис.
favicon.ru — наиболее удобный на мой взгляд генератор иконок. Рисуете свою иконку с помощью предлагаемых инструментов, если удачно вышло, нажимаете кнопку «Скачать favicon», и файл скачивается на ваш компьютер.
Favicon online generator
Для того, чтобы преобразовать обычную картинку в фавикон, есть различные сервисы.
favicon.co.uk — я всегда пользуюсь только этим сервисом, для меня он наиболее удобен. Не пугайтесь, что он англоязычный, там ничего не нужно читать и настраивать. Просто выберите файл с жесткого диска и кликните «Generate favicon».
favicon-generator.org – еще один аналогичный сервис, favicon online generator. Здесь так же можно преобразовать обычную картинку в файл favicon.ico. А кроме того, есть возможность нарисовать иконку самостоятельно или выбрать уже готовую из галереи.
Не буду учить вас, как искать готовые иконки в интернете. Надеюсь, вы и сами умеете гуглить. Скажу лишь, что есть множество сервисов, предлагающих готовые иконки бесплатно. Если там хорошенько покопаться, то можно найти что-то подходящее. Это может быть полезным, если у вас нет своего логотипа. Давайте переходить к созданию favicon для WordPress.
Как установить favicon на WordPress сайт
Осталось узнать самое важное, как добавить favicon в WordPress. В большинстве готовых тем он уже установлен. Если у вас он уже есть, то нужно отыскать его в папке активной темы. Скорее всего он лежит в папке с картинками (Img или images). Просто замените там файл favicon.ico на новый.
Теперь рассмотрим ситуацию, когда в вашей теме блога нет фавикона.
- Для начала зайдите в корневую папку сайта (у меня это папка “public_html ”) и загрузите туда ваш новый favicon.ico для сайта.
- Откройте файл header.php и вставьте туда следующий код сразу после открывающегося тега :
1
<link rel="shortcut icon" href="https://адрес_сайта/favicon.ico"type="image/x-icon" />
<link rel=»shortcut icon» href=»https://адрес_сайта/favicon.ico»type=»image/x-icon» />
- Обновите страницу, не используя кэш, и вы увидите новый фавикон. Хочу заметить, что не все браузеры моментально начинают показывать новую иконку, для некоторых должно пройти время.
Favicon не отображается в Яндексе
Мои клиенты по сайтам часто задают мне вопрос: «почему favicon не отображается в яндексе? установите его туда!». Мне остается только посмеяться над такой постановкой вопроса и ответить, что на работу Яндекса я повлиять не могу.
Дело в том, что индексирует он такие иконки очень долго, бывает, что и два месяца нужно ждать, пока она появится в выдаче. Поэтому, имейте терпение.
На этом все, теперь вы знаете, как добавить фавикон в WordPress блог. Задавайте ваши вопросы в комментариях, я обязательно помогу. До скорых встреч!
Плагины WordPress для установки favicon для браузеров
Плагины WordPress для установки favicon
Favicon повышает привлекательность вашего сайта WordPress в браузере. WordPress плагины для Favicon включают инструменты для изменения Favicon без изменения кода темы и позволяют загружать свой собственный фавикон или генерировать динамический фавикон для любых платформ.Стоит отметить, что с развитием WordPress практически все авторы тем стали добавлять инструмент создания favicon в настройки тем.
На сайте я уже писал статью, как установить favicon сайта WP при помощи вставки кодов в шаблон темы. В этой статье предложу несколько плагинов для создания иконок вашего сайта WordPress.
Плагин FavIcon Switcher
Страница плагина: https://ru.wordpress.org/plugins/favicon-switcher/. Данный плагин не тестировался с последними 3 значительными выпусками WordPress.
При помощи плагина FavIcon Switcher вы сможете установить несколько иконок для различных функциональных страниц.
- Можно поставить favicon по умолчанию на весь сайт,
- Можно установить отдельную иконку для admin панели,
- Для страниц с любыми выбранными словами, находящимися в URL страниц.
Количество иконок не ограничено. Работает плагин на основе правил созданных URL match (может найти URL-адрес в тексте, с протоколом или без него). Локализован для русского языка частично. Картинки для иконок загружаются в папку: /wp-content/uploads/favicon/
Установка плагина FavIcon Switcher
Установите плагин любым доступным способом:
- На вкладке Плагины→Добавить новый, найти плагин по слову и последовательно нажать на кнопки: Установить и Активировать.
- Скачать плагин со страницы плагина в WordPress.org, загрузить скаченный архив на сайт через Добавить плагин→Загрузить в меню «Плагины» и активировать плагин;
- Скачать плагин со страницы плагина в WordPress.org. Распаковать архив и загрузить все папки плагина на сайт в папку wp-content/plugins. Затем, активировать плагин в меню Консоль→Плагины→Установленные.
Настройка плагина Favicon Switcher
Для настройки плагина FavIcon Switcher нужно войти на вкладку Плагины→Установленные. Найти строку с плагином FavIcon Switcher и нажать «Настройки».
В настройках плагина есть несколько пунктов для выбора места устанавки фавикона. Первый пункт по умолчанию иконка на весь сайт. В других пунктах можно установить другие иконки для отдельных страниц. Сиснтаксис настроек следующий:
-
.*\/wp-admin\/.*— favicon для административной панели; .*category.*-favicon для страниц со словом category;.*slovo.*— favicon для страниц, в адресе которой есть слово “slovo”.
Плагин All In One Favicon
Официальная страница плагина All In One Favicon на WordPress.org (https://wordpress.org/extend/plugins/all-in-one-favicon/).
Плагин All In One Favicon создает и размещает любые картинки форматов ico, png, gif в качестве иконок вашего сайта. Определены два места размещения иконок: на фронтальной (общедоступной) части сайта и в admin панели сайта.
Загружать картинки для иконок можно как по URL картинки, так и непосредственно с вашего (локального) компьютера. Размер картинки не имеет значение. Плагин русифицирован не полностью. Картинки для иконок загружаются в папку: /wp-content/uploads/Год /Месяц
Год и Месяц в патче это папки загрузки всех фото сайта, если вы поставили галочку в настройках Параметры >>>Медиафайлы.
Устанавливается плагин любым из возможных способов установки плагинов. После установки не забудьте плагин активировать.
Настройка плагина All In One Favicon
Для настройки плагина необходимо войти: Консоль→Параметры→ All In One Favicon. В открывшемся окне загружаем нужные картинки для favicon сайта, и, конечно же, сохранить все сделанные изменения.
Еще плагины WordPress для установки favicon.
Favicon by RealFaviconGenerator
Страница плагина: https://ru.wordpress.org/plugins/favicon-by-realfavicongenerator/
Этот уникальный плагин создает динамический фавикон для любого браузера и любой платформы, включая Windows 8 и платформы для мобильных устройств.
Создавайте и настраивайте иконку сайта для настольных браузеров, iPhone / iPad, устройств Android, планшетах Windows 8 и других. За считанные секунды создайте иконку, которая отлично смотрится на всех основных платформах.
Custom Favicon
Страница плагина: https://ru.wordpress.org/plugins/custom-favicon/. Плагин обновлялся в начале 2015 года и плагин не тестировался с последними 3 значительными выпусками WordPress.
Простой плагин для генерации и добавления пользовательского фавикона для сайта WordPress.
Вывод
Как всегда WordPress предлагает два принципиальных варианта выполнения задачи. В данном случае была задача сделать favicon для сайта. Можно установить favicon вставив код в шаблон сайта (об этом читать в отдельной статье — ссылка вверху) или использовать плагины WordPress для установки favicon.
Свежие плагины
Еще плагины WordPress для установки favicon, протестированный на версии WP 4.9.5.
Genie WP Favicon
- https://ru.wordpress.org/plugins/genie-wp-favicon/
Very Simple Favicon Manager
- https://ru.wordpress.org/plugins/very-simple-favicon-manager/
azurecurve Multisite Favicon
- https://ru.wordpress.org/plugins/azurecurve-multisite-favicon/
PWD WP Favicon
- https://ru.wordpress.org/plugins/pwd-wp-favicon/
©www.wordpress-abc.ru
Другие статьи раздела: Плагины
Похожие посты:
Favicon на сайте WordPress
От автора: приветствую, вас, уважаемые читатели. В статье вы найдете информацию о том, как добавить favicon на сайт WordPress или как поменять favicon, который уже установлен. Представленный материал будет полезен как владельцам сайтов WordPress, так и владельцам любых других сайтов.
Итак, начнем с того, что же такое есть этот самый Favicon. Собственно, определение термина можно найти в Википедии. Из определения понятно, что favicon — ни что иное, как иконка сайта, показывающаяся (если она, конечно, имеется на сайте) во вкладке браузера слева от названия сайта. Если такая иконка не установлена, тогда на вкладке вы увидите только название сайта.
Согласитесь, наличие такой иконки делает сайт более узнаваемым. Особенно это касается брендовых проектов, которые могут знать и регулярно посещать многие пользователи. Наличие favicon на сайте имеет еще один, порой значительный, плюс — эта иконка показывается в результатах отдельных поисковых сервисов. Например, Яндекс Поиск показывает favicon.
Выгода здесь очень простая: пользователь что-то ищет, набирает поисковый запрос, получает результаты поиска, среди которых, допустим, будет и ваш сайт, но, скажем на пятом месте. При этом пользователь знает ваш сайт, посещает его. Как вы думаете, какова вероятность того, что пользователь, увидев в результатах поиска знакомую иконку, выберет ваш сайт? Думаю, вероятность достаточно высока. Именно поэтому иметь favicon на сайте, особенно брендовом проекте, крайне желательно.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курсКАК СДЕЛАТЬ FAVICON
Итак, если на вашем сайте WordPress все еще нет иконки, тогда самое время добавить ее. Однако перед добавлением, ее необходимо сделать. Для начала мы рассмотрим универсальные способы создания favicon, ну а чуть ниже вы узнаете, как добавить favicon на сайт WordPress (в WordPress сделать это вообще крайне просто).
Для создания favicon можно использовать любую подходящую программу. Однако можно поступить гораздо проще — воспользоваться онлайн сервисами для создания favicon. Таких сервисов не меньше, чем программ, и работа с ними проста и понятна. По запросу «favicon online» Гугл или Яндекс подскажут вам множество вариантов, на любой вкус.
Как неплохой вариант, можете попробовать сервис http://favicon.ru/. Здесь вы можете как создать иконку из имеющегося изображения, так и нарисовать ее сами с чистого листа. Кроме того, на этом же сервисе вы можете заказать услугу создания иконки. Вариантов, как видите много. Кстати, вы можете задать вполне логичный вопрос — А что, я не могу сделать иконку в редакторе Photoshop? А вот здесь не все так просто. Проблема в том, что для иконки favicon предъявляется ряд требований.
Начнем с расширения favicon. Традиционно это должен быть файл с расширением ico. Почему традиционно спросите вы? Да потому что прочие расширения для favicon могут быть некроссбраузерными. Например, браузер Internet Explorer до 11-ой версии не поддерживает никаких других форматов для favicon, кроме формата ico. Ну а Photoshop из коробки просто не поддерживает работу с файлами ico.
Что касается прочих форматов, то лучше всего в этом плане работает Firefox, он распознает все популярные форматы изображений (png, gif, jpg и пр.). К слову, поддержка формата gif означает, что мы можем создать для сайта анимированный favicon. Не уверен, что это хорошая идея, но на некоторых сайтах я встречал и такой favicon. Вот только увидеть анимацию можно не во всех браузерах (опять таки, проблема кроссбраузерности). Chrome, к примеру, не поддерживает анимацию иконки favicon, он просто покажет первый кадр анимации, т.е. на вкладке мы увидим статичную иконку.
Из этого выходит, что если для вас важна кроссбраузерность (в частности, поддержка старых версий IE), тогда для favicon желательно использовать формат ico. Если же поддержка старых версий IE в плане показа иконки не критична, тогда лучше использовать png. На текущий момент все популярные современные браузеры способны отобразить favicon и других форматов. Сам же формат ico на сегодняшний день уже можно считать устаревшим.
Среди других требований можно назвать размеры favicon. Это будут традиционные 16х16 пикселей. Однако они также уже несколько устарели. По той простой причине, что сайт могут просматривать на десятках различных платформ и устройств. Именно поэтому можно сделать иконки различных размеров и подключать ту или иную в зависимости от устройства (различные варианты в документации). Зачастую будет достаточно одной иконки 16х16. Если вам необходимо учесть все возможные устройства, тогда можете попробовать сервис Real Favicon Generator. Загружаете картинку — на выходите получаете целый пак иконок различных размеров и код для их подключения.
КАК ПОДКЛЮЧИТЬ FAVICON
Раньше здесь было все просто. Вы могли создать иконку favicon.ico и просто положить ее в корень сайта. Этого уже было достаточно, чтобы favicon отобразился во вкладке, т.е. в HTML не нужно было писать ни строчки кода. Все потому, что браузеры по умолчанию ищут этот самый favicon.ico в корневой директории сайта.
Также можно было прописать код подключения favicon в коде HTML следующей строкой:
<link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»>
<link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»> |
Как вы понимаете, в атрибуте href указывается путь к иконке, которая в нашем случае помещена в корень сайта. Соответственно, ее можно положить не обязательно корневую директорию, можно в любую папку, прописав корректный путь.
Так было раньше. Но сейчас все не намного сложнее. С появлением в HTML5 атрибута sizes мы можем указать несколько вариантов для подключения той или иной иконки. Выше я писал, что сервис Real Favicon Generator сгенерировал мне целый пак изображений и выдал примерно такой код для подключения favicon на сайт:
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс<link rel=»icon» type=»image/png» href=»/favicon-32×32.png»> <!— и еще с десяток строк различных вариантов… —>
<link rel=»icon» type=»image/png» href=»/favicon-32×32.png»> <!— и еще с десяток строк различных вариантов… —> |
Как видим из кода, здесь используются различные варианты и размеры favicon. Код объемен, но благодаря замечательному сервису нам не нужно писать его вручную. Вообще же, для большинства сайтов будет вполне достаточно единственной иконки и строки кода, подключающей ее (можно и без атрибута sizes):
<link rel=»icon» type=»image/png» href=»/favicon-32×32.png»>
<link rel=»icon» type=»image/png» href=»/favicon-32×32.png»> |
FAVICON НА САЙТ WORDPRESS
В заключение хотел бы показать вам, как добавить favicon на сайт WordPress. Как я уже отмечал, сделать это предельно просто. В фотошопе я нарисовал простенькую картинку с литерой S (будем считать ее логотипом сайта) и сохранил ее в формате png.
Идем дальше. Следующим шагом будет админка WordPress. Да, вы не ослышались. Нам не нужно использовать сторонние сервисы, WordPress все сделает за нас. Заходим в меню Внешний вид — Настроить — Свойства сайта.
В открывшемся меню нажимаем кнопку Выберите файл, чтобы загрузить файл или выбрать его из библиотеки файлов вашего сайта. Обратите внимание, что WordPress рекомендует использовать картинку квадратных пропорций с размером стороны не менее 512 пикселей. Выбираем или загружаем картинку — остальное WordPress сделает за нас.
После сохранения можно увидеть вполне достойный результат во вкладке браузера.
В исходном коде сайта при этом мы увидим новые строки, в которых подключается favicon, это будет примерно такой код:
<link rel=»icon» href=»http://wp/wp-content/uploads/2015/11/cropped-favicon-32×32.png» /> <!— и еще парочка вариантов… —>
<link rel=»icon» href=»http://wp/wp-content/uploads/2015/11/cropped-favicon-32×32.png» /> <!— и еще парочка вариантов… —> |
Вот и все, так просто мы подключили favicon в WordPress. Чтобы поменять favicon в WordPress необходимо проделать ту же процедуру, в свойствах сайта просто изменив картинку для иконки.
На этом будем завершать статью. Теперь вы сможете создать и добавить favicon в WordPress и не только. Задавайте вопросы, если вам что-то не ясно или не получается. Удачи!
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Скачать курс
Основы создания тем WordPress
Научитесь создавать мультиязычные темы с нестандартной структурой страниц
СмотретьКак установить Favicon на WordPress? 3 способа
Грамотная оптимизация сайтов состоит из множества разных действий. Чтобы ресурс был идеальным, необходимо настроить каждый параметр и учесть все мелочи.
Казалось бы, какая разница, какая иконка расположена во вкладке с сайтом? Но это очень важно, ведь логотип часто является брендом и запоминается.
Как установить Favicon на WordPress? Большинство начинающих вебмастеров используют именно этот движок, поэтому мы решили подробно ответить на данный вопрос.
Изменить иконку можно разными способами, мы рассмотрим 3 лучших варианта. Возможно, у вас получится сменить Favicon только каким-то одним способом.
Меняем фавикон на Вордпрессе
Что вообще такое Favicon, спросят некоторые новички. Это небольшой логотип, который отображается во вкладках браузера и поисковой выдаче:
С его помощью намного удобнее работать по вкладкам, ведь когда их открыто много, текст уже не видно. Шаблонный фавикон можно отнести к ошибкам в оптимизации сайта, профессионалы всегда его меняют. Где взять небольшую и красивую иконку? Её можно найти в сети или нарисовать самостоятельно.
Через поисковые системы можно найти иконки размера 32×32 или 16×16, скачать их и установить себе Favicon на WordPress. Если хотите что-то оригинальное, тогда favicon.cc и нарисуйте иконку:
Абсолютно бесплатно вы получите уникальную иконку и уже через пару минут сможете установить её для своего сайта. Если хотите, то просто уменьшите любую картинку до нужных размеров.
Установка Favicon на WordPress
Чтобы поставить готовую иконку на свой сайт, вы можете воспользоваться одним из следующих способов:
- Плагин All In One Favicon.
Нет проще способа для загрузки иконки на сайт, чем использование данного плагина. Устанавливается он стандартно, а после перехода к настройкам Frontend Settings они отвечают за отображение фавикона для посетителей. Можно использовать разные форматы изображения:
- Настройки шаблона.
Практически во всех темах есть некоторые настройки, в том числе и функционал для добавления Favicon. Заходите в пункт «Внешний вид» и переходите на вкладку «Настройка темы». Там должен быть какой-нибудь параметр, в котором указано слово Favicon:
- Ручное добавление.
Если плагины устанавливать не хочется, а в теме нет настройки фавикона, тогда остается верный способ – добавление иконки через код. Сначала вам нужно загрузить изображение на хостинг (желательно в корневую папку).
Затем открывайте папку с вашей темой /wp-content/themes/ тема/ и редактируйте файл header.php. После тега <head> нужно вставить пару строчек:
<link rel=»icon» href=»http://имя-сайта.ru/favicon.ico» type=»image/x-icon» />
<link rel=»shortcut icon» href=»http://имя-сайта.ru/favicon.ico» type=»image/x-icon» />
Обратите внимание, что в коде прописаны адреса к изображениям в формате ico, если у вас он другой, вносите изменение в код.
Пускай установка Favicon в WordPress и не является сложной процедурой, проделать её нужно обязательно. На оптимизацию влияет каждая мелочь, а помимо добавления иконки, используйте социальные кнопки от UpToLike. Потратьте несколько минут, чтобы посетители вашего сайта могли делиться записями, лайкать их и так далее.
Читайте другие статьи:
Установка favicon | WordPress.org Русский
загрузил в корень
…
не могу понять какой путь
Если грузили в корень, то и путь — корень.
и далее в head вставить это?
Почти. Вот так:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
В принципе, можно и не вставлять ничего. По умолчанию фавикон ищут там, где Вы его и положили, и с тем именем, которое Вы ему дали — /favicon.ico
p.s. Браузеры и ПСы качественно кэшируют это дело, так что ожидать мгновенных визуальных изменений не стоит.
@yube Будет ли он отображаться на всех страницах? Пишут что надо вставлять на каждую страницу
т.е. все?) favicon загружен в корень сайта, теперь только ждать?) Отлично же)
favicon надо устанавливать из настроек сайта, а не старым методом прописывания shortcut icon или выкладыванием favicon.ico в корень сайта.
Модератор SeVlad(@sevlad)
wp.me/3YHjQ
favicon надо устанавливать из настроек сайта, а не старым методом прописывания shortcut icon или выкладыванием favicon.ico в корень сайта.
Кто сказал НАДО? Поместить в корень — этого достаточно. Все браузеры и ПС прекрасно это понимают. Этот механизм появился раньше, чем требование прописывать фавиконку в хедере.
И НЕ нужно захламлять базу и заставлять генерировать лишнее (в тч и страницу аттачмента).
Если нужно отдельно для всяких ретин делать, то об этом в html-хедере стоит указать (и то по моему не обязательно)
АПД. Точно, не обязательно:
Корневой каталог сайта является локацией по-умолчанию для поиска иконок apple-
touch-icon-precomposed.pngиapple-touch-icon.png
@flector, читал что из самый cms можно как то установить, но не понял как это сделать.
Скажи пожалуйста где эти настройки?
- Ответ изменён 2 года, 10 месяцев назад пользователем ildar777.
Если нужно отдельно для всяких ретин делать, то об этом в html-хедере стоит указать (и то по моему не обязательно)
Яблоки сами ищут по стандартным именам. Желающие могут увидеть в логах.
IMHO прописывать имеет смысл только в случае использования нестандартных иконок. А имеет ли смысл использовать нестандартные — это отдельный вопрос.
Кто сказал НАДО? Поместить в корень — этого достаточно. Все браузеры и ПС прекрасно это понимают.
реалии говорят — НАДО. потому что помимо стандартного надо еще прописывать:
<meta name="msapplication-TileImage" content="урл/favicon.png">
<link rel="apple-touch-icon-precomposed" href="урл/favicon.png">
и там различные размеры при использовании ретин и прочих hd-экранов на мобильных.
Скажи пожалуйста где эти настройки?
Настроить\Свойства сайта\Иконка сайта
А имеет ли смысл использовать нестандартные — это отдельный вопрос.
мобильный трафик в рунете уже давно превысил десктопный — поэтому да, имеет смысл использовать.
Модератор SeVlad(@sevlad)
wp.me/3YHjQ
Яблоки сами ищут по стандартным именам. Желающие могут увидеть в логах.
Угу, спс. Как раз проапдейтил пост 🙂
реалии говорят — НАДО
Ну.. Это видимо Ваши личные реалии 🙂 Или скажем так — частный случай.
IMHO прописывать имеет смысл только в случае использования нестандартных иконок. А имеет ли смысл использовать нестандартные — это отдельный вопрос.
ППКС.
Скажи пожалуйста где эти настройки?
На фронт-энде в админ-баре «Настройки» → Свойства сайта → Иконка сайта
Ну.. Это видимо Ваши личные реалии 🙂 Или скажем так — частный случай.
это реалии всех, у кого мобильный трафик составляет существенную часть трафика. потому что стандартные 16×16 и 32×32 favicon на ретина-экранах выглядят убого.
как думаете, с чего вдруг wordpress добавил этот функционал в движок? имеется ввиду поддержка favicon до 512×512 ?
Установка Favicon на WordPress
Фавиконка является частью сайта и уже трудно представить сайт без нее. Это своего рода мини-логотип, который предает сайту имидж, уникальность. Поэтому следует уделить ей внимание не меньше чем остальной графики и потом она делается только раз так что не поленитесь сделать фавикон для сайта.
Что такое фавикон (Favicon)?
Favicon — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Стандартный размер фавиконки 16×16, но еще возможный 32×32, 64×64 и формат изображения допускается IOS, PNG, GIF.
Wikipedia.org
Как сделать фавикон?
Сделать фавикон можно разными способами: самому в каком-либо редакторе, с помощью различных сервисов, скачать готовые. Самым лучшим вариантом является, конечно, первый способ, там больше возможностей и больше вероятности что она будет уникальная.
Сервисы для создания фавикон.
В интернете есть очень много сервисов для создания фавикон, но различия между ними минимальны. Думаю, не стоит брать ко вниманию все существующие рассмотрим несколько из них, которые хорошо справляются со своей работай.
favicon.cc
Очень удобный сервис есть возможность нарисовать фавикон самому или сделать из ранее подготовленного изображения.
favicon.htmlkit.com/favicon
Также неплохой сервис, делает фавикон из подготовленного изображения в двух экземплярах: анимированная и простая.
favicon.by
И последний мало чем отличающий от предыдущих, но может более подходящий для вас.
Установка фавикон.
Установка фавиконки происходит в трех шагах:
- создание фавиконки
- закачка на сервер
- вставка кода для вывода
На некоторых сервисах имеется инструкция по установки, но чтобы лишний раз не ошибиться рассмотрим, что вставлять и куда. Закачиваем на сервер в корневую папку (public_html) значок(фавиконку). Затем открываем файл header.php находиться внутри вашей темы и между тегами <head> </head> вставляем код:
формат PNG
<link rel="icon" type="image/png" href="http://site.ru/favicon.png"/>
формат IOS
<link rel="shortcut icon" href="http://site.ru/favicon.ico" type="image/x-icon">
формат GIF
<link rel="icon" type="image/gif" href="http://site.ru/favicon1.gif">
Главное, укажите относительный путь к фавиконке, затем перегрузите страницу и увидите результат. Ну вот и все.