И так разобрался и даже больше чем планировал... Для решения проблемы - перерыл кучу инфы!
Так как форумчане мне много помогали по другим моим вопросом, то считаю, что я должен дать какую-то положительную отдачу форуму (как минимум для новой индексации, а как максимум полезную инфу для новых форумчан).
Сейчас напишу большой полный, комментарий, где распишу все в подробностях, я думаю информация начинающим, как мне в этой теме очень пригодится!
И так поехали:
Вот мой готовый код для файла /catalog/view/theme/unishop/template/common/header.tpl
1. Значение icon атрибута rel - учитывается большей частью браузеров.
Браузером Internet Explorer учитывается значение shortcut icon.
2. Атрибут href содержит адрес вашего сайта (или просто прямой путь к файлу фавикон расположенного в корневом каталоге) /favicon.svg
3. Атрибут type указывает на тип передаваемых данных, который зависит от формата файла:
- в нашем случае image/svg+xml — указывается для формата SVG;
- image/x-icon — указывается для формата ICO. Ранее наиболее распространенный формат для файлов-иконок сайтов.
4. Загружать фавиконы нужно только в корень сайта, так как роботы на это смотрят.
5. Имена файлов фавиконок для гугла, яндекса и apple устройств должны быть именно такие как в спойлере!
6. Для этих строк я справка указал нужные размеры фавиконок:
При создании картинок фавиконк favicon.ico ( и др. форматов, если все же вы по каким-то причинам не хотите прислушиваться рекомендациям яндекса)
Хотя бы прислушайтесь, к доп. рекомендациям яндекса ( эту инфу трудно было найти):
1. Картинка не должна быть многослойной
2. Роботы яндекса ( про других не знаю), не сильно любят картинки с цветностью в 32 бита
Важная заметка:
На сайте хабр написано, что атрибут "sizes" и "shortcut icon" указывать "излишне", но я пошел дальше... Зашел на оф. сайт гугла с мануалом и изучил там инфу... оказалось их нужно указывать!
Далее на хабре указаны не все нужны размеры картинок для apple девайсов, зашел на оф. сайт developer apple... и изучил там инфу там тоже apple пишет самые важные размеры, но я решил открыть много разных, крупных интернет магазинов и посмотреть содержимое их кода, и оказалось, что многие указывают больше размеров относящихся к apple устройствам ( в том числе старым моделям). Я взял это на заметку и внедрил все эти размеры себе на сайт.
После добавления кода, помните, что фавиконка появится в поиске в течении двух недель, пока роботы поисковиков проглотят новые изменения на вашем сайте.
Теперь не менее ВАЖНАЯ ИНФОРМАЦИЯ!
Примерно сентябре 2020 года яндекс настоятельно рекомендует использовать фавикон формата SVG практически любого размера, но желательно 120x120.
Я так и сделал, но что бы сделать фавикон с форматом SVG, на поиски нужной, "рабочей" информации ушло относительно много времени!
Дело в том, что многие, как и в принципе делал неправильные, но популярные запросы в поиске
Вот примеры НЕ правильных запросов: "иконка SVG генератор" или "генератор иконок SVG" и так далее...
А нужно так "бесплатный векторный редактор формата SVG" и вы может найти то что вам нужно... например jarjad. ru/svg-editor/ я им пользовался (модераторы это не реклама, а очень важный источник по этой теме).
Хочу отметить, что не так уж и много софта/сайтов которые могут предоставить возможность решить проблему с форматом SVG для фавикон.
Теперь нужны веб сервисы которыми я пользовался (это не реклама, если нарушаю правила - убедительная просьба модераторов подправить ссылку (текст), так что бы не было нарушений. Спасибо):
1. htmlweb. ru/service/favicon/?layer=1 Создание favicon.ico с уже готовыми, распространенными размерами.
2. www.iloveimg. com/ru/compress-image Очень полезная и важная "штука" - сжимает картинку практически любого формата с мизерной потерей в качестве (практически не заметно). Особенно пригодится при создании фавиконок с большим размером... а так же еще для одной полезной "вещи", о которой я бонусом напишу ниже (я раньше об этом вообще не догадывался).
3. realfavicongenerator. net/favicon_checker очень классная "вещь" для проверки насколько вы все правильно сделали у себя на сайте в направлении фавиконок. Проверяет как отображается ваша фавиконка и/или ярлык (плитка) на разных устройствах! Очень круто.
Теперь расскажу про "штуку" о которой я не знал и думаю многие не знали!
Речь пойдет про файл "browserconfig.xml" я думаю у многих его нет в действующих интернет-магазинах. Сейчас расскажу ка его сознать и как правильно все прописать, а так же для чего он нужен.
Файл "browserconfig.xml" (а точнее его содержимое) для чего он?
Ответ: Когда пользователи заходят на сайт с компьютеров с ОС Windows 8 и выше через браузер Internet Explorer 11 либо Microsoft Edge (заменил IE в Windows 10), они могут при желании воспользоваться функцией «Закрепить сайт на начальном экране» и создать тем самым специальную плитку сайта на начальном экране Windows для быстрого доступа. К сайту в этом случае будет послан запрос на чтение файла конфигурации браузера — того самого файла browserconfig.xml. В нем содержатся инструкции для правильного отображения плитки сайта.
Если файла browserconfig.xml на сервере сайта нет, то будет получено сообщение об ошибке «404» (File does not exist, No such file or directory или подобное). Плохо это или нет — решать каждому владельцу самостоятельно, однако стоит учитывать, что создание пользовательских плиток Windows для сайта могло бы положительно сказаться на поведенческих факторах ранжирования и расширить взаимодействие с сайтом для пользователей, а потому наличие файла browserconfig.xml в каталоге сайта было бы полезным.
Открываем к примеру "Блокнот" закидываем содержимое из спойлера:
И сохраняем в корень сайта в формате и с названием таким: browserconfig.xml
Название картинок mstile-70x70 и тому подобные, строго оставляем такие, так как в том числе по названию картинок идет проверка их наличия!
Формат картинок только PNG!
Картинки (плитки) загружаем только в корень сайта.
Далее этот файл browserconfig.xml нужно "подключить" в шапке вашего сайта. Я приведу один из трех вариантов которые можно использовать (этот вариант я сам применял и он самый правильный):
Снова в файле файла /catalog/view/theme/unishop/template/common/header.tpl нужно добавить одну строчку кода:
После всех (желательно) <meta ..... /> добавляем следующий:
Как раз тут мы даем "видеть кому нужно" файл browserconfig.xml.
Все, сохраняем и ГОТОВО!
Если информация была вам полезна плюсание в репу на форуме
Я думаю, для индексации мой коммент за летит хорошо по вкусу поисковикам.
Все удачи и крепкого здоровья!