Jump to content
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

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


Recommended Posts

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

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

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

 

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

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

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

1298470413_.png.08294ba4f5e2bccc91e842564e1424d5.png

favicon.JPG.d2166263132cf8a3d5a18ff093fa36df.JPG

Link to comment
Share on other sites


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) в корень сайи, впишите в шаблон, то что ниже, доситочно еба..ть мозг себе и другим, спать нужно по ночам.

 

<link rel="icon" href="https://24it.by/favicon.png" type="image/png ">

Edited by 3DO
Link to comment
Share on other sites


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

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

 

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

 

Спойлер

Screenshot_43.png.d24618f0a717d7a8c2ae87a19ddedcfd.png

 

Link to comment
Share on other sites


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

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

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

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

И ик поехали:

Переписка:

 

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

 

Link to comment
Share on other sites


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

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

 

Сейчас

<link href="https://24it.by/image/catalog/imege/favicon.png" rel="icon" />

и

<link rel="icon" href="https://24it.by/favicon.png" type="image/png ">

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

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

 

Спойлер

view_pic.jpg.0504976a9ad7339b30c9dff2008ade2c.jpg

 

Link to comment
Share on other sites


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

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

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

 

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

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

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

Link to comment
Share on other sites


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 ?

 

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

Link to comment
Share on other sites


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

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

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

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

Link to comment
Share on other sites


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

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

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

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

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

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

Link to comment
Share on other sites

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:          

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites


  • 2 weeks later...

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

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

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

И ик поехали:

Вот мой готовый код для файла /catalog/view/theme/unishop/template/common/header.tpl

Спойлер

<link rel="icon" href="/favicon.svg" type=" image/svg+xml">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />

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. Для этих строк я справка указал нужные размеры фавиконок:

Спойлер

<link rel="icon" href="/favicon.svg" type=" image/svg+xml">                          // 120*120
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />                 // 32*32 
<link rel="apple-touch-icon" href="/apple-touch-icon.png">                           // 180*180

 При создании картинок фавиконк 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 ..... /> добавляем следующий:

Спойлер

<meta name="msapplication-config" content="/browserconfig.xml" />

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

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

 

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

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

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

 

  

Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.