Правка кода вывода иконуи (фавикон) сайта

TreatComp · 1 лютого 2022

Здравствуйте. В OpenCart написано, что картинка должна быть для загрузки размером 16*16, но гугл и яндекс очень не рекомендую такую картинку.

Где можно поменять вывод картинки фавикон размером 32x32? Размер менять в стилях админки?

И дописать type="image/png" (это обязательно в моем случае с моим форматом картинки), пробовал в файле header.tpl писать так:

<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>  type="image/png" " />

Но изменений при просмотре html кода страницы нету, и ошибок отображения тоже нет.

Чистил кэш, модификаторы в админке - не помогло.

3DO · 1 лютого 2022

18 минут назад, TreatComp сказал:
Здравствуйте. В OpenCart написано, что картинка должна быть для загрузки размером 16*16, но гугл и яндекс очень не рекомендую такую картинку.

Где можно поменять вывод картинки фавикон размером 32x32? Размер менять в стилях админки?

И дописать type="image/png" (это обязательно в моем случае с моим форматом картинки), пробовал в файле header.tpl писать так:
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>  type="image/png" " />
Но изменений при просмотре html кода страницы нету, и ошибок отображения тоже нет.

Чистил кэш, модификаторы в админке - не помогло.

Удалите в админке иконку, залейте новую (favicon.png) в корень сайта, впишите в шаблон, то что ниже, достаточно еба..ть мозг себе и другим, спать нужно по ночам.

Змінено 1 лютого 2022 користувачем 3DO

TreatComp · 1 лютого 2022

2 минуты назад, 3DO сказал:

спать нужно по ночам.

Днем работаю, ночью пытаюсь "строить" магазин.

3DO · 1 лютого 2022

32 минуты назад, TreatComp сказал:

Здравствуйте. В OpenCart написано, что картинка должна быть для загрузки размером 16*16, но гугл и яндекс очень не рекомендую такую картинку.

Где вы эту ахинею вычитываете ?

Спойлер

TreatComp · 1 лютого 2022

1 минуту назад, 3DO сказал:

Где вы эту ахинею вычитываете ?

Я это видел. Но по факту оказалось, в яндексе полный бардак...

Смотрите переписку с тех поддержкой яндекса, но перед тем как показать, мне несколько раз приходило от яндекса, что мой favicon не виден яндексу.

И так поехали:

Переписка:

Ну как?) Полный бардак. На оф. сайте написано одно, робот индексирует по своему, а тех. поддержка несет бред и пытается оправдываться.

3DO · 1 лютого 2022

10 минут назад, TreatComp сказал:

Я это видел. Но по факту оказалось, в яндексе полный бардак...

Сейчас

и

есть разница ?

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

Спойлер

TreatComp · 1 лютого 2022

1 час назад, 3DO сказал:

впишите в шаблон

Я правильно понимаю? По этому пути: /catalog/view/theme/unishop/template/common/header.tpl ?

13 минут назад, 3DO сказал:

прячьте ваши художества под спойлер

Это сложное "программирование" :-D но я постараюсь :wink: .

3DO · 2 лютого 2022

41 минуту назад, TreatComp сказал:
пробовал в файле header.tpl писать так:
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>  type="image/png" " />
Я правильно понимаю? По этому пути: /catalog/view/theme/unishop/template/common/header.tpl ?

Не понятно, что и куда вы тогда до этого вставляли, если подобный вопрос задаете ?

SiteMix · 2 лютого 2022

8 часов назад, TreatComp сказал:

В OpenCart написано, что картинка должна быть для загрузки размером 16*16, но гугл и яндекс очень не рекомендую такую картинку.

Где можно поменять вывод картинки фавикон размером 32x32? Размер менять в стилях админки?

На самом деле не надо ничего править в коде. Достаточно установить картинку 120х120 штатным способом в Opencart и она загрузится. И Яндекс успокоится.

Tom · 2 лютого 2022

Смешались в кучу кони, люди ...

С вашим рвением спать скоро не будет не только тех поддержка яндекса, пытаясь понять, что вы от них хотите в своих умозаблуждениях.

Любым редактором изображений, создаёте картинку размером 16 на 16 (тот же пейнт например).

С помощью например того же тотал командер, переименовываете её в favicon.ico

И этим же тотал командером заливаете в папку магазина, туда где у вас папки admin,catalog итд,

И всё, не ругается больше яндекс.

TreatComp · 2 лютого 2022

14 часов назад, 3DO сказал:

Не понятно, что и куда вы тогда до этого вставляли, если подобный вопрос задаете ?

Я по этому пути /catalog/view/theme/unishop/template/common/header.tpl и редактировал ранее, но решил пере уточнить, действительно ли правильный путь.

8 часов назад, SiteMix сказал:

Достаточно установить картинку 120х120 штатным способом в Opencart и она загрузится. И Яндекс успокоится.

Нет. 120*120 это не вариант... Если внимательно почитать требования гугла и яндекса касательно разрешения и раширения файла фавикон, то можно заметить что между яндексом и гуглом есть расхождения... и если выбирать какое-то сходство в размере, то самый оптимальный вариант это 32*32.

6 часов назад, Tom сказал:

Смешались в кучу кони, люди ...

С вашим рвением спать скоро не будет не только тех поддержка яндекса, пытаясь понять, что вы от них хотите в своих умозаблуждениях.

Любым редактором изображений, создаёте картинку размером 16 на 16 (тот же пейнт например).

С помощью например того же тотал командер, переименовываете её в favicon.ico

И этим же тотал командером заливаете в папку магазина, туда где у вас папки admin,catalog итд,

И всё, не ругается больше яндекс.

Уважаемый старейшина форума, супер удивлен, что вы такое написали... Или вы НЕ внимательно читали всю эту тему и переписку мою с яндексом или вы плаваете знаниями в данному вопросе... Я думаю, скорее всего вы просто решили "на быструю руку" высказать свое мнение почитав пару строк темы.

P.S. Я уверен, что у вас знаний в программировании, оптимизации и т.п. гораздо больше чем у меня, Но когда я прочитал ваш коммент был мягко говоря удивлен.

И еще давайте друг друга не унижать, нужно оставаться людьми, а не панты кидать, пальцы "веером" крутить. Если я вас как-то нервирую, то будьте добры проходите мимо моих тем, комментариев. Мне меньше ответку вам писать и вы не будите мозоли на пальцах набивать.

Друзья, давайте жить дружно! :wink:

Tom · 2 лютого 2022

Можно в принципе вставать в позу и дальше.

Ну или попытаться попробовать, что пишут.

Буду плавать далее подальше от ваших нескончаемых тем.

TreatComp · 2 лютого 2022

2 минуты назад, Tom сказал:

Буду плавать далее подальше от ваших нескончаемых тем.

Сорян, если задел ваши "чувства". :geek:

TreatComp · 13 лютого 2022

И так разобрался и даже больше чем планировал... Для решения проблемы - перерыл кучу инфы!

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

Сейчас напишу большой полный, комментарий, где распишу все в подробностях, я думаю информация начинающим, как мне в этой теме очень пригодится!

И так поехали:

Вот мой готовый код для файла /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, на поиски нужной, "рабочей" информации ушло относительно много времени!

Дело в том, что многие, как и в принципе делал неправильные, но популярные запросы в поиске :-D

Вот примеры НЕ правильных запросов: "иконка 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 в каталоге сайта было бы полезным.

Открываем к примеру "Блокнот" закидываем содержимое из спойлера:

Спойлер

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<TileColor>#8bc53f</TileColor>
<TileImage src="/mstile-150x150.png" />
</tile>
</msapplication>
</browserconfig>

И сохраняем в корень сайта в формате и с названием таким: browserconfig.xml

Название картинок mstile-70x70 и тому подобные, строго оставляем такие, так как в том числе по названию картинок идет проверка их наличия!

Формат картинок только PNG!

Картинки (плитки) загружаем только в корень сайта.

Далее этот файл browserconfig.xml нужно "подключить" в шапке вашего сайта. Я приведу один из трех вариантов которые можно использовать (этот вариант я сам применял и он самый правильный):

Снова в файле файла /catalog/view/theme/unishop/template/common/header.tpl нужно добавить одну строчку кода:

После всех (желательно) <meta ..... /> добавляем следующий:

Спойлер

Как раз тут мы даем "видеть кому нужно" файл browserconfig.xml.

Все, сохраняем и ГОТОВО!

Если информация была вам полезна плюсание в репу на форуме :wink:

Я думаю, для индексации мой коммент :geek: за летит хорошо по вкусу поисковикам. :-D

Все удачи и крепкого здоровья!

Вхід

Правка кода вывода иконуи (фавикон) сайта

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information