Правильный favicon

Самый модный сейчас формат фавиконки - svg. Но и про другие форматы не забываем.

Ищем любую картинку для favicon любого формата
С помощью бесплатной программы Inkscape (вариантGIMP - похуже) превращаем её в svg (или в этой программе сами рисуем svg картинку)
На сайте realfavicongenerator.net из этой svg картинки создаём пакет для всех типов браузеров. Получается архив RAR. Его распаковываем и кладём все файлы в корень сайта

В файл index шаблона сайта между <head> дописываем:
<link rel="icon" href="favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>

Проверяем ответ фавиконок https://realfavicongenerator.net/favicon_checker

Всё должно быть зелёное.

Иногда бывает что видно где-то старую фавиконку - её надо поменять на новую.

в Joomla 4 это media/system/images