Site Images
When designing interfaces for web applications, it's essential to include icons and thumbnails. These visual elements enhance user experience and provide a professional look.
Image Types
Size: 346x346px, PNG format (icon.png). The favicon appears in browser tabs, bookmarks, and other places where your website is listed. It helps users quickly identify your site.
Size: 180x180px (apple-icon.png). These icons are specifically for iOS devices. When users add your website to their home screen, this icon is displayed.
Sizes: 192x192px (android-chrome-192x192.png) and 256x256px (android-chrome-256x256.png). The manifest file specifies how your web app should behave when installed on an Android device. For full PWA installability, also include a 512x512px icon, since Chrome and Lighthouse expect the 192x192px and 512x512px pair.
Size: Around 1280x670px. This is the open graph image that serves as a preview when your website is shared on social media platforms. Make sure the image represents your site well and encourages users to click through.
Remember to include these icons and images in your project to create a cohesive and professional appearance for your web application.
Site images can be found in the Figma Template in the Assets page.