When launching a web application, brand presentation matters. A small detail like a missing icon or displaying the default registrar placeholder icon makes a SaaS look unfinished.
Browser icons (favicons, touch icons, and manifests) display your logo in browser tabs, bookmark lists, search result pages, and mobile home screens.
This guide explains how to declare and format your site icons.
1. The Core Site Icons
To support various devices and browsers, you should declare these icons:
The Classic Favicon
Fallback icon for legacy browsers.
- Format: Save a 16x16 or 32x32 pixel icon as
/favicon.icoin your root folder.
Modern SVG Favicon
A scalable icon for modern browsers that supports dark and light modes.
- Format: Declare in your HTML head:
<link rel="icon" type="image/svg+xml" href="/icon.svg" />.
Apple Touch Icon
Used when users save your website to their iOS home screen. If missing, iOS displays a tiny screenshot of your page instead of your logo.
- Format: A 180x180 pixel PNG image declared as:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />.
Web Manifest Icons
Provides icons for Android devices and progressive web app (PWA) installs.
- Format: Declared in a
manifest.jsonfile pointing to 192x192 and 512x512 pixel PNG icons.
2. Setting Up Dark Mode Icons
If your logo has dark text, it will be invisible on browsers using dark mode tabs. Using an SVG favicon allows you to embed CSS to adjust colors based on system settings:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #fff; }
}
</style>
<path d="..." />
</svg>
3. Auditing Your Icons
Instead of manually adding links to home screens to check icon rendering, you can inspect your routes.
Use the Favicon Checker to audit your configurations. It fetches your page, verifies favicon and apple-touch-icon tag declarations, reads your web manifest, and verifies that each declared asset is reachable on your server.
- Audit your icons: Favicon Checker