Как установить фавикон в битриксе

Установка Favicon на сайт WordPress

Рассмотрим, как добавить фавикон на сайт WordPress. Это можно сделать двумя способами: установить favicon через шаблон, а также через код header – в соответствии с рекомендациями Яндекса.

Какой должна быть иконка сайта

Рекомендуемые размеры favicon в пикселях: 16*16, 32*32, 48*48.

• PNG – самый распространенный, поддерживается всеми основными браузерами.
• SVG – векторный, рекомендуется W3C и Яндексом, поддерживается всеми современными браузерами, кроме IE8 и ниже.
• ICO – поддерживается устаревшими браузерами типа IE, выходит из обращения.

Рекомендуемые формы: квадрат, круг, ромб.

Исходя из вышеизложенного, для фавиконки оптимально подбирать равностороннее изображение 32*32, формата PNG, с сохранением прозрачности.

Если хотите соблюсти все требования поисковых систем, в частности Яндекса, то подготовьте также второй вариант иконки в SVG или PNG, но размером 120 пикселей. Конвертировать изображения можно с помощью сервиса online-convert.com.

Как установить или изменить фавикон на WordPress в шаблоне сайта

Итак, у вас есть готовое изображение PNG размером 32*32 пикселя. Для удобства назовите его icon.png .

• Войдите в панель администратора.
• В боковом меню откройте «Внешний вид» – «Настроить».
• Перейдите в «Свойства сайта» – «Выберите иконку».
• Вас перенаправит в библиотеку изображений. Загрузите подготовленное изображение icon.png .

• Нажмите «Выбрать», потом «Обрезать изображение».

• Все, favicon на WordPress загружен, нажмите «Опубликовать».
• Перейдите на главную страницу сайта – вместо логотипа WordPress отображается ваш фавикон.

Как добавить в WordPress favicon SVG в

Теперь разберемся, как добавить фавикон в формате SVG, согласно рекомендациям Яндекса.

Сначала, переименуйте подготовленный файл в favicon.svg .

• Авторизуйтесь в панели управления хостинга.
• Войдите в корневую папку.
• Загрузите в неё подготовленный файл favicon.svg .

• Вернитесь в админ-панель сайта. Откройте «Внешний вид» – «Редактор тем».
• В правом меню выберите «Заголовок ( header.php )» (если шаблон не русифицированный, то ищите «Header».

• Откройте файл header, найдите блок между и .

Добавьте туда строку:

Этим кодом Вы покажете браузеру путь до иконки.

Нажмите «Обновить файл».

Как установить фавикон в WordPress через панель управления

Этот вариант актуален в случае, если в шаблоне нет возможности редактировать тему.

После того, как фавикон переименован и загружен в корневую директорию по инструкции выше:

• В той же корневой директории откройте папку wp-content .
• Войдите в папку themes .
• Выберите каталог с названием вашего активного шаблона (в нашем случае установлен GeneratePress).

• Откройте его, выберите файл header.php .

В блок между и добавьте строку:

Нажмите «Save file».

Теперь можете быть уверенными, что вам не придет такое письмо от Яндекс.Вебмастер: «добавьте на сайт файл favicon в формате SVG или размером 120 × 120 пикселей».

Контакты

Отдел продаж:
Технический отдел:
Отдел жалоб:

Часы работы

Круглосуточно Время ожидания ответа от нескольких минут до 24 часов.

DNS-хостинг с безлимитным числом доменных имен и записей. Подробнее по ссылке https://lite.host/hosting/dns 1 месяц назад Debian 12 доступна для установки на всех виртуальных серверах. 4 месяца назад Почта для домена с безлимитным числом почтовых ящиков, оплата только за место. Подробнее по ссылке https://lite.host/pochta/dlya-domena 7 месяцев назад По данным ООО «Интернет Технологии» UPTIME за 2022 год по серверам виртуального хостинга составил 99.998%, а по виртуальным серверам 99.99%. 9 месяцев назад

Сервис LITE.HOST
Россия , Санкт-Петербург

Отдел продаж:
Техническая поддержка:
Отдел жалоб:
Круглосуточно
Социальные сети
Партнерство

Зарабатывайте вместе с нами! 15% пожизненно со всех платежей за хостинг, реселлинг и виртуальные серверы.

• Виртуальный хостинг от 84.15 ₽
• Хостинг для WordPress от 84.15 ₽
• Хостинг для Битрикс от 84.15 ₽
• DNS-хостинг от 99 ₽ в год
• VDS серверы от 140.25 ₽
• Почта для домена от 126.65 ₽

Создание и добавление иконки сайта Favicon

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

В этом руководстве вы узнаете несколько способов, как добавить favicon на ваш сайт.

1. Какие требования к размеру и формату иконки

Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.

Рекомендуемые форматы изображений для иконки:

• .ico (.icns в macOS) — своего рода стандарт, используется повсеместно.
• .png — более современный вариант, тоже широко распространен и поддерживается даже во многих старых браузерах.

Можно использовать и другие форматы? например, jpeg или gif. Из-за особенностей браузеров и разных ОС мы рекомендуем выбирать ico. Самый каноничный формат, с которым точно не ошибетесь.

Рекомендуемые размеры для иконок:

• 16 на 16 px
• 32 на 32 px
• 192 на 192 px
• 512 на 512 px

2. Как и где создать иконку для сайта

Возможно у вас уже есть подготовленная иконка — тогда пропустите этот раздел и переходите к шагу 3. Если иконки у вас еще нет, вы можете самостоятельно создать её в удобном редакторе или воспользоваться одним из онлайн сервисов:

https://icons8.com — отличный сервис с большим выбором иконок и удобным поиском. Вам достаточно просто отыскать понравившуюся иконку и скачать её.

https://iconsflow.com — на этом сайте кроме большого выбора макетов вы также можете отредактировать иконку: изменить её форму, добавить фон, стиль отображения и пр.

3. Как добавить иконку на сайт

Есть несколько вариантов добавить иконку на сайт.

Вариант 1 — Загрузить иконку в формате favicon.ico в корневой каталог сайта. Все браузеры автоматически распознают этот файл и отобразят изображение в качестве иконки на вкладке. Файл нужно загрузить в корень сайта через файловый менеджер или FTP, формат файла обязательно должен быть ico.

Вариант 2 — Указать путь к иконке в блокев шапке сайта. В этом случае вы можете использовать файлы разных форматов. Вам нужно открыть редактор кода сайта, найти блоки внутри него разместить следующий код со ссылкой на картинку иконки:

Вариант 3 — Воспользоваться стандартным загрузчиком CMS. Все популярные платформы для разработки сайта: WordPress, Joomla, Opencart уже имеют встроенный функционал для загрузки иконок. Вам достаточно открыть настройки сайта и загрузить иконку стандартным способом.

В этом руководстве вы узнали несколько способов, как быстро создать и добавить иконку для вашего сайта. Правильно подобранная иконка добавит сайту более привлекательный вид и выделить его среди конкурентов.

Установка «Фавикона» Линейка решений INTEC: Universe на редакции Старт/Стандарт / С чего начать?

Фавикон — это значок веб-сайта или веб-страницы, который отображается браузером в адресной строке перед URL- адресом страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Фавикон располагается в корне сайта (Контент->Файлы и папки) и обычно имеет название favicon.ico (размер 16х16).

Чтобы заменить фавикон, необходимо удалить тот что лежит в корне и загрузить свой.

Как создать фавикон для сайта: самый подробный гайд

Favicon — это значок сайта. Иконка видна в результатах поиска и во вкладках браузера и обозначает конкретный сайт или страницу. Также фавикон — это значок мобильного приложения на рабочем столе смартфона.

Простыми словами рассказываем, как создать и загрузить фавикон на сайт, а также объясняем, зачем он нужен.

Что такое favicon и для чего он нужен

Фавикон — это возможность сделать сайт более узнаваемым: его видно во вкладках браузера, в закладках, в сниппетах поисковой выдачи, на экране смартфона. Фавикон поможет привлечь на сайт больше посетителей, которые возможно станут вашими клиентами. Этот инструмент подчеркивает уникальность и фирменный стиль бренда.

Сам по себе favicon не влияет на ранжирование сайта в поиске и оптимизацию страниц. При этом он выполняет другие, не менее важные функции:

1. С фавиконом страница сразу заметна в поисковой выдаче . Без иконки страница не бросается в глаза.
2. Возрастает узнаваемость сайта . Фавикон — важная часть бренда. Логотип из favicon запоминается лучше и сразу освежает в памяти пользователя черты конкретного бренда.
3. Пользователю легче найти нужный сайт . В выдаче, истории браузера или закладках найти нужный сайт, который отмечен знакомой иконкой, намного легче, чем без нее.
4. Фавикон избавляет от ошибок в лог-файлах . Браузер отправляет запрос на файл favicon.ico и, если такой не находится, то возникает ошибка 404.

Требования к изображению для фавикона

При создании favicon нужно учитывать несколько параметров — формат, размер и дизайн . Рассмотрим каждый критерий более подробно.

Формат

Изначально изображения для favicon существовали только в одном формате — .ico (ико). Он довольно удобный, т.к. позволяет загружать несколько иконок разного размера. Однако браузеры часто выбирали неверный размер этого формата, и фавикон отображался некорректно, например, в низком разрешении.

Позже появились и другие форматы фавикона, они лучше отображались и меньше весили — svg (свг) и .png (пнг).

.svg — векторный формат графики, который смотрится четко в любом разрешении. Именно поэтому .svg отлично подходит для фавиконок, ведь для них не используются сложные изображения с большим количеством мелких деталей. Формат .png позволяет использовать прозрачный фон. Фафикон как бы «парит». Что особенно важно с эстетической точки зрения, если в браузере используется темная тема оформления.

Есть и другие форматы, например, .jpeg и .gif . Однако анимированные изображения могут перетягивать слишком много внимания на себя и отвлекать посетителей от содержимого сайта.

.jpg — весит меньше по сравнению с png, но не поддерживает прозрачность. Это нужно это учитывать.

Рассмотрим рекомендации по формату фавикона от разных поисковых систем. Для Yandex предпочтительнее использовать .svg, но поисковая система также поддерживает иконки в форматах .jpeg, .png, .bmp, .gif (без анимации). Google поддерживает форматы .svg, .ico, .gif без анимации, jpeg, png.

Размер

Рассмотрим размеры для самого распространенного формата фавикона — .ico .

Favicon.ico можно сравнить с контейнером, в котором содержатся сразу несколько файлов разного размера. Для корректного отображения достаточно использовать три: 16х16, 32х32, 48х48 пикселей . Такой размер будет корректно отображаться на разных браузерах/операционных системах и при необходимости легко масштабируется до нужных параметров.

Кроме того, у разных платформ требования к размеру favicon также отличаются. Обычно минимальный размер составляет 16х16 пикселей. Но, например, в соответствии с рекомендациями Яндекса лучше использовать иконки размером 120х120 пикселей, для Google это правило тоже актуально. Кстати, для Google лучше не загружать файл размером менее 16 пикселей.

Для мобильных устройств нужны иконки большого размера, чтобы использовать их в качестве значков приложений. Так, для Android и Apple лучше подобрать изображения размером 180х180 пикселей.

Дизайн изображения

Кроме формата и размера, важно продумать внешний вид фавикона. Для этого придерживайтесь таких параметров:

1. Соответствие тематике сайта . Для сайта конкретной компании лучше взять ее логотип. Однако, если логотип сложный, вытянутый, имеет множество мелких элементов, лучше взять только его часть. Когда у бренда нет логотипа, подойдет тематическое изображение в цветовой гамме, соответствующей тематике сайта.
2. Привлечение внимания . Сейчас 90% сайтов имеют фавиконы, а на первой странице поисковой выдачи они вообще есть у всех. Поэтому важно подобрать картинку, которая привлекает внимание и выделяется на фоне остальных. Часто для этого используют специальные символы, например, красную стрелку.
3. Простота . Фавикон в закладках браузера, на его вкладках и в поисковой выдаче очень маленький. Поэтому не стоит выбирать картинку со множеством деталей: их просто невозможно разглядеть. Самый лучший вариант — изображение, где будет немного деталей, не больше трех цветов и понятный, однозначный смысл.
4. Оригинальность . Фавикон должен быть уникальным — таким, чтобы его не использовали другие ресурсы. Например, если в поисковой выдаче будет несколько сайтов с одинаковыми иконками виде лебедя, ни один из них не будет выделяться. Банальные картинки тоже лучше не использовать.

Чтобы фавикон корректно отображался в разных контекстах, лучше сделать два варианта. Первый — со сплошной заливкой фона. Подходит, когда есть маска для фона. Например, в сетчатых закладках, контекстном меню. Второй вариант — с прозрачным фоном. Такая иконка показывается рядом с URL-адресом: в закладках браузера, в адресной строке и т.д .

Как создать фавикон

Создать фавикон можно разными способами. Например, с помощью Photoshop . Установите специальный плагин, который позволит создать файл в формате ico.

Также есть отдельные программы для создания favicon icons .

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

Realfavicongenerator

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

Favic-o-matic

Для работы с сервисом нужен исходник размером не менее 310х310 пикселей. Изменить изображение нельзя: после обработки сервис сгенерирует код для вставки на сайт и предложит скачать пакет favicon.

Favicon.ico & App Icon Generator

Сервис не указывает размер исходного изображения. Однако при загрузке не квадратной картинки вам придет предупреждение. Изменить изображение не получится: сервис только выдает файлы и код для их вставки.

Faviconit

Для создания фавикона нужно загрузить изображение размером 310х310 пикселей и весом до 5 Мб. После обработки вы получите готовый пакет файлов. Также внутри будет HTML-код, который нужен, чтобы вставить фавикон на сайт.

Favicon.by

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

Favicon.io

Еще один полностью бесплатный сервис для создания фавикона. В отличие от предыдущего конвертера, favicon.io — англоязычный ресурс. При этом сервис имеет понятные настройки. Создать фавикон можно из картинки, текста или эмоджи.

Протестируйте несколько разных Favicon Converter Online , чтобы подобрать подходящий.

Есть еще один вариант получения фавикона — скачать его с чужого сайта. Для этого нужно перейти по одной из ссылок, нажать Enter и скопировать изображение:

• http://www.google.com/s2/favicons?domain=example.ru
• http://favicon.yandex.net/favicon/example.ru

Это теперь мой фавикон

Вместо example.ru вставьте адрес сайта, с которого хотите извлечь фавикон. Однако вытащить и использовать чужую иконку — не лучший вариант. Во-первых , фавикон может быть защищен авторским правом, и его использование повлечет за собой наказание. Во-вторых , фавикон должен быть индивидуальным: одинаковые логотипы не будут выделяться и не привлекут внимания.

Как сделать вручную оптимальный набор иконок

На первый взгляд, идея самостоятельно создавать фавиконы выглядит абсурдной, ведь можно просто пользоваться генераторами. С такой точкой зрения не согласятся многие разработчики. Чтобы угодить всем ОС, браузерам и типам устройств, приходится «штамповать» на генераторах разные версии иконок. Можно пойти более рациональным путем и самостоятельно сформировать минимальный набор фавиконов, которые соответствуют современным требованиям. Разберемся, как это сделать.

Что должно войти в набор:

1. Favicon.ico. Этот файл предназначен для устаревших браузеров. Вы можете остановиться на одном размере — 32×32 пикселей. Разместите файл на адресе https://example.com, а значок — на https://example.com/favicon.ico. Отдельные инструменты, в том числе RSS-ридеры, просто отправляют на сервер запрос /favicon.ico . Чтобы Chrome не путал ICO и SVG, используйте sizes=»any» для на файл .ico.
2. Значок SVG. Убедитесь, что на вашей HTML-странице проставлен тег в с rel=»icon» , type=»image/svg+xml» и с href , который содержит ссылку на SVG-файл. Обратите внимание: SVG может содержать медиа-запросы. Благодаря этому вы сможете переключать один фавикон между светлой и темной темами.
3. Изображение PNG для устройств Apple. Проверьте, что HTML-страница содержит тег внутри . Для устройств на iOS 8+ подходят изображения 180×180 пикселей.
4. Манифест веб-приложения для Android. Это файл JSON, данные из которого нужны браузеру, чтобы устанавливать ваш сайт в качестве системного приложения. Убедитесь, что на HTML-странице проставлен тег . Этот тег ссылается на файл манифеста.
5. Главный момент : в манифесте должно быть поле icon. Оно ссылается на иконку 192×192 пикселей и значок 512×512 пикселей. Первый фавикон отображается на главном экране. Вторая иконка выполняет функцию заставки при загрузке PWA.

Как выглядит поле:

«icons»: [

Перейдем к тому, как сделать набор иконок.

Подготовьте SVG

Изображение .svg должно быть квадратным. Откройте исходник с помощью системного средства просмотра и убедитесь, что его ширина совпадает с высотой. Чтобы отцентровать изображение и скорректировать его размер, используйте любой SVG-редактор, например, Inkscape. После этого сохраните файл в формате icon.svg. Значок должен сочетаться с системными темами. Посоветуйтесь с дизайнером, как лучше инвертировать цвета для темного режима.

Откройте файл с помощью текстового редактора. Выберите с темной заливкой/без заливки. Добавьте выражение CSS. Оно будет запускаться при выборе темной или светлой темы. После этого измените заливку на те цвета, которые вам нужны:

+ @media (prefers-color-scheme: dark)

Также с помощью выражения CSS можно добавить цвета P3.

Создайте .ico

Откройте icon.svg в редакторе растровой графики, например, в бесплатном GIMP. Подтвердите конвертацию SVG в растр. Не забудьте выровнять изображение по высоте и ширине — 32 пикселя. Экспортируйте файл в favicon.ico.

• 32 бит/с;
• 8-битный альфа-код;
• без палитры.

Если вы не пользуетесь GIMP, установите Inkscape и ImageMagick, чтобы экспортировать SVG в ICO в терминале:

inkscape ./icon.svg —export-width=32 —export-filename=»./tmp.png»

# In Windows call `magick convert ./tmp.png ./favicon.ico`

convert ./tmp.png ./favicon.ico

rm ./tmp.png

Создайте PNG изображения

Откройте SVG-исходник в редакторе растровой графики, измените его размер на 512×512 и экспортируйте файл в виде icon-512.png.

Масштабируйте картинку до 192×192 пикселей. После этого экспортируйте файл в icon-192.png. Затем измените масштаб изображения на 140×140 и выберите размер холста 180×180, после чего экспортируйте картинку в формате apple-touch-icon.png.

Если вы работаете в Inkscape, сделайте так:

inkscape ./icon.svg —export-width=512 —export-filename=»./icon-512.png»

inkscape ./icon.svg —export-width=192 —export-filename=»./icon-192.png»

Оптимизируйте SVG и PNG

Для оптимизации можно выбрать инструмент SVGO. Чтобы начать его использовать, запустите:

npx svgo —multipass icon.svg

Еще один вариант — приложение Squoosh. Как с его помощью оптимизировать файлы:

1. Откройте icon-512.png.
2. Измените сжатие на OxiPNG.
3. Уменьшите палитру до 64 цветов.
4. С помощью ползунка сравните варианты «до» и «после». Если разница заметна, увеличьте количество оттенков в палитре.
5. Нажмите «Сохранить».

Таким же образом измените icon-192.png и apple-touch-icon.png.

Как подключить фавикон к сайту

Если вы создали фавикон онлайн с помощью генератора, то у вас есть файл с иконками нужного размера и код. Их нужно загрузить на сайт, чтобы favicon отображался в поиске, закладках и в других элементах.

Сначала загрузите иконки в корневую папку вашего сайта. Для этого необходим доступ к ресурсу на хостинге. Загрузить иконки можно через менеджер файлов или через собственную панель управления, если у вашего хостинг-провайдера она есть.

У корневой папки могут быть разные названия: public_html, www, html или site. Если не найдете такую папку, обратитесь к провайдеру. Загрузить необходимо все файлы, которые вы получили при конвертировании изображения.

Следующий этап установки фавикона — настройка кода. Откройте код главной страницы: найдите файл head или header среди файловой системы сайта. Пропишите сюда код, который вам выдал конвертер. Чтобы не ошибиться, скопируйте и вставьте код.

Вот так должен выглядеть код для подключения фавикона:

Расшифруем важные части:

1. rel — тип ресурса. Для большинства браузеров указывается icon.
2. href — адрес файла.
3. type — тип передаваемых данных. Зависит от файла. Например, для .ico — image/x-icon или image/vnd.microsoft.icon, для .svg — image/svg+xml.

Проверьте, все ли вы сделали правильно: фавикон должен отображаться в браузере. В сниппете поисковой выдачи favicon появится после индексации. Обычно на это уходит около двух недель.

Чтобы поменять старый фавикон на новый, проделайте то же самое: загрузите нужные иконки в корневую папку и смените код на главной странице.

Тестировать, отображается ли фавикон на сайте, можно с помощью специальных сервисов — Favicon Validator . Один из них — Favicon Checker . Тестирование достаточно простое: вставьте в специальное поле адрес сайта, и сервис покажет, на каких ОС и платформах фавикон отображается, а на каких пользователи его не видят.

Кроме того, можно проверить, как отображается фавикон конкретно в Яндексе и Google с помощью ссылок:

• http://favicon.yandex.net/favicon/www.example.ru
• http://www.google.com/s2/favicons?domain=www.example.com

Вместо «example» . вставьте адрес своего сайта.

Если вы загрузили фавикон, а при проверке он не меняется на новый или не появляется на сайте, попробуйте сбросить кеш, перезапустить браузер, перепроверить правильность установки favicon. Иногда фавикон долго обновляется, потому что поисковик его еще не проиндексировал.

Резюме

Теперь вы знаете, как сделать и установить иконку. С favicon . ваш сайт будет более заметным и узнаваемым, а это значит, вы получите больше трафика и потенциальных клиентов с сайта.