---
title: Windsurf Favicon Install Guide
description: Add favicons and app icons in Windsurf: give Cascade the exported files, one precise wiring instruction, and make it verify every icon path returns a real file.
canonical: https://favicontools.com/windsurf/favicon-install
---

# Windsurf Favicon Install Guide

A full icon set touches several files at once — head tags, manifest, static assets — which is exactly the kind of work Cascade handles well, and exactly where mistakes hide. Hand it real image files and one precise instruction, then make it prove the icons are actually being served.

## Why it matters

- **Make Cascade verify, not guess** — The agent has a terminal. Have it request each icon path against the running dev server so a 404 surfaces immediately instead of on launch day.
- **Reject data URIs** — Agents love shortcuts like inline base64 or a lone SVG. Apple touch icons, Android home screens, and older browsers all need real files on disk.

## Playbook

1. **Drop the exported kit in place** — Unzip the generated icons into the project's static directory before you start the conversation, so Cascade is editing around files that already exist.
2. **Give one scoped instruction** — List the paths and sizes and tell Cascade to change only the head markup and manifest. Open-ended prompts here tend to turn into an unrelated layout refactor.
3. **Have it prove the result** — Ask Cascade to start the dev server and fetch each icon URL, confirming a 200 and an image content type before you accept the diff.

## Checklist

- Record in your workspace rules that icons are generated assets, so later Cascade runs leave them alone.
- Check the icons array in manifest.json matches the filenames and sizes that actually shipped.
- Re-run the fetch check after any Cascade refactor that touches the layout or document head.

## FAQ

### Can Windsurf create the favicon images themselves?

No. Cascade edits text files and runs commands, so it can install and wire an icon set but cannot render the PNG or ICO artwork. Generate the images first, then let Cascade handle placement, markup, and verification.

### Why is my icon broken after Cascade edited the head?

Nine times out of ten it is a path prefix problem: files in /public are served from the site root, so the correct link is /favicon.ico rather than /public/favicon.ico. Ask Cascade to curl the exact URL from the link tag — the 404 makes the mistake obvious in seconds.