Значок iOS для добавления на главный экран становится черным

Question

Я не очень знаком с кодом для добавления значков для iOS (и Android), когда вы выбираете "Добавить на главный экран", но я использовал следующее, основываясь на том, что я прочитал:

    <link rel="apple-touch-icon-precomposed" href="http://www.redtypewriter.com/wp-content/uploads/2014/03/57.jpg"/>  
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.redtypewriter.com/wp-content/uploads/2014/03/72.jpg"/>  
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.redtypewriter.com/wp-content/uploads/2014/03/114.jpg"/>  

Кажется, код работает, но после того, как я добавлю его на домашний экран, через некоторое время значок исчезнет, ​​и вместо значка останется черный квадрат? Что происходит? Сайт: http://www.redtypewriter.com/ если вы хотите взглянуть, и я использую собственную тему WordPress.

Спасибо!

Answer 1

Есть две основные причины получить черные иконки:

• Использование изображений JPG (iOS предпочитает PNG)
• Использование PNG с прозрачными областями. iOS заполняет прозрачные области черным.

В вашем случае это потому, что ваши изображения в формате JPG вместо PNG.

У вас с оригинальными картинками я заметил три проблемы:

• Черный значок, как вы его описали.
• Моему устройству потребовалось некоторое время, чтобы показать значок (например, при добавлении на домашний экран). В течение первых нескольких секунд я видел только значки по умолчанию. Это не так уж необычно, но я был немного удивлен.
• При создании закладок мое устройство использовало не ваши значки, а другое:

Как только я преобразовал их в PNG и изменил соответствующий HTML-код, все проблемы были исправлены сразу.

Кроме того, вы не определяете достаточно картинок. Например, ваш значок не будет отлично смотреться на Retina iPad.