Is there a way to load more favicon options than a single PNG? So android 192×192 or iOS 180×180?
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
Tip…
you don’t need to actually load the Apple icons in the meta data. Simply put them in the root folder of your domain and Apple devices will “look” for them automatically. Upshot, they do NOT need to be in the meta data *unless* you’re loading them from someplace OTHER than your domain root! 🙂
Not sure about Android devices, but guessing that works same way — might need to check with Google docs on that.
Hi
Thanks @Chris for your answer!
@anteaparty at the moment theme can load only one favicon for the site, that was the initial implementation in this regard. To load more then one favicon depending by device are required some customizations in theme’s core files.
This is a complex task which require lot of time and also many tests in order to be achieved. We can’t offer customization services at the moment so if you still need guidance on this or you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you.
Thanks!
If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:
apple-touch-icon-76x76.png
apple-touch-icon.png
