Favicon WordPress — 4 способа установить фавикон на сайт
Что такое favicon, почему плохо, если он отсутствует?
Фавикон – небольшая тематическая картинка – придаст вашему сайту индивидуальность и выделит его в браузере среди других веб-страниц. Установить фавикон для сайта на WordPress можно несколькими способами.
Фавикон (от английского словосочетания favorite icon) – это маленькая квадратная картинка, которая визуально представляет ваш сайт и отображается в ярлыках страниц в браузере, в закладках на страницу, и в адресной строке рядом с именем сайта. Правильно подобранный фавикон соответствует логотипу сайта или тематике информации, которая на нем содержится. При взгляде на фавикон пользователь должен безошибочно определять ваш сайт среди остальных, даже не видя его названия. Наш фавикон в закладке браузера выглядит так:
В качестве формата файла для фавикона в современных браузерах используются ico, png или gif. Некоторые браузеры поддерживают загрузку иконки в формате jpg, а Opera и Firefox могут отображать анимированный gif.
Картинка фавикона бывает разных габаритов, обычно применяются размеры 16×16, 32×32, 48×48, 64×64, 128×128 или 512×512 пикселей. Для сайтов, предназначенных для просмотра на мобильных устройствах, размер иконки может отличаться.
Как сделать фавикон для сайта онлайн?
Если на вашем сайте отсутствует фавиконка, картинку для фавикона можно подобрать в интернете или нарисовать самостоятельно в специальном онлайн-сервисе для генерации иконок.
Например, favicon.ru предлагает выбрать цвет, создать картинку на квадратном поле и сохранить ее на свой компьютер.
В поле предпросмотра отображается, как будет выглядеть фавикон для вашего сайта на ярлыке страницы браузера.
Поставить favicon средствами ВордПресс
Обычно фавикон можно установить, регулируя настройки сайта в админ-панели WordPress.
- В меню «Внешний вид» войдите в пункт «Настроить» и выберите «Свойства сайта».
- В предложенном списке действий можно настроить отображение иконки сайта.
Нажмите кнопку «Выбрать изображение» и загрузите файл с нужной картинкой. - Чтобы применить настройку к сайту, нажмите кнопку «Сохранить и опубликовать». Убедитесь, что на ярлыке страницы в браузере появился фавикон.
Нажмите кнопку «Выбрать изображение» и загрузите файл с нужной картинкой.Вставить фавикон используя возможности WordPress шаблона
В некоторых темах WordPress заложена дополнительная возможность по установке иконки сайта.
- Войдите в меню «Внешний вид» и выберите пункт «Настроить».
- Дальнейший путь к настройкам зависит от используемого шаблона. Как правило, фавикон устанавливается в общих настройках темы. Найдите соответствующую команду и загрузите файл с картинкой.
- Не забудьте подтвердить изменения нажатием кнопки «Сохранить и опубликовать».
Добавить в файл header.php
Если не удалось установить фавикон встроенными средствами WordPress, использование иконки для сайта можно напрямую прописать в файле заголовка header.php. Для внесения изменений в этот файл используйте редактор кода, например, встроенный редактор WordPress.
- С помощью файлового менеджера подключитесь к серверу хостинга и скопируйте в корневую директорию вашего сайта подготовленный файл с именем favicon.
- В админке WordPress зайдите в меню «Внешний вид» (1) и выберите пункт «Редактор» (2).
- В списке шаблонов откройте файл заголовка header.php (3).
- После открывающего тегавставьте строку (4), в которой проверьте формат загруженного файла с иконкой (png или другой), при необходимости замените на свой вариант.
- Нажмите кнопку «Обновить файл» (5), чтобы применить иконку к сайту.
Установка favicon используя плагин Favicon by RealFaviconGenerator
Для подключения фавикона в WordPress разработаны специальные плагины, позволяющие автоматически загрузить иконку на сайт.
В меню «Плагины» выберите пункт «Добавить новый». Найдите, установите и активируйте плагин Favicon by RealFaviconGenerator. Затем зайдите в меню «Внешний вид» (1), после установки плагина в нем появится пункт Favicon (2) для загрузки иконки.
Нажмите кнопку «Выберите из библиотеки мультимедиа» (3) и укажите расположение файла с иконкой на вашем компьютере. Нажмите кнопку «Генерировать favicon» (4).
Из админки WordPress вас перебросит на официальный сайт плагина, где вы сможете настроить способ отображения иконки (5) для нового или работающего сайта, указать алгоритм сжатия и масштабирования картинки.
Внесите изменения при необходимости и нажмите кнопку генерации фавикона (6). После этого вы снова вернетесь в админ-панель, а плагин автоматически установит выбранный фавикон.
Почему лучше установить без использования плагина?
Для сохранения фавикона в качестве иконки сайта плагин должен оставаться активным. При его деактивации фавикон отображаться не будет.
Обратите внимание, большое количество плагинов замедляет скорость загрузки сайта, поэтому такие разовые операции, как установка фавикона, лучше выполнять без использования дополнительных плагинов – т.е. поставить фавикон первыми тремя способами.
iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.
Мы предлагаем:
- Виртуальные серверы с NVMe SSD дисками от 299 руб/мес
- Безлимитный хостинг на SSD дисках от 142 руб/мес
- Выделенные серверы в наличии и под заказ
- Регистрацию доменов в более 350 зонах
Как загрузить фавикон
Заказать сайт
Искать везде
- Искать везде
- CMS
- Интернет-магазин 2.0
- Интернет-магазин 1.0
- Onicon
- Maliver
- Rekmala
- Pablex
- Кабинет и почта
- CRM
- Интеграции CMS. S3
S3Главная / Редактирование сайта / Как мне настроить сайт? / Как загрузить фавикон
Фавикон — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.
Вы можете самостоятельно установить для своего сайта подобный значок или же создать фавикон в нашем конструкторе (конструктор фавиконов доступен только для сайтов в национальной зоне РФ) и установить его.
Шаг 1
Выберите в меню «Настройки» пункт «Фавикон».
Шаг 2
В открывшемся окне нажмите на кнопку «Выбрать файл».
Шаг 3
Далее выберите необходимое изображение, которое вы хотели бы видеть в качестве иконки сайта, и нажмите «Открыть».
Шаг 4
После того как вы выберите фавикон, необходимо его загрузить. Для этого нажмите на кнопку «Закачать файл».
Обратите внимание!
- Рекомендуется использовать в качестве фавикона изображения формата SVG, поскольку только данный формат поддерживается большинством браузеров.
- Также советуем ознакомиться с рекомендациями Яндекс и Google:
- Рекомендации Яндекс.
- Рекомендации Google.
- Создать свой собственный фавикон вы можете на сайтах http://favicon.ru/ или http://www.favicon.cc/.
Шаг 5
После того как система загрузит фавикон (об этом вас оповестит сообщение «Загрузка успешно завершена»), перейдите на сайт и обратите внимание на иконку во вкладке.
Альтернативный интерфейс
В национальных зонах, отличных от РФ, интерфейс загрузки фавикона может отличаться и выглядеть следующим образом:
В данном интерфейсе алгоритм действий практически ничем не отличается от описанного в инструкции выше:
- Нажмите «Обзор»,
- Выберите на своем компьютере изображение фавикона и нажмите «Открыть»,
- Затем нажмите «Закачать файл».
Обратите внимание!
- Оптимальный размер фавикона 120х120рх. Рекомендуем загружать файлы именно этого размера.
- Если на вашем сайте не отображается фавикон, сперва загрузите файл фавикона (вида http://ваш_домен/favicon.svg), затем перейдите на сайт (http://ваш_домен) и обновите страницу с помощью комбинации клавиш CTRL+F5.
- Если описанный выше способ не приводит к отображению или замене фавикона — попробуйте почистить кэш своего браузера (CTRL+SHIFT+DELETE).
- Фавикон отображается в левом верхнем углу (во вкладке) следующих браузеров: Mozilla Firefox, Opera, Google Chrome.
- Браузер Internet Explorer показывает фавикон только после полной загрузки сайта и добавления его в Избранное.
- В поисковой выдаче Google фавикон не отображается.
- В поисковой выдаче Яндекса фавикон появляется не сразу, а только через несколько недель. Повлиять на данные сроки мы, к сожалению, не можем. Это зависит исключительно от обновления информации самими поисковыми системами.
- В случае, если после переиндексации фавикон всё равно не появляется в поисковой выдаче (рядом с сайтом), необходимо обратиться в службу технической поддержки Яндекса — https://yandex.ru/support/webmaster-troubleshooting/ или http://feedback.yandex.ru/?from=webmaster — с вопросом, почему ваша иконка не появляется в поисковой системе.
- Также рекомендуем ознакомиться с инструкцией к нашему конструктору фавиконов (доступен только для сайтов в национальной зоне РФ).
Была ли статья вам полезна?
Да
Нет
Укажите, пожалуйста, почему?
- Рекомендации не помогли
- Нет ответа на мой вопрос
- Содержание статьи не соответствует заголовку
- Другая причина
Комментарий
Генератор Favicon — Текст на Favicon
Быстро создавайте свою фавиконку из текста, выбирая текст, шрифты и цвета.
Загрузите свой значок в самых современных форматах.
Установка
Сначала используйте кнопку загрузки, чтобы загрузить файлы, перечисленные ниже. Поместите файлы в корневой каталог вашего сайта.
- android-chrome-192×192.png
- android-chrome-512×512.png
- apple-touch-icon.png
- favicon-16×16.png
- favicon-32×32.png
- favicon.ico
- site.webmanifest
Затем скопируйте следующие теги ссылок и вставьте их в head вашего HTML.
Почему favicon.io?
Хотите ли вы создать значок из текста, из
существующее изображение или из смайликов, которые мы вам прикрыли.
Начало работы с генератором фавиконок
Приведенный выше инструмент позволит вам создать фавиконку из текста. Начните с выбора одной-двух букв для генератора фавиконки. Так как генератор favicon выводит очень маленькие изображения, важно использовать несколько символов для максимальной разборчивости. Один раз интересная особенность этого генератора favicon заключается в том, что вы можете копировать и вставьте символы Юникода и смайлики в текстовое поле. Это полезно, когда смайлик не указан в смайлике. страница фавикона. Вот пример сохранения 💯
Сделать фон простым
Далее выберите форму фона.
Выбор шрифта для фавиконки
Генератор фавиконки использует Гугл шрифты в котором доступно более 800 шрифтов. Это полезно для соответствия шрифту используется на вашем собственном веб-сайте. В будущем будет специальная страница шрифта, чтобы помочь вам выбрать свой шрифт. Это будет иметь фильтры для языков, стилей и часто используемых шрифтов. Ты можешь отредактируйте размер шрифта после того, как вы выбрали свой шрифт. Попробуйте взять как можно больше места.
Пошив цветов
Последним шагом является выбор цветов.
Если у вас есть HEX
значения цветов, которые вы хотите, вы можете просто ввести их в
поле ввода. В противном случае вы можете использовать некоторые из цветов, которые мы
предлагаем использовать палитру цветов под каждым полем ввода. Один крутой
особенность в том, что вы можете использовать прозрачные фоны. Просто введите
«прозрачный» в поле цвета фона.
Вот пример фавикона, сгенерированного с прозрачным
фон .
Генератор Favicon — Emoji to Favicon
Выберите один из сотен эмодзи, чтобы создать свой фавикон. Изображения эмодзи из проекта Twemoji.
Emoji Favicons
Графика emoji взята из проекта с открытым исходным кодом
Твемодзи. Авторские права на графику принадлежат Twitter, Inc и другим компаниям, 2020 г.
участники. Графика лицензирована
CC-BY 4.0. Вы должны просмотреть лицензию перед использованием в своем проекте.
Категории
деятельность животные и природа компонент флаги еда, напиток объекты люди и тело смайлики и эмоции символы путешествия и места
| Preview | Name | Category |
|---|---|---|
| alien | smileys & emotion | |
| alien monster | smileys & emotion | |
| anger symbol | smileys и эмоции | |
| злое лицо | смайлики и эмоции | |
| злое лицо с рогами | smileys & emotion | |
| anguished face | smileys & emotion | |
| anxious face with sweat | smileys & emotion | |
| astonished face | smileys & emotion | |
| сияющее лицо с улыбающимися глазами | смайлики и эмоции | |
| бьющееся сердце | смайлики и эмоции | |
| black heart | smileys & emotion | |
| blue heart | smileys & emotion | |
| bomb | smileys & emotion | |
| broken heart | smileys & эмоции | |
| коричневое сердце | смайлики и эмоции | |
| кот со слезами радости | smileys & emotion | |
| cat with wry smile | smileys & emotion | |
| clown face | smileys & emotion | |
| cold face | smileys & emotion | |
| столкновение | смайлики и эмоции | |
| растерянное лицо | смайлики и эмоции | |
| confused face | smileys & emotion | |
| cowboy hat face | smileys & emotion | |
| crying cat | smileys & emotion | |
| crying face | smileys & emotion | |
| мчаться | смайлики и эмоции | |
| разочарованное лицо | смайлики и эмоции | |
| disguised face | smileys & emotion | |
| dizzy | smileys & emotion | |
| dizzy face | smileys & emotion | |
| downcast face with sweat | смайлики и эмоции | |
| слюни | смайлики и эмоции | |
| взрывающаяся голова | smileys & emotion | |
| expressionless face | smileys & emotion | |
| eye in speech bubble | smileys & emotion | |
| face blowing a kiss | smileys & emotion | |
| лицо смакует еду | смайлики и эмоции | |
| лицо кричит от страха | смайлики и эмоции | |
| face vomiting | smileys & emotion | |
| face with hand over mouth | smileys & emotion | |
| face with head bandage | smileys & emotion | |
| лицо с медицинской маской | смайлики и эмоции | |
| лицо с моноклем | смайлики и эмоции | |
| face with open mouth | smileys & emotion | |
| face with raised eyebrow | smileys & emotion | |
| face with rolling eyes | smileys & emotion | |
| face with пар из носа | смайлики и эмоции | |
| лицо с символами на губах | смайлики и эмоции | |
| face with tears of joy | smileys & emotion | |
| face with thermometer | smileys & emotion | |
| face with tongue | smileys & emotion | |
| face without mouth | смайлики и эмоции | |
| испуганное лицо | смайлики и эмоции | |
| покрасневшее лицо | Smileys & Emotion | |
| Нахмуренное лицо | Смайты и эмоции | |
| Нахмурившись с открытым ртом | Смайт. |