Favicon setup
A favicon is the small icon that appears in the browser tab, bookmarks bar, and browser history next to your site’s name. It is a small detail with a significant impact on how professional your site feels.
Adding a favicon in Site Designer
- Go to Settings → Project.
- Click the Favicon tab.
- Click Upload and select your icon file from your computer.
- Site Designer generates the necessary
<link>tags automatically and embeds them in every exported page’s<head>.
Supported formats
ICO — The traditional format. A single .ico file can contain multiple sizes (16×16, 32×32, 48×48) embedded in one file. Supported by all browsers including old versions of Internet Explorer.
PNG — Clean and widely supported. Use a square PNG at 32×32 or higher for best results in modern browsers.
SVG — The modern standard. An SVG favicon scales perfectly to any size and supports dark mode variations via CSS media queries within the SVG. Supported by all modern browsers except Safari (which ignores SVG favicons).
Recommended icon sizes
| Size | Use |
|---|---|
| 16×16 | Browser tab (minimal detail) |
| 32×32 | Standard favicon for most desktop browsers |
| 180×180 | Apple Touch Icon (iPhone and iPad home screen) |
| 192×192 | Android Chrome home screen icon |
| 512×512 | PWA splash screen and high-DPI displays |
Site Designer handles the most common sizes automatically from a single uploaded image.
Apple Touch Icon and Android icons
When a visitor saves your site to their iOS or Android home screen, the device uses a larger icon — not the 16×16 favicon. Site Designer generates:
<link rel="apple-touch-icon">for iOS and macOS Safari.- The appropriate
<meta>tags for Android Chrome.
These are added to every page’s <head> when you upload a favicon.
The generated HTML
After uploading, Site Designer adds tags similar to these to every page:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Testing your favicon
After publishing or previewing the site:
- Open the site in a browser and look at the browser tab.
- Bookmark the page and check the bookmark icon.
- On an iPhone or Android device, use “Add to Home Screen” and verify the icon appears correctly.
