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

После этого новый файл favicon.ico будет отображаться вместо старого .

Примечание: старый файл favicon.ico может быть закеширован браузером. В этом случае изменения отобразятся не сразу, а через некоторое время (возможно, несколько дней). Если не хочется ждать, то добавьте к названию файла в шаблоне сайта через знак вопроса что-то вроде v=2 , то есть строка должна выглядеть так:

Желательно это знать:

• HTMLbook — справочник по HTML

Используйте фавиконки правильно

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

Подключение

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

Почему именно набор, а не одну иконку? Дело в том, что браузеры и экраны развиваются и не стоят на месте. Чем современнее браузер, тем более современный формат он может поддерживать. Например, вы можете подумать, что можно подключить только одну SVG-иконку и браузер уже сам правильно отрисует её, но не все браузеры до сих пор поддерживают SVG-формат для фавиконок. На таблицу совместимости SVG-фавиконок можно посмотреть тут.

Эта статья — фрагмент из учебника по вёрстке с курса «HTML и CSS. Профессиональная разработка сайтов».

Обязательная фавиконка

Все — старые и новые — веб-серверы и браузеры поддерживают .ico-формат.

Для подключения нужно добавить в :

Обратите внимание на две детали: размер и расположение.

Размер. В интернете можно найти информацию, что нужно подключать фавиконку в формате .ico в размере 16×16. Это так и не так. Дело в том, что контейнер ico динамический и он может изменять размеры «на лету». Поэтому браузеры, которые понимают размер 16×16, сами сожмут 32×32 до необходимого. В каком случае нужно создавать favicon.ico в размере 16×16? Когда фавиконка размером 32×32 при сжатии начнёт мылиться (будет нечёткой). Это можно проверить вручную, сжав фавиконку с 32×32 до 16×16. Если размыливание картинки произошло, то без дизайнера не обойтись и придётся отрисовывать фавиконку в ручную в графическом редакторе.

Расположение. Фавиконку в формате ico обязательно нужно класть в корень проекта, как это показано в примере выше. Дело в том, что любой веб-сервер незаметно для вас всегда ищет favicon.ico в корне проекта и пытается её подключить к сайту.

Дополнительные необходимые фавиконки

Расположение. Только favicon.ico должна лежать в корне проекта. Остальные иконки могут лежать в любом месте в проекте, например:

project/ favicon.ico img/ 180.png 192.png 512.png icon.svg

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

project/ favicon.ico img/ favicons/ 180.png 192.png 512.png icon.svg

SVG

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

Подключение точно такое же, как и для favicon.ico, только нужно добавить тип, чтобы браузер понимал, с чем имеет дело:

Для устройств Apple

Apple пошли по другому сценарию развития и предложили собственные размеры фавиконок для своих устройств — iPhone и iPad. Формат для подключения favicon для Apple поддерживают все современные браузеры.

Самым востребованным размером для старых устройств фавиконок стал размер 180×180. Давайте посмотрим пример подключения:

Подключив такую иконку, мы также поддержим старые устройства, которые не умеет работать с таким большим размером фавиконки и уменьшать её до нужных размеров.

Устройства Apple работают и с большими размерами иконок, но так получилось, что устройства, которые понимают большие размеры, можно подключать более современным способом с помощью манифеста. Манифест позволит скрыть подключение всех размеров из , что сделает разметку более читаемой.

Манифест

Манифест — это JSON-файл со всеми подробностями веб-приложения для браузера. Формат был разработан Google по инициативе PWA.

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

Файл. Создадим файл в корне проекта и назовём его manifest.webmanifest. Расширение .webmanifest нужно указать, чтобы браузер понимал, с каким файлом имеет дело. Само название файла может быть любым (в нашем случае — manifest).

Так как манифест — это JSON-файл, то он должен начинаться с открывающей скобки < и заканчиваться закрывающей скобкой>.

manifest.webmanifest

Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:

manifest.webmanifest

Осталось добавить фавиконки по шаблону:

manifest.webmanifest < "icons": [ < "src": "", "type": "", "sizes": "" >] >

Если иконок несколько, то их нужно добавить через запятую:

manifest.webmanifest < "icons": [ < "src": "", "type": "", "sizes": "" >, < "src": "", "type": "", "sizes": "" >, < "src": "", "type": "", "sizes": "" >] >

Размеры. В манифесте мы укажем размер 192×192 и 512×512. 192 — так как это следующий размер после 180, а 512 — так как это очень большой размер для фавиконки, его будет достаточно. А что с промежуточными разрешениями? Всё хорошо: как и раньше, браузер сожмёт картинку к нужному размеру. Например, из 512 до 256.

manifest.webmanifest < "icons": [ < "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" >, < "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" >] >

• src — путь до иконки;
• type — тип иконки;
• sizes — размер иконки.

Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 256×256. Давайте добавим её:

manifest.webmanifest < "icons": [ < "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" >, < "src": "images/favicons/256.png", "type": "image/png", "sizes": "256x256" >, < "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" >] >

Откуда брать фавиконки и как их приготовить

Фавиконки — это ответственность верстальщика. Дизайнеры в большинстве случаев про фавиконки не знают, поэтому не предоставляют их с макетами.

Если дизайнер не предоставил фавиконки, у верстальщика есть два пути:

1. Не добавлять фавиконки в проект.
2. Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 1:1.

Векторный формат позволит растянуть фавиконку до нужных размеров (192, 256 и даже 512) без потери качества. Таким образом верстальщик сможет сгенерировать себе нужные размеры и подключить их к странице.

При генерации фавиконок с помощью сторонних сервисов всегда смотрите на получившийся результат. Чаще всего иконки получаются замыленными. Даже если брать хороший оригинал 512×512, то при уменьшении до 32×32 всё равно могут появиться артефакты.

Для генерации фавиконок используйте сервис favicon-generator: экспортируйте изображение фавиконки в формате PNG, добавьте это изображение в сервис генерации фавиконок, нажмите кнопку «Create favicon», а потом — ссылку «Download the generated favicon». Вы скачаете архив со всеми возможными вариантами фавиконок. Возьмите favicon.ico и другие необходимые версии, подключите к странице проекта.

Итог

Итоговый способ подключения фавиконки:

manifest.webmanifest

Таким способом мы будем поддерживать самые старые браузеры и самые новые.

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

Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.

Фавикон — что это такое и зачем он нужен сайту?

Фавикон, или иконка избранного (англ. «favicon»), представляет собой маленькую иконку размером 16×16 пикселей. Она появляется в адресной строке браузера, на панели закладок, в истории и закладках браузера, а также на вкладках в десктопной и мобильной версиях поисковых систем. Эта иконка является важным элементом визуального брендинга вашего сайта, который может улучшить пользовательский опыт и повысить рейтинг вашего сайта в поисковых системах. Каким образом фавикон способен это сделать? Давайте рассмотрим основные преимущества этой иконки более подробно.

Для чего фавикон нужен сайту и какая в нем польза?

• Увеличение узнаваемости сайта и бренда. Во-первых, favicon помогает обозначить бренд в глазах пользователей. Корректно разработанная иконка может сделать ваш сайт запоминающимся и узнаваемым. Кроме того, когда пользователь добавляет ваш сайт в закладки, он видит небольшую иконку, которая снова помогает ему быстро идентифицировать ваш сайт и установить связь с вашим брендом.
• Помощь в навигации. Во-вторых, иконки помогают пользователям быстро ориентироваться между вкладками браузера. Когда пользователь открывает множество вкладок в своем браузере, иконки позволяют ему быстро ориентироваться между ними и легко переключаться между различными сайтами и быстро вернуться к нужной.
• Прирост кликабельности (улучшение SEO). В-третьих, многие поисковые системы индексируют favicon вместе с вашим сайтом. Если иконка отсутствует, это может повлиять на рейтинг сайта в поисковых системах. А наличие качественного favicon, наоборот, поможет улучшить рейтинг сайта в поисковых системах.
• Доверие пользователей Также стоит отметить, что отсутствие фавикона может создавать впечатление незаконченности или неаккуратности сайта, что может оттолкнуть потенциальных пользователей. Поэтому рекомендуется использовать фавикон на сайте.

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

Читать другие материалы

Польза от резервного копирования сайта: разбираемся вместе

SIMAI: Сайт совета муниципальных образований

1) Создать иконку — картинку с расширением *.ico. В интернете можно найти различные сервисы по конвертированию обычных изображений (например с расширениями *.jpg, *.png, *.gif) в файл формата ico.

2) Переименовать данный файл в favicon.ico

3) Загрузить полученный файл в корень сайта.

Как туда перейти:

1) Заходим в Администрирование > Контент > Структура сайта > Файлы и папки

2) Находим уже загруженный файл и, чтобы его не потерять в дальнейшем, переименовываем его например в _favicon.ico или favicon2.ico.

3) Загружаем нужный файл.

а) Нажимаем «Загрузить файл»

b) В открывшемся окне нажимаем «Добавить файл». Выбираем нужный файл с компьютера.

c) Нажимаем «Сохранить»

Если все было выполнено верно, но ваша новая иконка обновится. Есил не обновилась, то можете попробовать сбросить кеш-сайта, либо кеш-браузера нажатием комбинации клавиш Ctrl + F5.