Favicons and web clip icons
A favicon is the small icon in the browser tab; a web clip icon is the larger one used when someone saves your site to their phone home screen.
What they are#
The favicon shows up in browser tabs, bookmarks, and history lists. The web clip icon (often called the Apple touch icon) is what iOS and Android use when a visitor adds your site to their home screen. Together they are a small but visible part of looking finished: a site without them gets a generic grey globe or a blurry screenshot.
Adding them in Weblooks#
Upload one square image in the Metadata panel's Icons section and Weblooks generates the favicon and the Apple touch icon and links them on every page. The step-by-step guide is in Add a favicon and app icon under The canvas.
Adding them by hand#
Hosting the site yourself, or want manual control? Add the files to your site source directly:
- Place an icon file in the root of your site. A 32 by 32 PNG or an SVG named
favicon.svgworks well;favicon.icois the classic fallback. - Add a link tag in the
<head>:<link rel="icon" href="/favicon.svg"> - For the web clip, add a 180 by 180 PNG and reference it with
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
If an AI builder generated your site, asking it to "add a favicon and apple-touch-icon" with your logo file usually does the job.