Как протестировать набор сенсорных иконок, значков и плиток браузера для веб-сайта?

8

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

Предположим, у вас возникли проблемы с тем, чтобы предоставить достаточное количество этих файлов значков с соответствующими объявлениями в вашем HTML-коде, но у вас нет ни одного устройства, созданного Apple, плюс устройство Windows 8 и различные версии Android на руки. чтобы проверить их все.

Есть ли простой способ проверить вашу конфигурацию и посмотреть, какие файлы (если они есть) будут на разных устройствах и в браузерах, не имея при себе всех необходимых устройств?

Изменить, чтобы быть понятным, я имею в виду значки, которые браузеры пылесосят и используют при представлении веб-страницы в функциях браузера, таких как «наиболее посещаемые», «избранное» или при создании ярлыков главного экрана, которые объявлены на веб-странице, <head>но не отображаются в любом месте на веб-странице <body>.

testing favicon icon resources user56reinstatemonica8
источник

Ответы:

3

Я всегда использовал генератор favicon на сайте realfavicongenerator.net , который позволяет вам увидеть, как выбранные изображения будут отображаться на разных устройствах. Есть довольно много вариантов, и вы можете попробовать их пример значка для тестирования. Начните с квадратного SVG для достижения наилучших результатов, так как сайт преобразует его в необходимые форматы и предоставит вам сжатую папку со всем готовым к использованию.

Это также бесплатный сервис без регистрации или другой чепухи. Просто используйте его и сделайте пожертвование, если вы найдете это полезным.

Том Броссман
источник
Я люблю этот сайт. Лучший генератор favicon, который я использовал. Он сгенерирует Zip со всеми вашими файлами изображений и сгенерирует все строки кода, необходимые для их работы.
Свободно
0

Я бы предложил попробовать эмуляцию устройства в Google Chrome. Это самый простой способ, который я видел, и он должен работать. Вот полная статья об этом, https://developer.chrome.com/devtools/docs/device-mode

Бен Хоффман
источник
Я попробовал это, но я не мог понять, как заставить его делать что-то, что затем отображало бы сенсорный значок, как браузер, например, на пустой вкладке. Вы знаете, возможно ли это?
user56reinstatemonica8
Я не думаю, что есть простой способ проверить эту иконку.
Бен Хоффман
-1

Просто протестируйте их с помощью Mozilla Firefox, большинство разработчиков веб-приложений используют этот метод для тестирования

Ашраф Зебронет
источник
Это не отвечает на вопрос вообще. «Просто проверьте с помощью ...» ОП спрашивает, как проверить. Мне бы очень хотелось, чтобы это выглядело так, чтобы мы могли использовать FF для проверки того, как такие элементы, как windows-tile-150x150.png, представляют сайт в FireFox, например.
Уилл Ланни