Favicon
Since PXP 6.1 favicons are regular files in the public folder.
When one of the following files exists, the matching <link> tag is added to the <head> of every page automatically:
File in web/default/storefront/public/ | Tag added to the page |
|---|---|
favicon.ico | <link rel="icon" href="/favicon.ico"> |
favicon.png | <link rel="icon" href="/favicon.png" type="image/png"> |
favicon.svg | <link rel="icon" href="/favicon.svg" type="image/svg+xml"> |
apple-touch-icon.png | <link rel="apple-touch-icon" href="/apple-touch-icon.png"> |
site.webmanifest | <link rel="manifest" href="/site.webmanifest"> |
You only need the files you want. A good minimal set:
- favicon.ico (32×32, the fallback every browser understands)
- favicon.svg (sharp at every size, used by modern browsers)
- apple-touch-icon.png (180×180, iOS home screen)
For Android and desktop "install" icons, add a site.webmanifest. Put the icons it refers to into the public folder as well:
{
"name": "Example News",
"short_name": "Example",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Favicons uploaded in Purple Manager
The favicons uploaded in Purple Manager are still used, but only as a fallback for experiences that have none of the files above in the public folder. This fallback will be removed in PXP 7.0, so move your icons into the public folder.
If there's neither a public folder icon nor a Manager favicon, the page has no icon and /favicon.ico returns a 404. There is no default Purple icon.