Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS icon for Add to Home Screen turns black

I'm not terribly familiar with the code to add icons for iOS (and Android) when you select "Add to Home Screen", but I used the following, based on what I read:

    <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"/>  

The code seems to work, but after I add it to my home screen, after some time, the icon disappears and I'm left with a black square in place of the icon? What's happening? The site is: http://www.redtypewriter.com/ if you want to take a look, and I am using a custom WordPress theme.

Thanks!

like image 454
amglori Avatar asked Apr 11 '14 13:04

amglori


People also ask

Why do my icons turn black on iPhone?

Answer: A: Did you check the settings for the color of the screen in Settings/General/Accessibility/ and see if the display for colors is set to grey? Apply color filters. Go to Settings > General > Accessibility > Display Accommodations > Color Filters, then turn on Color Filters.

How do I enable add on Home Screen iPhone?

You can add shortcuts to the Home Screen, and optionally group them into folders. In My Shortcuts in the Shortcuts app on your iOS or iPadOS device, tap on a shortcut, then tap to open Details. Tap Add to Home Screen.

How do I fix the blank app icon on my iPhone?

A hard reboot is often the easiest thing to do, which is accomplished by pressing Volume Up, then Volume Down, then pressing and holding the Power button until you see the  Apple logo show up on screen. Sometimes this alone can fix the missing icon problem, or the blank dock issue.

Why is an app dark on Home Screen?

A recent update to the Google application caused an aesthetic issue with the font and symbols turning black on the notification bar. By uninstalling, reinstalling, and updating the Google application, this should allow the white text/symbols to return to the notification bar on the home screen.


1 Answers

There are two mains reasons to get black icons:

  • Using JPG pictures (iOS prefers PNG)
  • Using PNG with transparent regions. iOS fills transparent regions with black.

In your case, this is because your pictures are in JPG format instead of PNG.

With you original pictures, I observed three issues:

  • The black icon, as you described it.
  • It took some time for my device to show the icon (eg. when adding to the home screen). During the first few seconds, I only saw default icons. This is not that unusual, but I was a bit surprised.
  • When bookmarking, my device didn't use your icons but another one: "RT" icon in bookmarks

As soon as I converted them to PNG and change the HTML code accordingly, all issues were fixed at once.

In addition, you don't define enough pictures. For example, your icon won't look great on a Retina iPad.

like image 121
philippe_b Avatar answered Oct 22 '22 22:10

philippe_b