Как установить favicon на WordPress сайт? Favicon как установить wordpress


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

Привет читателям и посетителям. Не замечали ли вы на многих ресурсах, форумах и блогах, маленькую такую картиночку во вкладках браузера? Я думаю, замечали, но наверняка значения этому не придавали, а зря.Картинка эта называется Favicon, и в сегодняшней статье я хотел бы рассмотреть установку этой небольшой детали на WordPress блог. И так, favicon wordpress, как же с ним разобраться и как его установить?

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

Что такое favicon

Для начала попробую объяснить что даёт этот небольшой значок. Это своего рода представитель вашего проекта в поисковых системах. Для наглядного примера продемонстрирую в виде скриншота. Вот этот маленький значок в квадрате и есть favicon, который отображается как некая картинка блога — его мини логотип.

Favicon wordpress

Установка Favicon

Переходим к установке этого маленького значка. Для начала, придётся посетить панель администратора WordPress системы. После этого переходим на вкладку Внешний вид — Настроить и видим настройки внутри темы, для установки этого маленького значка необходимо посетить пункт Свойства сайта.

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

Для начала рекомендую найти квадратную картинку, которую вы хотели бы установить как иконку. После окончания поисков, идём в обыкновенный стандартный Paint в системе windows, у меня например стоит «8 Windows» версия системы, наверное и паинт последней версии.

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

После этих манипуляций, просто сохранить на рабочий стол, что бы не потерять, ну или куда будет удобнее.

создать

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

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

сохранить

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

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

Успехов вам в создании «фавиконов» для ваших проектов. Жду ваших комментариев и вопросов. Есть вопросы, или пожелания? Прошу не молчать.

P.S. На блоге проходит конкурс на лучшего комментатора месяца, принять участие могут все желающие, я буду рад каждому комментатору. Пусть победит сильнейший. Подробнее с конкурсом можно ознакомиться на ЭТОЙ странице

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

С уважением С.Васильев

На последок небольшая интересная видеозапись маленького Стёпы, которая за 2 недели собрала более 170 тысяч просмотров.

blograbotainternet.ru

как сделать и добавить в Wordpress блог

iconsЗдравствуйте, дорогие друзья!Сегодня расскажу, как установить favicon на сайт, а так же как его создать. Если вы заметили, у моего блога теперь новый фавикон. Пора и вам этому научиться. Из данной статьи вы узнаете, как сделать иконку с помощью favicon online generator или нарисовать самостоятельно, какого она должна быть размера и почему она так необходима каждому сайту. Если на вашем WordPress блоге до сих пор не установлен фавикон, сделаете это прямо сейчас.

Что такое favicon иконка

Вы еще не знаете, что такое favicon и зачем он нужен?

favicon png

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

Favicon – это маленькая иконка, которая отображается в адресной строке браузера, на вкладке открытого сайта, рядом с его Title. Так же он присутствует в закладках, избранном и главное — в выдаче поисковых систем! Технически он представляет собой графический файл с расширением .ico.

favicon отображается в яндексе

Зачем нужен favicon.ico для сайта

Нужен он обязательно — это лицо вашего сайта. Он повышает CTR и помогает вашему сайту выделиться из общей массы, поэтому должен быть ярким и запоминающимся!

Как сделать favicon и где его взять:

Размеры favicon для WordPress

Favicon имеет стандартный размер 16×16 пикселей. Конечно же, это и для Worpdpress и для чёрта в ступе. Но можно сделать и больше, например, 24×24, 32×32, 48×48 или 64×64 пикселей. В этом случае иконка просто сожмется до стандартного размера. При этом, если кто-то захочет ее сохранить себе на компьютер, она опять станет большого размера и будет хорошо смотреться в виде ярлыка на рабочем столе:)

Favicon как сделать самостоятельно

Нарисовать иконку вы можете в привычном для вас графическом редакторе (Paint, Photosh0p), как обычную картинку. А затем преобразовать эту картинку в файл .ico с помощью онлайн генератора. Это не совсем удобно, т.к. в обычном редакторе вы не чувствуете масштаба и при конвертировании может пострадать качество.

Другой вариант того, как сделать favicon — нарисовать, используя онлайн сервис.

favicon.ru -  наиболее удобный на мой взгляд генератор иконок. Рисуете свою иконку с помощью предлагаемых инструментов, если удачно вышло, нажимаете кнопку «Скачать favicon», и файл скачивается на ваш компьютер.

онлайн генераторов favicon

Favicon online generator

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

favicon.co.uk — я всегда пользуюсь только этим сервисом, для меня он наиболее удобен. Не пугайтесь, что он англоязычный, там ничего не нужно читать и настраивать. Просто выберите файл с жесткого диска и кликните «Generate favicon».favicon online generator

favicon-generator.org – еще один аналогичный сервис, favicon online generator. Здесь так же можно преобразовать обычную картинку в файл favicon.ico. А кроме того, есть возможность нарисовать иконку самостоятельно или выбрать уже готовую из галереи.

онлайн генераторов favicon

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

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

Осталось узнать самое важное, как добавить favicon в WordPress. В большинстве готовых тем он уже установлен. Если у вас он уже есть, то нужно отыскать его в папке активной темы. Скорее всего он лежит в папке с картинками (Img или images). Просто замените там файл favicon.ico на новый.

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

  1. Для начала зайдите в корневую папку сайта (у меня это папка “public_html ”) и загрузите туда ваш новый favicon.ico для сайта.
  2. Откройте файл header.php и вставьте туда следующий код сразу после открывающегося тега :
    1 <link rel="shortcut icon" href="http://адрес_сайта/favicon.ico"type="image/x-icon" />

    <link rel="shortcut icon" href="http://адрес_сайта/favicon.ico"type="image/x-icon" />

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

Favicon не отображается в Яндексе

Мои клиенты по сайтам часто задают мне вопрос: «почему favicon не отображается в яндексе? установите его туда!». Мне остается только посмеяться над такой постановкой вопроса и ответить, что на работу Яндекса я повлиять не могу.

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

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

pro-wordpress.ru

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

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.

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

Если вы не владеете графическим редактором и не хотите обращаться к дизайнерам на биржах труда, тогда есть второй вариант — нарисовать иконку с помощью онлайн-сервиса. Есть несколько вариантов: 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 к вашему сайту!

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

Теперь зайдите на хостинге в директорию с вашей темой (/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" />

, либо же измените разрешение на .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 – это административная часть, её можно не заполнять. Осталось выбрать соответствующие иконки и нажать «Сохранить изменения».

hostsity.ru


Смотрите также

Prostoy-Site | Все права защищены © 2018 | Карта сайта