Launching a website involves more than building pages. Your brand needs to show up correctly everywhere — browser tabs, mobile home screens, social sharing previews, and app stores. Missing even one asset creates a visibly unfinished product that erodes trust before a visitor reads a word.
The Complete Website Asset Checklist
- Favicons: 16x16, 32x32, 48x48 PNG
- Apple touch icon: 180x180 PNG (iOS home screen)
- Android/PWA icons: 192x192 and 512x512 PNG
- Open Graph image: 1200x630 JPG/PNG (social sharing)
- Twitter card image: 1200x600 JPG/PNG
- site.webmanifest: PWA configuration file
- HTML head snippet: link tags wiring it all together
Why Each Asset Matters
Favicons
Favicons appear in every browser tab. When a user has 20 tabs open, your favicon is the only visual identifier of your site. A clear, distinctive favicon aids navigation and reinforces brand recognition.
Apple Touch Icon
When an iOS user adds your site to their home screen, they see the 180x180 Apple touch icon displayed as an app icon. Without it, iOS generates an icon by screenshotting your page — which almost never looks good.
PWA Icons and Manifest
Progressive Web Apps can be installed on Android and desktop. The site.webmanifest tells the browser your app name, icon paths, theme color, and display mode. Without it, your site cannot be installed as a PWA.
Open Graph Image
Every time someone shares your link on Slack, LinkedIn, Facebook, or iMessage, the platform fetches your OG image to display as a preview card. A well-designed OG image can increase click-through rates by 2-3x versus no image or a generic screenshot.
Cross-Platform Icon Requirements
Apple and Android handle icons differently. iOS applies a rounded-rectangle mask — keep content within the inner 85% to avoid clipping. Android uses adaptive icons that can be shaped by the launcher; use purpose: 'maskable' in your manifest and design with the inner 80% as your safe zone.