Favicon

GraphCommerce offers a magento-graphcms example that provides an approachable path to building GraphCommerce custom e-commerce storefront.

Included in the magento-graphcms example, is a well-founded implementation ↗ for a correct favicon and touch icon.

Favicons can be found in the /public directory:

/public/favicon.ico
/public/favicon.svg
/public/apple-touch-icon.png
/public/manifest/favicon-512.png
/public/manifest/favicon-192.png

Replacing the favicon

To replace the favicon with your own, simply replace the image files located in the /public and /public/manifest directories. Pay attention to the standardized "minimum safe zone ↗"

You can use the GraphCommerce favicon sketch template ↗ to simplify the process of making correct favicons.

Open Graph preview image

The Open Graph image is automaticly set for product and category pages if possible. For product pages the first gallary image will be used and for category pages the image uploaded to the Category Image attribute. If these images are not availale or on any of the other other pages a preview image will not be added unless added as ogImage prop to the PageMeta, , CategoryMeta or ProductPageMeta components.

It is possible to enable a fallback image per route by setting the ogImageUseFallback prop to true on either the PageMeta, , CategoryMeta or ProductPageMeta components. The image used as fallback can be found at /public/open-graph-image.jpg

Next steps

• Lear more about Static file serving