Hello there,
Have you tried using the “Customize” option on the top of your site? (screenshot)
Under “Site Identity” there is a field for “Site Icon”. Please make sure that the icon you upload is square and at least 512px wide and tall.
Please keep me updated on the issue 😉
-
This reply was modified 9 years, 1 month ago by
Jorge Calle.
Hey Jorge,
Yes, I went through the customization tab. However the .ico file appears to be 64×64. See the last image of my imgur screenshot upload. (http://imgur.com/a/nR37Q)
From what I have read about favicons, they need to be 16×16, 32×32, 48×48. Is this not correct?
Any ideas about where I can try to upload a sample image to determine if it works?
Cheers
Indeed. Have you tried using a 512px .png image? not .ico
I believe WordPress will handle the different icon sizes.
You can take a quick look here: http://www.wpbeginner.com/wp-tutorials/how-to-add-a-favicon-to-your-wordpress-blog/ 😉
Thanks Jorge! The 512 pixel favicon worked. However, the app icon preview is all black with a little white dot in the bottom right corner (i’m assuming that’s the image). The app icon is not that important to me, but still curious why the 512px .png image wouldn’t work here as well.
Sorry for the delay. I see, can you please check your site with this tool?
You just have to write your URL and then click “Check Favicon”: realfavicongenerator.net
Hey Jorge,
These are the results I get after typing in my site name: http://imgur.com/a/cTint
Hello @butlerjw,
Ok, I read that a solution would be to use partial transparency in your PNG to avoid the issue.
Alternatively, you can manually implement the favicon with this generator: https://realfavicongenerator.net/
I have confirmed with people of the forums and the black background seems to be an iOS issue. And what the generator does to avoid this is to add a background to the favicon.
Hmm, I just put my image through the generator and I am still getting the same effect. Could it be bc I am uploading/viewing through mac osx? Maybe it is the icon that I am using. Do you know of any favicons I can download that you know should work – I’ll give one of those a shot and see what happens.
Hey @butlerjw, made a little experiment in a web with your same situation.
Effectively iOS does not allow transparency. What the generator does is create an icon with white background for iOS devices. Then you have to upload those files and add the code the tool generates to your site header.
The fast way to solve this could be to add a white background to your current favicon. If you don’t know how, I can help you doing that 😉
