Вкладка избранное

[igorek-art 33]

Добрый день и всех с Новым годом!)

Столкнулся с непонятной мне проблемой.. Во вкладке избранное в браузерах сафари на мобиле и на компе, почему то у сайта https://bluepink.life не загружается иконка! Проверил со всеми своими сайтами, прописано везде одинаково, картинки доступны по данному адресу, но что-то тут не так.. Не могу понять в чем проблема.. Вот код в главной

    <link rel="apple-touch-icon" href="{THEME}/images/touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="{THEME}/images/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="{THEME}/images/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="{THEME}/images/touch-icon-ipad-retina.png"> 

Помогите понять в чем проблема?! Заранее благодарю

[celsoft 6 105]

Почитайте статью https://habr.com/ru/companies/htmlacademy/articles/578224/ чтобы задать иконки. Формат играет важную и ключевую роль, плюс размеры также важны.

У меня кстати иконка загрузилась на вашем сайте в Safari

[igorek-art 33]

2 часа назад, celsoft сказал:

Почитайте статью https://habr.com/ru/companies/htmlacademy/articles/578224/ чтобы задать иконки. Формат играет важную и ключевую роль, плюс размеры также важны.

У меня кстати иконка загрузилась на вашем сайте в Safari

Мы об этой и той же иконке говорим? Вот Вы сказали у вас отобразилась, та что под синей стрелочкой?

Изменено В среду в 14:47 пользователем igorek-art

[celsoft 6 105]

32 минуты назад, igorek-art сказал:

Мы об этой и той же иконке говорим?

Нет, туда я не добавлял. Я говорил о табе, там отобразилась.

[igorek-art 33]

6 минут назад, celsoft сказал:

Нет, туда я не добавлял. Я говорил о табе, там отобразилась.

Ну с фавиконом то проблем нет, тот что везде мелкий используется.. Проблема именно в указанном значке! Сделал все как полагается. Ни на телефоне, ни на маке не работает, хотя все другие сайты мои нормально там иконка отображается. Я тут подумал может я где то чего то не то сделал? От чего еще зависят эти иконки? В страничке main.tpl код одинаковый на всех сайтах... Что может еще влиять на это? CHMOD, .htaccess фиг знает может еще что?.!.!. На всех других сайтах ведь работает, вставляю везде одинаково их.

[celsoft 6 105]

1 час назад, igorek-art сказал:

Я тут подумал может я где то чего то не то сделал? От чего еще зависят эти иконки? 

Я вам выше написал, вы проигнорировали. Вы проверили размеры картинок? Увеличили? Нет.

1 час назад, igorek-art сказал:

Что может еще влиять на это? CHMOD, .htaccess фиг знает может еще что?.!.!.

Нет. Ваши картинки отображаются при обрашении к ним, а значит это влиять не может.

5 часов назад, igorek-art сказал:

<link rel="apple-touch-icon" href="{THEME}/images/touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="{THEME}/images/touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="{THEME}/images/touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="{THEME}/images/touch-icon-ipad-retina.png">

Это код для размещения иконки на рабочем столе в IOS, а у вас некорректная favicon. И первое что бросается в глаза ее недостаточные размеры. С чего вы решили что вашу иконку в 50 пикселей браузер возьмет при показе этой вкладки? Вам не кажется что она слишком маленькая? Я думаю что скорее всего она маленькая. И помните что браузер кеширует это очень сильно, так что нужно все будет сбрасывать когда измените, все кеши браузера, чтобы увидеть изменения.

1 час назад, igorek-art сказал:

Ну с фавиконом то проблем нет, тот что везде мелкий используется.. Проблема именно в указанном значке!

Как это нет, если бы не было, то и проблемы бы не было. Там по вашему что используется? Какая картинка? Из какого кода? Уж точно не из ваших прописанных apple-touch-icon потому как они для иного, и для чего именно я написал выше. Ваша проблема связана именно с favicon, а не с чем то другим, и браузер везде использует именно favicon иконку а не apple-touch-icon иконки

[igorek-art 33]

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

Я вам выше написал, вы проигнорировали. Вы проверили размеры картинок? Увеличили? Нет.

Нет. Ваши картинки отображаются при обрашении к ним, а значит это влиять не может.

Это код для размещения иконки на рабочем столе в IOS, а у вас некорректная favicon. И первое что бросается в глаза ее недостаточные размеры. С чего вы решили что вашу иконку в 50 пикселей браузер возьмет при показе этой вкладки? Вам не кажется что она слишком маленькая? Я думаю что скорее всего она маленькая. И помните что браузер кеширует это очень сильно, так что нужно все будет сбрасывать когда измените, все кеши браузера, чтобы увидеть изменения.

Как это нет, если бы не было, то и проблемы бы не было. Там по вашему что используется? Какая картинка? Из какого кода? Уж точно не из ваших прописанных apple-touch-icon потому как они для иного, и для чего именно я написал выше. Ваша проблема связана именно с favicon, а не с чем то другим, и браузер везде использует именно favicon иконку а не apple-touch-icon иконки

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

[igorek-art 33]

19 часов назад, celsoft сказал:

Почитайте статью https://habr.com/ru/companies/htmlacademy/articles/578224/ чтобы задать иконки. Формат играет важную и ключевую роль, плюс размеры также важны.

У меня кстати иконка загрузилась на вашем сайте в Safari

Чего то лыжи все таки не едут.. Заменил фавиконку формата png на ico, изменил размер на 32-32, изменил код <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> ну соответственно заменил само изображение, вроде все четко. Но картинки в избранном так и не появляется. Все данные браузера полностью удалял..

[celsoft 6 105]

1 час назад, igorek-art сказал:

Чего то лыжи все таки не едут.. Заменил фавиконку формата png на ico, изменил размер на 32-32

Было 50 на 50, я вам написал что скорее всего это мало, вы заменили на 32, и спрашиваете а почему не сработало? 🤣 размеры 32 пикселя это из древности, уже давно браузерам нужно побольше, не меньше 64 уж точно, лучше наверное даже 120. Тут посмотреть нужно, потому как мало могут не использовать, и много тоже могут не использовать. Я просто не знаю какие точные технические спецификации у safari, это только в поддержке safari могут сказать.

[igorek-art 33]

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

Было 50 на 50, я вам написал что скорее всего это мало, вы заменили на 32, и спрашиваете а почему не сработало? 🤣 размеры 32 пикселя это из древности, уже давно браузерам нужно побольше, не меньше 64 уж точно, лучше наверное даже 120. Тут посмотреть нужно, потому как мало могут не использовать, и много тоже могут не использовать. Я просто не знаю какие точные технические спецификации у safari, это только в поддержке safari могут сказать.

В том месте, которое я указал на скриншот, там используется не favicon.ico а те другие картинки. Ну и следовательно по той статье сделал размеры.. Вопрос лишь изначальный был такой, почему например на другом сайте все отображается (свинка на иконке) размеры и названия одинаковые. Вот этого и не понимаю. Изменил размер фавиконки по тем размерам что указано. Но вот во вкладке избранное там не фавиконка используется, а те остальные картинки!!! Странно, что на всех других моих сайтах все работает и сделано везде одинаково все! Вот в чем вопрос) Отсюда и другой вопрос что могло на это влиять вообще в целом

[celsoft 6 105]

5 часов назад, igorek-art сказал:

Вопрос лишь изначальный был такой, почему например на другом сайте все отображается (свинка на иконке) размеры и названия одинаковые

Каком конкретно другом? Ссылку на ваш сайт со свинкой предоставьте. Это вы так думаете что там все одинаково, по факту я уверен что это не так. Так что предоставьте посмотрим.

5 часов назад, igorek-art сказал:

там не фавиконка используется, а те остальные картинки!!!

Кто вам это сказал? Вы так решили? Ссылку на техническую документацию safari дайте где это написано.

5 часов назад, igorek-art сказал:

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

Ваше утверждение что одинаково не соответствует действительности я в этом уверен. И если вы не видите различий, то это не значит что их нет.

[igorek-art 33]

2 часа назад, celsoft сказал:

Каком конкретно другом? Ссылку на ваш сайт со свинкой предоставьте. Это вы так думаете что там все одинаково, по факту я уверен что это не так. Так что предоставьте посмотрим.

Кто вам это сказал? Вы так решили? Ссылку на техническую документацию safari дайте где это написано.

Ваше утверждение что одинаково не соответствует действительности я в этом уверен. И если вы не видите различий, то это не значит что их нет.

cheapshot.ru (первая на скрине и показывает, что все работает)

2 часа назад, celsoft сказал:

Кто вам это сказал? Вы так решили?

Нет, просто вывод, что favicon.ico и то что отображается на вкладке избранное абсолютно разные картинки! Фавиконка во вкладках там просто иконка свинюхи, а та что во вкладке избранное, как раз из этих файлов 

<link rel="apple-touch-icon" sizes="152x152" href="{THEME}/images/touch-icon-ipad-retina.png"> 

И это видно на моем самом первом скриншоте.

2 часа назад, celsoft сказал:

И если вы не видите различий, то это не значит что их нет.

Этот код это на проблемном сайте

    <link rel="apple-touch-icon" href="{THEME}/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="57x57" href="{THEME}/images/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="{THEME}/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="{THEME}/images/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="{THEME}/images/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="{THEME}/images/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="{THEME}/images/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="{THEME}/images/apple-touch-icon-152x152.png">     
    <link rel="apple-touch-icon" sizes="180x180" href="{THEME}/images/apple-touch-icon-180x180.png">

А этот код, там где все работает

    <link rel="apple-touch-icon" sizes="76x76" href="{THEME}/images/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="{THEME}/images/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="{THEME}/images/touch-icon-ipad-retina.png">

Изменил лишь названия картинок и количество размеров!

2 часа назад, celsoft сказал:

Вы так решили?

Фавиконка на том сайт и иконки во вкладке избранное абсолютно разные картинки

Изменено В четверг в 17:21 пользователем igorek-art

[celsoft 6 105]

1 час назад, igorek-art сказал:

Этот код это на проблемном сайте

А этот код, там где все работает

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

Не используйте маленькие картинки, вы пытаетесь экономить на непонятных "спичках". Вес всей вашей страницы, по сравнению с этой картинкой просто монстр, поэтому непонятно что вы пытаетесь сэкономить непонятно этими маленькими размерами.

оставьте только один код

<link href="...." rel="icon" sizes="16x16 32x32 48x48 64x64">
<link href="......" rel="apple-touch-icon" sizes="180x180">

Не нужно портянки из разных картинок по сути. Фавиконку на 64!!! пикселя ставить, а для apple-touch-icon картинку на 180 пикселей одну. Мне кажется что браузер доходит до первой маленькой и на этом останавливается, считает ее маленькой и не добавляет.

1 час назад, igorek-art сказал:

Фавиконка на том сайт и иконки во вкладке избранное абсолютно разные картинки

Я не проверял разные картинки, вполне возможно если есть apple-touch-icon а favicon не подходит, то он задействует его, но первая у вас тоже маленькая. Например на dle-news.ru сразу favicon нужных размеров

[igorek-art 33]

9 минут назад, celsoft сказал:

Возможно в этом причина проблемы.

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

	<link rel="apple-touch-icon" href="{THEME}/images/apple-touch-icon.png">	
	<link rel="apple-touch-icon" sizes="76x76" href="{THEME}/images/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="{THEME}/images/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="{THEME}/images/touch-icon-ipad-retina.png">

Они были на обоих сайтах одинаковые! Потом Вы скинули ссылку где описано используйте все размеренности ла-ла-ла.. Потом мне насоветовали еще прописать полный путь картинок вместо тега {THEME}.. Я уже и полные пути прописывал, только что я просто оставил одну строчку <link rel="apple-touch-icon" sizes="180x180" href="{THEME}/images/apple-touch-icon-180x180.png"> (при этом полностью очищая браузер и все куки кеши истории и тд)

Вот эти ВСЕ размеры я вообще использовал с вашего сайта, думал наверняка же у вас все правильно!

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

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

Вот даже пока вам пишу данное сообщение я лишь оставил всего две строки кода

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">   
    <link rel="apple-touch-icon" sizes="180x180" href="{THEME}/images/apple-touch-icon-180x180.png">

И все равно ситуация без изменений. Вот я и пытаюсь понять, где и что я мог вообще в принципе наворотить до этого (ковыряя движок) что могло что-то повлиять на это? Ведь на старом сайте которому больше 3 лет как три года назад вставил код так и работает, а на этом сайте из данного топика не работает. Версии движка одинаковые (хоть это и не влияет).. Просто уже даже не знаю в какую сторону думать... На другом форуме пишут типа я дурак не добавил файл манифеста и типа все мои другие сайты просто случайность что там работает, а на этом сайте нет)

[celsoft 6 105]

1 час назад, igorek-art сказал:

И все равно ситуация без изменений. Вот я и пытаюсь понять, где и что я мог вообще в принципе наворотить до этого (ковыряя движок) что могло что-то повлиять на это?

Я взял ваши картинки, взял этот ваш код, и поместил его неизменно на стандартном шаблоне, все работает сразу корректно. Вывод: дело не в этом коде, и не в этих картинках. В чем именно ваша проблема, у меня лично предположения закончились, тут вам уже в поддержку браузера нужно, только они могут точно знать что ему не нравится. Я не знаю больше если честно что еще можно предположить.

1 час назад, igorek-art сказал:

На другом форуме пишут типа я дурак не добавил файл манифеста и типа все мои другие сайты просто случайность что там работает, а на этом сайте нет)

Манифест для PWA делается https://en.wikipedia.org/wiki/Progressive_web_app к этому не имеет никакого отношения. Манифест это один из способов, указать иконки, и то они используются браузером когда PWA запускается. Все сайты где работает иконка, работают без файла манифеста и в их коде нет манифестов.

[igorek-art 33]

23 часа назад, celsoft сказал:

Я взял ваши картинки, взял этот ваш код, и поместил его неизменно на стандартном шаблоне, все работает сразу корректно. Вывод: дело не в этом коде, и не в этих картинках. В чем именно ваша проблема, у меня лично предположения закончились, тут вам уже в поддержку браузера нужно, только они могут точно знать что ему не нравится. Я не знаю больше если честно что еще можно предположить.

Манифест для PWA делается https://en.wikipedia.org/wiki/Progressive_web_app к этому не имеет никакого отношения. Манифест это один из способов, указать иконки, и то они используются браузером когда PWA запускается. Все сайты где работает иконка, работают без файла манифеста и в их коде нет манифестов.

Понял, спасибо, буду еще тогда думать.. Я изначально собственно и задал вопрос что может еще на это влиять помимо кода и картинок, так как движок правил по разному и возможно где-то что то влияет на это.. Буду искать вообщем(