# Site Images

> Icons and thumbnail specifications for the favicon, Apple Touch Icons, Google Manifest Icons, and social images.

Source: https://cherry.al/site-images

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# 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

<Steps>
  <Step title="Favicon" icon="image">
    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.
  </Step>
  <Step title="Apple Touch Icons" icon="smartphone">
    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.
  </Step>
  <Step title="Google Manifest Icons" icon="app-window">
    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.
  </Step>
  <Step title="Social Image" icon="share-2">
    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.
  </Step>
</Steps>

<Callout type="info">
  Remember to include these icons and images in your project to create a cohesive and professional appearance for your web application.
</Callout>

Site images can be found in the Figma Template in the Assets page.

<Button href="https://www.figma.com/community/file/943862931766586094/Cherry-Design-System" icon="pen-tool" iconPosition="left">
  View in Figma
</Button>