- Issue created by @thomas.frobieter
It seems that the module has problems with the latest changes on https://realfavicongenerator.net.
After generating and uploading a new favicon package I notices multiple problems:
- https://realfavicongenerator.net/favicon-checker (Web app manifest) says:
- The 192x192 icon is not found
- The 512x512 icon is not found
- Firefox for Android shows a favicon, but if the website is saved on homescreen there is just an empty rect, while it works well for Chrome. Probably because FF tries to use the 192 or 512 icon?
While the manifest json and the 192 + 512 icons are corretly uploaded to the /sites/default/files/favicon folder.
manifest.json:
{
"name": "FOO",
"short_name": "BAR",
"icons": [
{
"src": "/web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/web-app-manifest-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
1. Generate responsive favicon (see example SVG logo attached)
2. Choose to set a solid (white) background for everything
3. Dont define a custom path for the files
4. Generate
5. Copy over the meta tags and upload the favicon package (example also attached)
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-title" content="Foobar" />
<link rel="manifest" href="/site.webmanifest" />
6. https://realfavicongenerator.net/favicon-checker => Missing 192 & 512 icons
6a. Save the website to your homescreen using Firefox for Android
Active
2.0
Code