Как установить 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. Чтобы увидеть иконку своего сайта, замените имя моего домена своим. Бывает, что Яндекс долго не отображает пиктограмму в выдаче. Надо подождать и, если через месяц иконка не появится, можно задать вопрос в тех.поддержку.
Вконтакте
Одноклассники
Мой мир
Установка 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">
Главное, укажите относительный путь к фавиконке, затем перегрузите страницу и увидите результат. Ну вот и все.
Плагины 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
Другие статьи раздела: Плагины
Похожие посты:
Похожее
Как установить фавикон на сайт WordPress. Урок 30.
Фавикон или иконка сайта – это маленькое изображение во вкладке браузера. Фавикон помогает пользователю сориентироваться, если в браузере открыто много вкладок, а также узнать ваш сайт в поисковой выдаче.
Например, вот фавикон нашей вебмастерской.
Сейчас вы установите свой фавикон себе на сайт. Для того чтобы получить фавикон, есть три способа, как и в случае с логотипом:
- Фавикон можно нарисовать самому, если вы владеете графическими программами.
- Можно найти фавикон в интернете.
- Можно заказать фавикон фрилансеру через ту же самую биржу Work-zilla.
Первый метод пояснять не стану, те, кто умеют рисовать, смогут сами. Метод с биржей тоже не требует объяснений, так как в предыдущем задании была исчерпывающая инструкция по этой бирже.
А вот способ поиска фавикон в интернете требует пояснений, не смотря на кажущуюся простоту. Дело в том, что иконка сайта должна соответствовать требованиям:
- Размер 32 х 32 пикселей.
- Формат ico (предпочтительно) или png.
Те, кто выбрали метод найти фавикон в интернете, читают дальше, а те, кто хотят получить фавикон другим способом, читают ближе к концу о том, как установить фавикон.
Чтобы найти фавикон в интернете, нужно использовать специальный поисковик FindIcons.com. Перейдите в него, и вы увидите такую страницу.
Этот сервис на английском языке. Поэтому и запросы в нём нужно писать по-английски. Если вы затрудняетесь, то воспользуйтесь переводчиком.
Например, я напишу запрос «aircraft» — «самолёт». Чтобы начать искать, нажмите «Search».
Появятся результаты поиска. По моему запросу нашлось всего две картинки. Для того чтобы скачать фавикон на свой компьютер, нажмите на желаемый формат около картинки – ico. После этого начнётся скачивание картинки. Также может появиться запрос на выбор размера. Если он будет, то выберите 32 х 32 пикселей.
Возможно, что выбранной вами картинки не будет в нужном формате или в нужном размере. Тогда придётся выбрать другую картинку.
Как установить фавикон на сайт
Теперь, когда фавикон есть у вас на компьютере, его нужно установить на сайт. Для этого перейдите в пункт «Внешний вид», подпункт «Frontier настройки». Здесь найдите область «Значок» и нажмите кнопку «Загрузить».
Появится стандартный загрузчик WordPress, через который нужно загрузить фавикон с компьютера.
Иконка сразу появится в предпросмотре. Нажмите кнопку «Сохранить».
Теперь зайдите на ваш сайт, и вы увидите, что в заголовке вкладки появился ваш фавикон.
Задание №4 считается выполненным, если:
- Вы установили свой фавикон на сайт.
Читайте далее — Как изменять цвета и фон темы 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 сайту – Блог про WordPress
Favicon – небольшое изображение, которое отображается рядом с заголовком вашего веб-сайта в браузере. Оно помогает пользователям идентифицировать ваш ресурс. Постоянные посетители сайта запомнят это изображение – оно будет ассоциироваться с вашим вебсайтом. Соответственно, узнаваемость вашего бренда повысится, что повлияет на доверие со стороны вашей аудитории. Одной из достаточно популярных ошибок при запуске блога является именно отсутствие favicon. В этой статье мы покажем, как добавить favicon к сайту WordPress.
Зачем добавлять favicon к WordPress-сайту?
Как было отмечено ранее, favicon определяет индивидуальность вашего сайта. Также favicon улучшает юзабилити ресурса и повышает опыт взаимодействия. Взгляните на следующее изображение:
У большинства пользователей обычно открыто много вкладок в браузере. Чем больше вкладок, тем хуже виден заголовок вашего сайта. С помощью favicon пользователь может быстро опознать ваш сайт и перейти к соответствующей вкладке.
Как создать favicon
Favicon – это простое квадратное изображение. В идеале оно может иметь размеры либо 32×32 пикселей, либо 16×16 пикселей. Откройте Photoshop или любой другой графический редактор, создайте квадратное изображение 128х128 пикселей, чтобы можно было легко с ним работать. После создания нужного изображения вы можете затем изменить его размеры до 32×32 пикселей и сохранить его в формате PNG.
Даже учитывая тот факт, что большинство современных браузеров работает с favicon в формате PNG, старые версии IE этого не делают. Чтобы ваш favicon нормально отображался во всех современных браузерах, мы рекомендуем преобразовать его в 16×16 пикселей и сохранить в формате .ico. Чтобы преобразовать PNG-файл в .ico, вы можете использовать favicon generator от Dynamic Drive.
Добавление favicon к своему сайту
Загрузите свой favicon в корневой каталог вашего сайта с помощью FTP. После этого вы можете вставить следующий код в файл header.php темы:
<link rel="icon" href="http://www.wpbeginner.com/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://www.wpbeginner.com/favicon.ico" type="image/x-icon" />
Замените wpbeginner.com на URL вашего сайта. Если в вашей теме нет файла header.php или вы не можете найти его, не переживайте – для этого существует плагин. Установите и активируйте плагин Insert Headers and Footers. После активации плагина перейдите в раздел Параметры – Insert Headers and Footers и вставьте код, представленный выше, в секцию хэдера, после чего сохраните ваши настройки.
Если вы не хотите работать с FTP, то вы можете воспользоваться плагином All in One Favicon.
Также загрузить favicon можно и в разделе медиафайлов WordPress. Загружаете готовый favicon, получаем его URL, после чего вставляем этот URL вместо того, что указан в коде выше.
Источник: wpbeginner.com
как его сделать и установить
Всем привет! Сегодня расскажу, что такое фавикон для сайта, каких форматов и размеров он бывает. Какой размер иконки лучше выбрать и почему. Научу создавать фавиконы с помощью онлайн сервисов. Покажу где можно бесплатно скачать уже готовые фавиконки различных размеров и форматов. И конечно разберем варианты установки фавикона на сайт. А в конце вы узнаете, как проверить правильно ли установлен favicon на сайте.
Для начала я перечислю несколько веских причин почему следует обязательно установить эту иконку на ваш сайт:
Ваш ресурс становится узнаваемым пользователями что способствует увеличению кликабельности в поисковой выдачи и в том случае если у пользователя открыто много вкладок в браузере.
Сайт начинает вызывать доверие не только среди пользователей, но и среди поисковых роботов.
Вот, например, Яндекс считает ошибкой отсутствие фавикона значит в отношении сайта могут быть приняты штрафные санкции в виде понижения в поисковой выдаче, а как следствие падение трафика.
Возможная проблема в Яндекс.Вебмастере при отсутствии фавикона
Поэтому я считаю, что и речи быть не может о том, чтобы не устанавливать фавикон на сайт.
И думаю вы со мной согласитесь, прочитав эту статью до конца.
Что такое фавикон для сайта
Каждый вебмастер, создавая свой сайт хочет, чтобы он выделялся среди миллионов других сайтов, находящихся в поисковые выдачи.
И помочь в этом в этом сможет небольшая иконка, которая среди вебмастеров, называется favicon.
Favicon (фавикон) – это картинка размер которой начинается от 16×16 пикселей, и которая в большинстве случаев создается в формате «ico.» и отображается в выдаче поисковых систем в снипете и на вкладке браузеров.
Фавиконы в поисковой выдачи Яндекса
Favikon на вкладке браузера
Но с развитием интернет-технологий стало возможным использование других форматов этих иконок:
- PNG
- GIF
- Анимированный GIF
- JPEG
- APNG
- SVG
Но эти форматы пока поддерживают не все браузеры поэтому я рекомендую именно формат «ico» и размер фавиконки не менее 48×48 пикселей.
Почему именно такой размер? Все очень просто.
В рекомендациях гугла указан минимальный размер именно 48×48 пикселей и не рекомендовано устанавливать на сайт иконки меньших размеров так как они не будут показываться в мобильной версии поисковой выдачи.
Требования Google
А в рекомендациях Яндекса указано что иконка может иметь размер от 16×16 пикселей до 120 х120.
Требования Яндекса
Поэтому вариант фавиконки от 48×48 пикселей устроит обе поисковые системы.
Как сделать фавикон
Для начала подберем квадратную тематическую картинку желательно без мелких деталей. Формат этой картинки может быть любого из следующих форматов jpg, jpeg, png.
Картинку вы можете найти в интернете или заказать на бирже фриланса чтобы ее нарисовали.
На этом сайте где вы читаете статью я использовал в качестве фавикона логотип который мне рисовал веб-дизайнер.
Фавикон и логотип на сайте webnub.ru
А для сайта, на котором я все показываю я подобрал вот такую тематическую картинку размером 512×512 пикселей в формате png.
Картинка с изображением мозга
Почему именно такого размера вы поймете, когда я буду описывать варианты установки фавикона.
А дальше с помощью сервиса онлайн-генератора фавиконов такие сервисы еще называют – favicon generator, преобразуем картинку в нужный формат и размер.
Создание фавикона онлайн
Переходим на сервис PR-CY по ссылке https://pr-cy.ru/favicon/ и нажимаем «Выбрать»
Генератор favicon на сервисе PR-CY
Находим на компьютере нашу картинку выбираем ее и нажимаем «Открыть»
Процесс загрузки картинки в сервис генератор favicon
После загрузки картинки жмем «Создать favicon»
Процесс создания фавиконки онлайн
Далее сервис покажет, как будет выглядеть наша иконка в браузере, и мы можем скачать архив с готовым фавиконом.
Распаковываем архив и видим, что в папке у нас две картинки. Нам нужна будет размером 48×48 в формате «ico»
Готовый фавикон в формате ico
Если нужен другой размер фавиконки то здесь лучше воспользоваться сервисом конвертором изображений.
Там все просто загружаете картинку на сервер выбираете нужный для вас формат и жмете «Конвертировать». После конвертирования картинки она автоматически загрузится на ваш компьютер.
Вот ссылки на пару таких сервисов:
- Бесплатный онлайн-конвертер
- Online-convert
Где скачать фавикон для сайта бесплатно
Для тех, кто хочет получить уже готовую фавиконку есть сервисы в которых собираются целые бесплатные библиотеки этих иконок. Доступны они в различных форматах. Заходи выбирай и скачивай.
Вот один такой сервис icon-icons.com у него есть такая библиотека.
Переходим на главную страницу по ссылке https://icon-icons.com/ru/ и в поле поиска вводим слово, ассоциирующее с нужным для вас изображением.
Я для примера введу слово «мозг» и нажимаю «поиск».
Форма поиска картинок в сервисе icon-icons.com
Откроется страница с множеством готовых фавиконов. Остается только выбрать подходящую и нажать на нее.
Результаты поиска картинок в сервисе icon-icons.com
На следующей странице выбираем подходящий размер и нажав на нужный формат иконки она загрузиться на компьютер.
Выбор параметров фавиконки
Дальше пора приступать к установке ее на сайт.
Как установить фавикон на сайт
После того как картинка готова ее нужно установить на сайт. Сделать это можно несколькими способами:
- Непосредственно в корневой каталог сайта загрузив иконку через файл менеджер хостинга. Действия буду показывать на примере хостинга Макхост. (Этот способ подойдет для любого сайта.)
- Через настройки темы WordPress в панели управления сайтом.
Загрузка в корневой каталог сайта
Переходим на хостинге Mchost в раздел сайты и открываем «Файл менеджер»
Файл менеджер в панели управления сайтами на Mchost
Нам откроется корневая директория нашего сайта. Внизу находим кнопку «закачать файл» и нажимаем на нее.
Корневая директория сайта
Нам откроется функционал загрузки файлов. Выбираем загрузка с компьютера и жмем «Выберите файл». Откроется проводник Windows, в котором переходим в компьютерную папку куда вы сохраняли готовую фавиконку. Выделяем картинку и жмем открыть.
Процесс агрузки файла в корневую директорию сайта
И после этого жмем закачать.
Поледний этап закачки файла
Проверяем директорию видим, что файл закачен.
Фавикон в корневом каталоге сайта
Открываем сайт в браузере и проверяем. Не забываем почистить кэш в браузере. Как видим иконка у меня там, где и должна быть.
Фавикон сайта igrymozga.ru
Если вдруг фавиконка не отображается. Это бывает в очень редких случаях:
- У вас старая версия браузера
- Дело в самой теме вордпресс
Для решения этой проблемы нужно, в файл header.php нашей темы добавить перед закрывающимся тэгомспециальный код:
<link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»>
<link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>
В ВордПресс переходим в административную панель управления в раздел «Внешний вид» «Редактор тем»
Переход в редактор тем в WordPress
Здесь с левой стороны ищем наш файл и нажимаем на него. Нам откроется код где находим конструкцию, заключенную в тег, вставить в нее наш код и нажать «Обновить файл»
Редактирование файла header
Нужно запомнить. Если у вас установлена тема ВордПресс для которой выходят обновления, этот код придется вставлять каждый раз, когда обновляется ваша тема так как обновление происходит путем замены файлов.
Если у вас сайт не на CMS, то у вас скорей всего не будет файла header.php тогда ищем файл index.html и в нем уже находим теги <head> <head/>. Редактировать тогда придется с помощью функций хостинга.
Корневой каталог простого сайта
Вставка кода для в файл index.html
Или через один из файловых менеджеров, например, FileZilla соединившись с хостингом использовав протокол FTP.
Как вставить через настройки темы WordPress
Есть еще один способ установки фавикона. Для этого нам понадобится квадратная картинка размером не менее 512×512 пикселей.
Поэтому я изначально подбирал картинку именно такого размера.
Для установки переходим в консоль управления и открываем настройки темы. Находятся они «Внешний вид» «Настроить»
Переход в настройки внешнего вида темы WordPress
Далее в меню с лева открываем «Свойства сайта»
Свойства сайта в меню настроек темы root
Здесь нажимаем «Выберите иконку сайта»
Свойства сайта
Нам откроется библиотека файлов где нужно перейти в раздел «Загрузить файлы» и нажать «Выберите файлы»
Загрузчик файлов в WordPress
Откроется процесс загрузки картинок с компьютера. Выбираем нужную картинку и жмем «Открыть»
Процесс загрузки файлов с компьютера
И далее в библтотеке файлов жмем «Выбрать»
Выбор картинки в билиотеке файлов
Затем сохраняем изменения нажав «Опубликовать»
Сохранение изменений в настройках сайта
А теперь давайте я покажу как проверять правильность установки фавиконки.
Как проверить фавикон сайта
Прежде чем проверять нужно знать несколько вещей:
- Гугл на данный момент не показывает фавиконы в результатах десктопной поисковой выдачи. Почему так происходит я не знаю, ответа на этот вопрос я не нашёл. Если кто нибудь из вас дорогие читатели знает ответ прошу сообщить в комментариях к этой статье или в личном сообщении. Буду за это очень признателен.
- Для отображения иконок в результатах поиска Яндекса должно пройти пару недель после установки иконки и посещения поисковым роботом вашего сайта.
Результататы десктопной поисковой выдачи Google
И так это запомнили теперь давайте приступим непосредственно к проверкам.
Я выделяю среди них четыре основных:
- Визуальная – непосредственно в браузере
- По прямой ссылке
- Проверка в базах Яндекса и Google
- В Яндекс.Вебмастере
Визуальная проверка
Открываем сайт в различных браузерах и смотрим отображается ли иконка в верхней части браузера.
Отображение фавикона в Яндекс.Браузере
Отображение фавикона в Google Chrome
По прямой ссылке
Для этого нужно в браузере перейти по ссылки ведущею непосредственно на загруженную нами картинку.
У меня ссылка будет такая https://igrymozga.ru/favicon.ico. Если вы делали все по моей инструкции, то замените домен на свой.
Отображение иконки сайта при переходе по прямой ссылке
В базах Яндекса и Google
Этот способ подходит для проверки добавлен ли ваш фавикон поисковыми роботами в базу или нет.
Для Яндекса это будет вот такая ссылка:
http://favicon.yandex.net/favicon/ваш_домен
Для Google будет такая:
http://www.google.com/s2/favicons?domain=ваш_домен
Незабываем в ссылки вставлять ваш домен.
Если после перехода по ссылке отображается ваш фавикон то значит специальный робот поисковиков нашел его и добавил в свою базу.
В Яндекс.Вебмастере
Как я уже писал в начале статьи яндекс считает ошибкой отсутствие фавикона. Посмотреть есть ли эта ошибка для вашего сайта можно после того как вы добавите его в Яндекс.Вебмастер перейдя в раздел «Диагностика сайта».
Яндекс.Вебмастер раздел диагностика сайта
Заключение
Воспользовавшись одним из способов установки фавиконки, вы сделаете ваш сайт еще более узнаваемым в интернете.
А также избежать неприятностей, которые могут возникнуть так как я уже говорил, что Яндекс считает ошибкой его отсутствие.
Google конечно не информирует о том, что не установлена иконка, но все-таки рекомендует их устанавливать. А это значит, что отсутствие этой небольшой картинки тоже может повлечь со стороны этой поисковой системы определенные действия, о которых вы даже не узнаете.
Поэтому установив фавикон, вы дадите понять поисковым системам что придерживаетесь их рекомендациям тем самым повысив их доверие к вашему ресурсу.
А пользователи, которые хоть раз посетили ваш сайт зайдут на него обязательно еще раз встретив знакомую иконку в поиске.
На этом сегодня все. Делитесь статьей в социальных сетях. Задавайте вопросы в комментариях. Подписывайтесь на обновления блога. Всем пока.
С уважением, Александр Зырянов.
Как создать и добавить значок WordPress или значок сайта
Значок, который является сокращением от «избранного значка», также может называться значком сайта. Если вы сейчас посмотрите на страницу своего браузера, скорее всего, там будет отображаться ряд значков. Однако вы, возможно, никогда сознательно не замечали значки, знайте, что это такое и что они делают. Итак, что такое значок и зачем он нужен вашему сайту WordPress?
В этой статье мы собираемся объяснить, что именно такое значок и как он может принести пользу вашему бизнесу или блогу.Затем мы рассмотрим, как вы можете быстро и легко добавить его в свой блог WordPress.
Что такое Favicon / Site Icon?
Значок — это значок, который отображается на вкладке браузера рядом с заголовком страницы веб-сайта. Фавиконы также можно увидеть рядом с названием веб-сайта в списке сайтов, добавленных в закладки, а также использовать их в качестве значков приложений, а в WordPress они также могут называться «значком сайта».
Favicons обычно используют изображение логотипа сайта, который они представляют.Однако это также может быть изображение, связанное с брендом или стилем сайта, если это более подходит. Выбранный значок нельзя менять, если только ваш бизнес не подвергнется ребрендингу. Таким образом, посетители вашего веб-сайта познакомятся с вашим значком и узнают его в ряду вкладок браузера.
Важность использования Favicon
Favicons предназначены для визуального маркетинга и взаимодействия с посетителями вашего сайта. Добавление значка позволит вашей аудитории подсознательно и мгновенно идентифицировать ваш веб-сайт WordPress в море приложений или веб-страниц.
Знакомство с вашим фавиконом поможет вашей аудитории быстро и легко найти вас. Это также будет напоминать пользователям о существовании вашего сайта, что приведет к увеличению трафика и увеличению числа постоянных посетителей. Наконец, значок поможет вашему сайту выделиться среди конкурентов и сделать его авторитетным источником.
Как видите, преимущества использования значка огромны. Итак, давайте теперь узнаем, как вы можете создать значок и добавить его на свой веб-сайт WordPress…
Создание Favicon
Первым шагом в процессе создания значка является создание подходящего изображения.Как уже упоминалось, в идеале значок должен быть таким же, как логотип вашего веб-сайта, чтобы посетители могли его сразу же узнать.
Однако иногда со сложными логотипами это может привести к нечеткому или непонятному значку. В этом случае вам придется упростить свой логотип или использовать другое изображение. Убедитесь, что вы выбрали то, что представляет ваш бизнес и явно отражает ваш бренд.
Создание или редактирование изображения Favicon
Согласно Кодексу WordPress, изображения значков должны иметь квадратную форму и размер не менее 512 x 512 пикселей.Хотя изображения можно обрезать в WordPress, я бы посоветовал заранее отредактировать изображение с помощью программного обеспечения для редактирования.
Если вы хотите создать новое изображение с нуля или ваш логотип требует серьезных корректировок, то лучше всего использовать профессиональную программу редактирования. Photoshop или GIMP — отличные варианты.
Использование Canva
Однако более простым решением для тех, у кого меньше опыта в дизайне, является использование Canva. Этот бесплатный веб-сайт с инструментами графического дизайна позволит вам легко редактировать изображение и делать его готовым для использования в качестве значка.Измените размер вашего логотипа или измените цвет или прозрачность, чтобы создать изображение значка, которое будет работать на вашем сайте.
Когда вы будете довольны изображением, которое собираетесь использовать в качестве своего значка, его необходимо сохранить в формате gif, png или jpeg. Теперь вы готовы загрузить свой значок на свой сайт WordPress…
Как добавить фавикон на свой сайт / блог WordPress?
Раньше добавление значка сайта лучше всего доверить веб-разработчикам и тем, кто хорошо разбирается в коде.Однако, к счастью, после выпуска WordPress 4.3 добавление значка стало чрезвычайно простым и понятным.
Откройте панель управления WordPress и в меню выберите Внешний вид> Настроить . Это откроет живой настройщик WordPress с предварительным просмотром домашней страницы вашего сайта.
Выберите Идентификатор сайта . Здесь вы увидите отображаемый заголовок и значок сайта.
В разделе Site Icon вы можете добавить, изменить или удалить свой значок.Щелкните Выберите изображение .
Ваша медиатека WordPress появится на вашем экране. Выберите вкладку Загрузить файлы , а затем либо перетащите изображение своего значка в поле, либо выберите его на своем компьютере.
Вернувшись в библиотеку мультимедиа, убедитесь, что ваше изображение отмечено галочкой, а затем щелкните Выберите в правом нижнем углу. WordPress теперь спросит вас, хотите ли вы обрезать изображение. Если вы уже редактировали изображение в программе редактирования, выберите Пропустить обрезку .В противном случае обрежьте.
В настройщике под значком сайта , вы увидите загруженное изображение. Выберите Сохранить и опубликовать в верхней части настройщика, а затем обновите страницу. Теперь вы должны иметь возможность просматривать свой значок на вкладке браузера веб-страницы.
Если в какой-то момент вы захотите изменить свой значок, в разделе Значок сайта просто выберите Изменить изображение . Однако, как упоминалось ранее, это не рекомендуется, если вы не проводите ребрендинг.Если вы постоянно меняете свой значок, ваша аудитория не сможет определить, какое изображение представляет ваш веб-сайт, когда они просматривают вкладки браузера или приложения.
Другие способы добавления значка на ваш сайт WordPress
Конечно, есть несколько других способов добавить значок на ваш сайт WordPress. Давайте посмотрим на несколько вариантов…
Фавикон от RealFaviconGenerator
Многие люди предпочитают использовать плагины для добавления функциональности на свой сайт, вместо того, чтобы полагаться на тему.Favicon от RealFaviconGenerator — это плагин WordPress, который является отличным вариантом, если вы хотите добавить значок на свой сайт.
Установите плагин на свой веб-сайт WordPress, а затем просто укажите и щелкните, чтобы загрузить изображение и добавить его в качестве значка. Затем RealFaviconGenerator сгенерирует все значки, необходимые для различных браузеров и устройств. Это простой плагин, который можно бесплатно загрузить и использовать.
Загрузка с помощью параметров вашей темы Страница
Многие из новых тем имеют множество функций и возможностей, что позволяет пользователям быстро и легко создавать новые веб-сайты WordPress.Некоторые из этих тем теперь имеют возможность добавления значка для вас. Проверьте страницу параметров вашей темы, чтобы узнать, предлагает ли она эту функцию. Например, тема Total WordPress включает параметры для вашего Favicon (и различных размеров устройств) на встроенной панели темы.
Использование кода
Если вы предпочитаете кодировать свой веб-сайт, вы можете загрузить изображение своего значка в корневой каталог своего сайта. Затем необходимо добавить код в файл header.php.Дополнительные сведения об этом процессе, а также сведения о размере изображения и типе файла, в котором его необходимо сохранить, см. В документации поддержки WordPress.
Последние мысли
Как видите, загрузить значок на сайт WordPress — очень простой процесс. Преимущества наличия значка впечатляют — это маркетинговая тактика, которая позволит вашим пользователям идентифицировать ваш сайт, просто заметив ваше изображение. Поэтому сделайте своим приоритетом найти свободные полчаса в свой день и настроить свой сайт с помощью значка.
У вас уже есть значок вашего favicon? Пожалуйста, поделитесь своими впечатлениями в комментариях ниже…
.Настройка
— изменение значка в теме wordpress
Переполнение стека
- Около
Товары
- Для команд
Переполнение стека
Общественные вопросы и ответыПереполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегамиВакансии
Программирование и связанные с ним технические возможности карьерного ростаТалант
Нанимайте технических специалистов и создавайте свой бренд работодателяРеклама
Обратитесь к разработчикам и технологам со всего мира- О компании
.
Добавление значка на статическую HTML-страницу
Переполнение стека
- Около
Товары
- Для команд
Переполнение стека
Общественные вопросы и ответыПереполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегамиВакансии
Программирование и связанные с ним технические возможности карьерного ростаТалант
Нанимайте технических специалистов и создавайте свой бренд работодателяРеклама
Обратитесь к разработчикам и технологам со всего мира
.