ANSWER

Quick answer

Place the package in the framework’s public or static directory, or directly in a custom static build output. Cloudflare Pages identifies those directories as the natural location for favicons, robots files, and manifests.

Last verified
July 31, 2026
Evidence
Primary documentation plus a route-specific implementation example
Primary sources
2
01

Project paths and constraints

Place the package in the framework’s public or static directory, or directly in a custom static build output. Cloudflare Pages identifies those directories as the natural location for favicons, robots files, and manifests.

Pages serves static assets from the build output and can apply _headers rules, while Functions and redirects may alter matching paths. MIME and cache behavior should be checked at the edge.

Connected next stepVercel Favicons: Static Files, Rewrites and CDN Cache for the closest prerequisite or comparison.

02

Declare favicon metadata once

Declare the normal icon stack in the shared head and avoid Functions routes that intercept asset paths. Use a _headers file only when an explicit browser caching or MIME policy is needed.

Keep favicon paths out of Functions and redirect patterns. Put _headers in the static directory that reaches the build output, and apply only the MIME or browser-cache policy the route actually needs.

Connected next stepGitHub Pages Favicons: Base Paths and Deployment for the next connected implementation decision.

03

Build, deploy, and verify

Test the preview hostname and custom domain, inspect Content-Type and cache headers, and redeploy before purging. Pages can serve Gzip and Brotli and maintains deployment-aware static asset caching.

Purging cache cannot restore a file omitted from the deployment. Confirm the asset appears in build output and is not consumed by a Function before adjusting browser cache.

Connected next stepOpen the most relevant production tool and verify the decision with a working output.

04

Follow the asset through Pages and the edge

Inspect the final build directory for each icon plus _headers. On the preview hostname, verify that the Pages asset response—not a Function or HTML fallback—owns the route and returns the intended Content-Type.

Repeat the requests on the custom domain and note cf-cache-status, age, encoding, and cache policy. Redeploy an omitted asset before purging; use a purge only after the current deployment proves the correct origin bytes exist.

BUILD

Production file tree and code: Cloudflare Pages assets and _headers

Place _headers in the directory copied to the Pages output. These rules make MIME and browser-cache intent explicit without routing favicon requests through a Function.

FILE TREE
public/
├── favicon.svg
├── favicon.ico
├── site.webmanifest
└── _headers
TEXT
/favicon.ico
  Content-Type: image/x-icon
  Cache-Control: public, max-age=86400
/favicon.svg
  Content-Type: image/svg+xml
/site.webmanifest
  Content-Type: application/manifest+json
DOWNLOADABLE EVIDENCE

Review the headings, sources, implementation artifact, and update record for this guide as structured JSON.

Download guide evidence ↓
Primary references
Evidence scope
Guide
Cloudflare Pages Favicons: Assets, Headers and Cache
Coverage
Client behavior can change by browser, operating system, platform version, cache state and deployment configuration. Unperformed manual observations are not claimed.
Q&A

Questions, answered

Why did my _headers rule not affect the favicon?+

The file may not have reached the build output, the path pattern may not match, or a Pages Function may be serving the request instead of the static asset.

Will purging Cloudflare restore a missing icon?+

No. A purge removes cached responses. The current Pages deployment must contain the favicon at the requested path first.