Как сделать фавикон для сайта на wordpress
Добавил пользователь Morpheus Обновлено: 05.10.2024
Допустим, что у нас уже есть готовый фавикон (favicon ). Это может быть картинка с любым названием в форматах GIF, JPEG, PNG или BMP. Однако напомню, что лучше всего, если это будет файл изображения в формате .ICO с размером 16×16 пикселей favicon.ico. Переименуйте, если у Вас не так.
Добавить Favicon на сайт очень легко. Надо просто скопировать его в корневую директорию сайта по FTP. На Вордпресс это папка public_html (там, куда устанавливали robots.txt).
В принципе, можно больше ничего не делать. Современные браузеры сами найдут пиктограмму, если она расположена в корневой папке блога. Но мы ведь хотим, чтобы наша иконка отображалась и в поисковой выдаче. Поэтому, будет лучше, если указать специальному роботу Яндекса путь к файлу favicon.ico. Для этого в html-коде страниц блога между тегами надо прописать такой код:
В данном примере файл находится в корне сайта, а его адрес прописан в виде относительной ссылки. Если Вы загрузили картинку в другую папку, то укажите полный путь к ней в атрибуте href. Если картинка не в формате .ico, то укажите это в атрибуте type, заменив x-icon на нужный формат.
Многие советуют вставлять обе строки, но я считаю это лишним и советую прописывать только верхнюю строчку. Поясню, для Internet Explorer пишем значение “shortcut icon“, остальные браузеры понимают “icon“, которое уже входит в это значение.
как прописать код favicon для WordPress:
- Идем в админку “Внешний вид” – “Редактор“.
- Открываем файл header.php.
- Вставляем код до закрывающего тега .
- Жмем “Обновить файл“.
как прописать код favicon для WordPress:
Как поменять иконку сайта
Если на сайте уже установлен favicon, но Вы хотите заменить его другим, то просто открываем по FTP корневую папку блога и меняем существующий файл на новый с таким же названием и форматом.
Если картинка расположена в другом месте, то делаем следующее:
- Открываем в браузере код страницы сайта (Ctrl+U).
- Ищем строку, где прописан адрес фавикона.
- Заменяем файл по указанному адресу.
Почему не отображается favicon
Если favicon не отображается в браузере после установки или замены, надо:
Favicon для сайта WordPress можно установить разными способами. Я уже рассказывал, как установить иконку на сайт WP при помощи плагинов и установить специальные коды в шаблон сайта. В этой статье я опишу еще один способ установки favicon для сайта WordPress. Установим специальный код в файл functions.php шаблона.
Вступление
Favicon для сайта WordPress (favorites icon) или иконка сайта, придает сайту индивидуальность и, через узнаваемость закладок, может влиять на его посещаемость. Однако, неудачно установленный favicon может увеличивать время загрузки сайта. В этой статье рассмотрим установку иконки сайта через файл functions.php .
favicon для сайта WordPress: этапы установки
Одним из вариантов установки иконки является размещение иконки в корневом каталоге, с добавлением кода в файл functions.php . Для этого способа установки favicon на сайт нужно сделать три шага.
- Сделать картинку favicon.ico на любом генераторе favicon;
- Загрузить картинку favicon.ico в корневой каталог сайта;
- Поместить код в файле functions.php.
Остановимся на каждом шаге подробнее.
Сделать картинку favicon.ico на любом генераторе favicon
Если вы хотите сами нарисовать свою иконку, можно воспользоваться расширенным online сервисом для изготовления иконок favicon.cc . На нем можно не только сделать иконку из заранее подготовленной фотографии, но и попробовать себя в точечном рисовании.
Будем считать, что свой favicon вы сделали. Будем размещать его на сайте.
Мало? Держите список сервисов для создания иконок:
Загрузить картинку favicon.ico в корневой каталог сайта
Проверьте, чтобы в этой папке не было старых иконок. Если они есть, удалите их. Жалко удалять, переименуйте. Также проверьте папку с рабочим шаблоном. Из нее также удалите файл ico если есть.
Разместить код в файле functions.php
Остается поместить код в шаблоне сайта. Для этого авторизуемся в административной панели. В консоли открываем: Внешний вид →Редактор.
В редакторе справа из списка файлов шаблона доступных для редактирования, ищем файл [functions.php]. Открываем его для редактирования. Не забывайте, перед редактированием сделать резервную копию сайта. Также, без опыта, редактируйте файлы на из консоли, а в любом текстовом редакторе, например, Notepad++.
В любое место раздела THEME SETUP вставляем следующий код
Не забываем сохраняться.
После перегрузки страницы сайта иконка появляется рядом с вашим сайтом. Если вы удалили все “чужие” иконки из каталога сайта, включая каталоги тем, а ваша иконка все равно не появляется, очистите кэш вашего браузера.
На этом все! Тему Favicon для сайта WordPress закрываю. На сайте получились три статьи, где я рассказывал о трех вариантах установки уникальной иконки на свой сайт WP. Читать другие статьи:
Дополнения
Начиная с версии WordPress 4.3 в ядре сайта появилась функциональность favicon. Теперь не нужно работать с кодом сайта или использовать сторонние плагины для добавления иконки сайта. Во всех темах WordPress установка (замена) фавикона (значок сайта) есть по умолчанию.
Сегодня я бы хотел рассказать вам как добавить фавикон (favicon) на свой сайт WordPress.
Фавиконы чаще всего известны как маленькие значки, которые отображаются рядом с названиями веб-сайтов на вкладках браузера.
Однако, хотя они и возникли именно там, ваш значок WordPress также используется в других местах, таких как закладки браузера, кнопки главного экрана iOS и многое другое.
Таким образом, это важная часть вашего бренда. При правильном использовании ваш favicon или значок сайта могут помочь пользователям легко идентифицировать вашу компанию.
Это может помочь повысить узнаваемость бренда и даже улучшить пользовательский интерфейс (UX) сайта.
В этой статье мы обсудим преимущества использования favicon на сайте WordPress. Затем я объясню, как его создать, и рассмотрим три простых варианта добавления его на свой сайт.
Наконец, я завершу эту статью некоторыми советами и лучшими практиками WordPress. Давайте начнем!
Преимущества использования фавикона WordPress
Если у вас когда-либо открывалось слишком много вкладок одновременно, Вы, вероятно, оцените полезность значка.
Фавикон позволяет пользователям быстро идентифицировать ваш сайт, когда в их браузере открыто несколько вкладок:
В зависимости от количества открытых вкладок заголовок вашего сайта может быть не всегда виден. Следовательно, добавление значка может помочь улучшить UX для ваших посетителей.
Помимо повышения узнаваемости бренда, использование значка WordPress также может сделать ваш сайт более профессиональным и авторитетным. В свою очередь, это может помочь повысить доверие клиентов.
Кроме того, если кто-то сохранит ваш веб-сайт на главном экране своего мобильного устройства, ваш favicon будет отображаться в виде значка.
Использование логотипа вашего бренда или подобных изображений может помочь сделать ваш сайт более узнаваемым и в целом помочь в создании единой эстетики.
Знакомьтесь, это favicon, он же маленький значок рядом с названием сайта на вкладке браузера. Это важно для брендинга, и его легко создать с помощью этого руководства!
Как создать фавикон WordPress
Если у вас уже есть значок, который вы готовы использовать (большинство компаний используют свой логотип или его вариант), не стесняйтесь переходить к следующему разделу.
В противном случае давайте посмотрим, как создать свою картинку favicon.
Раньше вам приходилось использовать определенный файл ICO для вашего значка. Однако в настоящее время все современные браузеры поддерживают использование файлов ICO, PNG и GIF для вашего значка.
JPEG также широко поддерживается, но не во всех версиях Internet Explorer, что делает его менее идеальным для использования favicon.
Если вы знакомы с Photoshop, вы можете использовать его для создания значка вручную.
Однако зачастую проще использовать базовый облачный инструмент для создания набора значков favicon из существующего изображения.
RealFaviconGenerator (облачная версия плагина, которую мы обсудим позже) — отличный вариант, потому что:
- Он также создает значки приложений.
- Он предоставляет значки favicon в форматах PNG и ICO.
- Вы можете настроить свой значок после загрузки изображения.
- Все, что вам нужно сделать, это вставить код, который вам дает плагин.
Другие полезные генераторы значков:
- Favicon.cc, который позволяет вам создать favicon с нуля или загрузить существующее изображение.
- Favicon Generator, который работает аналогично RealFaviconGenerator.
На следующем экране вы можете настроить конкретную информацию о вашем наборе значков (при желании).
Не забудьте оставить эту страницу открытой, если вы планируете вручную добавить значок на свой сайт.
Советы по созданию фавикона WordPress
Есть несколько советов по дизайну и форматированию, которые стоит упомянуть и изучить перед созданием своего значка. Самое главное, рекомендуемый размер значков — 512×512 пикселей.
Хотя ваш значок WordPress будет идеальным квадратом, вы также можете использовать прямоугольное изображение и обрезать его до или после загрузки в WordPress.
WordPress поставляется со встроенной функцией обрезки изображений сайта, если вы добавляете их через настройщик (который мы вскоре рассмотрим).
Также важно отметить, что ваш favicon будет отображаться в виде квадрата 16×16 пикселей. Следовательно, вы хотите выбрать изображение, которое будет хорошо выглядеть после того, как оно уменьшится до этих размеров.
Хотя он будет отображаться с таким размером, он все равно должен иметь высоту и ширину не менее 512 пикселей.
Наконец, неплохо было бы ознакомиться с некоторыми рекомендациями Google по созданию и использованию favicon. Это поможет обеспечить оптимальное отображение вашего значка в поисковых системах и на вкладках браузера.
Как добавить фавикон WordPress на свой сайт (3 простых варианта)
Как только у вас есть favicon, вы готовы добавить его на свой сайт WordPress. Давайте рассмотрим три метода, которые вы можете использовать для этого.
1. Использование настройщика WordPress для загрузки вашего фавикона
Начиная с WordPress 4.3, все сайты WordPress включают функцию добавления favicon на сайт, которая упрощает загрузку и обрезку изображения для использования в качестве значка.
Для большинства пользователей это самый простой и быстрый способ добавления значка фавикона в WordPress.
Откроется обычный интерфейс библиотеки мультимедиа WordPress. Вы можете выбрать существующее изображение в медиатеке или загрузить новое.
Если вы использовали RealFaviconGenerator для создания своего значка, убедитесь, что загруженный вами пакет распакован.
Если ваше изображение еще не является идеальным квадратом (например, 512×512 пикселей), WordPress даст вам возможность обрезать его на следующем экране.
Используйте поле, чтобы выделить часть изображения, которую вы хотите использовать для своего значка.
Вы можете предварительно увидеть, как ваше обрезанное изображение будет выглядеть в правой части интерфейса.
Если вы когда-нибудь захотите изменить свой значок в будущем, вы можете вернуться к этому интерфейсу.
2. Установка плагина для добавления вашего фавикона WordPress
Этот плагин так же прост в использовании, как и собственный настройщик WordPress.
Однако он предлагает дополнительные параметры совместимости для различных устройств и значков приложений. Чтобы использовать его, установите и активируйте бесплатный плагин через панель управления WordPress:
Все, что вам нужно сделать, это выбрать или загрузить изображение размером не менее 70×70 пикселей (в идеале 260×260 пикселей):
Пока инструмент работает, Real Favicon Generator отправит вас обратно на панель управления WordPress:
После этого ваш значок будет настроен и готов к работе. Вы можете просмотреть предварительный просмотр того, как он будет выглядеть на разных устройствах, в интерфейсе плагина.
3. Добавление значка вручную через FTP
Если вы предпочитаете делать что-то вручную, можно добавить значок на свой сайт WordPress через протокол передачи файлов (FTP) или диспетчер файлов, если ваш хост использует cPanel.
Если вы воспользуетесь этим методом, вам также потребуется создать собственное изображение значка. Вы можете сделать его, выполнив действия, описанные ранее в этом посте.
Для этой демонстрации я буду использовать пакет, который я создал и загрузил из RealFaviconGenerator, инструкции применимы, даже если вы использовали другой инструмент для создания своего значка.
Чтобы вручную добавить значок WordPress на свой сайт, вам необходимо:
- Получите доступ к файлам вашего сайта либо через FTP-клиент, либо через файловый менеджер в cPanel вашего хостинга.
- Найдите корневой каталог вашего сайта и загрузите содержимое вашего пакета favicon (favicons.zip).
Файлы должны находиться в той же папке, что и ваши папки wp-admin и wp-content. Затем возьмите код, который RealFaviconGenerator предоставил вам ранее, и либо:
Обязательно сохраните изменения. Теперь все готово!
Дополнительные советы по использованию favicon WordPress
Если вы хотите, чтобы у каждого сайта в вашей многосайтовой сети был уникальный значок, самый простой способ добиться этого — использовать плагин для значков, подобный показанному выше.
Хотя можно редактировать файлы своей темы, чтобы включить уникальные значки для каждого сетевого сайта, этот процесс значительно сложнее, чем использование плагина.
Вы также можете рассмотреть возможность использования сети доставки контента (CDN) для обслуживания ваших изображений значков.
Все три метода, которые мы обсуждали в этом посте, сохраняют ваши изображения значков на вашем сервере.
Однако вы можете еще больше оптимизировать свой сайт, используя CDN для обслуживания этих изображений.
Когда вы устанавливаете Cloudflare или такую службу, как KeyCDN, браузеры посетителей загружают ваш значок с вашего CDN, а не с сервера вашего сайта.
Вы знаете эту маленькую иконку рядом с названием вашего сайта на вкладке браузера? Это фавикон, и это руководство поможет вам создать свой собственный.
Резюме
Фавикон WordPress может помочь повысить узнаваемость вашего бренда и улучшить UX для посетителей вашего сайта. К счастью, у вас есть несколько вариантов на выбор, что упрощает добавление favicon.
Три основных метода, которые вы можете использовать для добавления значка WordPress на свой сайт:
Итак, начнем с того, что же такое есть этот самый Favicon. Собственно, определение термина можно найти в Википедии. Из определения понятно, что favicon — ни что иное, как иконка сайта, показывающаяся (если она, конечно, имеется на сайте) во вкладке браузера слева от названия сайта. Если такая иконка не установлена, тогда на вкладке вы увидите только название сайта.
Согласитесь, наличие такой иконки делает сайт более узнаваемым. Особенно это касается брендовых проектов, которые могут знать и регулярно посещать многие пользователи. Наличие favicon на сайте имеет еще один, порой значительный, плюс — эта иконка показывается в результатах отдельных поисковых сервисов. Например, Яндекс Поиск показывает favicon.
Выгода здесь очень простая: пользователь что-то ищет, набирает поисковый запрос, получает результаты поиска, среди которых, допустим, будет и ваш сайт, но, скажем на пятом месте. При этом пользователь знает ваш сайт, посещает его. Как вы думаете, какова вероятность того, что пользователь, увидев в результатах поиска знакомую иконку, выберет ваш сайт? Думаю, вероятность достаточно высока. Именно поэтому иметь favicon на сайте, особенно брендовом проекте, крайне желательно.
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
КАК СДЕЛАТЬ FAVICON
Итак, если на вашем сайте WordPress все еще нет иконки, тогда самое время добавить ее. Однако перед добавлением, ее необходимо сделать. Для начала мы рассмотрим универсальные способы создания favicon, ну а чуть ниже вы узнаете, как добавить favicon на сайт WordPress (в WordPress сделать это вообще крайне просто).
Что касается прочих форматов, то лучше всего в этом плане работает 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 следующей строкой:
Читайте также: