logoredraws.com

Host a favicon on a CDN

How to serve a favicon, including an SVG favicon, from a CDN: the link markup, the root favicon.ico request, content types, caching, security policy and fallback files.

Published

Contents
  1. The short answer
  2. How a CDN-hosted favicon is referenced
  3. The root favicon.ico request a CDN cannot answer
  4. Configuration checks on the CDN side
  5. Preparing an SVG favicon for delivery
  6. A security note on public SVG files
  7. Rights to the logo itself
  8. Summary of files to deliver
  9. What this overview does not cover

The short answer

Yes, you can host a favicon on a CDN. Browsers fetch the icon from whatever absolute address you put in the page's icon link tag, so the file does not have to live on the same server as the HTML. The asset in question is usually a small square icon derived from a logo. For modern browsers it is often an SVG file, with ICO or PNG versions as fallbacks. Most problems come from details around the file: how the CDN labels it, how long it is cached, whether your security policy allows it, and what happens when a browser or tool skips your markup and asks for a file at your site root.

How a CDN-hosted favicon is referenced

Declare each icon in the document head with an absolute address that points to the CDN. In the snippet below, CDN_BASE is a placeholder for your own CDN hostname and path. Replace it with your real value.

<link rel="icon" href="CDN_BASE/favicon-v2.svg" type="image/svg+xml">
<link rel="icon" href="CDN_BASE/favicon-v2.ico" sizes="any">
<link rel="apple-touch-icon" href="CDN_BASE/apple-touch-icon-v2.png">

Browsers that support SVG icons can use the vector file. Others fall back to the ICO or PNG. Apple devices look for the touch icon as a PNG when a page is saved to a home screen. Browser support for SVG favicons has changed over time, so check current compatibility data for the browsers your audience uses rather than assuming the SVG alone is enough.

The root favicon.ico request a CDN cannot answer

When no icon link is present, or when a client ignores the page markup, browsers and some other tools request favicon.ico at the root of your own domain. That request goes to your origin, not to the CDN. Keep a favicon.ico at the site root, or configure the origin to redirect that path to the CDN copy. Otherwise those requests return errors, and some clients will show no icon.

Search engines that display favicons in results generally need the icon to be crawlable. A CDN address is usually acceptable, provided the CDN does not block crawlers and the file returns a normal success response. Each search engine publishes its own favicon guidelines. This article had no source evidence on them, so review those guidelines directly.

Configuration checks on the CDN side

  • Content type: serve SVG files as image/svg+xml, ICO files as an icon type, and PNG files as image/png. Object storage behind a CDN sometimes labels files with a generic type, and some browsers then ignore the icon.
  • Caching: browsers cache favicons aggressively and do not always refresh them on schedule. Put a version in the filename, such as favicon-v2.svg, and update the link tag when the icon changes. Changing the file at the same address may not reach returning visitors for a long time.
  • Security policy: if your site sends a Content-Security-Policy header, the img-src directive must allow the CDN's origin. If it does not, the browser blocks the icon.
  • Cross-origin rules: an ordinary icon link does not normally need CORS headers. A web app manifest is different. Its icon addresses resolve relative to the manifest file, and loading the manifest from another origin can involve credential and CORS settings. Test the manifest separately if it is also served from the CDN.
  • Availability: if the CDN is unreachable, the page has no icon. A root-level favicon.ico on the origin serves as a minimal safety net.

Preparing an SVG favicon for delivery

A file ending in .svg is not necessarily vector artwork. An SVG can simply wrap an embedded PNG or JPEG, which scales no better than the raster image inside it. Open the file in a vector editor or a text editor to confirm the logo is drawn as paths and shapes, not as an embedded image element.

  • Make it self-contained. When an SVG is used as an image, browsers generally do not load external resources, so linked fonts, external images and referenced stylesheets will not appear. Convert text to outlines and inline any styling.
  • Use a square viewBox. Favicons display at very small sizes, so simplify the logo to a mark or monogram that stays legible when tiny, rather than shrinking a full wordmark.
  • Remove editor metadata, hidden layers and unused definitions to keep the file small and predictable.
  • Light and dark display: some browsers honour a prefers-color-scheme media query inside the SVG, which lets the icon switch colours with the user's theme. Support is not universal, so the default colours must work on both light and dark browser chrome.
  • Keep the editable master separate. The delivered favicon is an optimised output. The layered, editable source artwork should stay in your design files, not on the CDN.

A security note on public SVG files

Scripts inside an SVG do not run when the file is shown as a favicon. However, anyone can open a CDN-hosted SVG directly in a browser tab, and there embedded scripts can execute in the CDN's origin. Sanitise SVG files before upload, especially if they come from third parties or user uploads, so they contain no script elements, event handler attributes or external references.

Rights to the logo itself

Hosting a favicon is a delivery decision, not a licensing one. Being able to download a logo file does not grant permission to modify it, redraw it as a favicon, or use the brand's trademark and any fonts in its artwork. If the icon represents your own brand, check that your license for any typeface in the mark allows conversion to outlines and web distribution. If it represents someone else's brand, follow that owner's brand usage terms.

Summary of files to deliver

File | Where to host | Purpose
favicon (SVG, versioned name) | CDN | Scalable icon for browsers that support SVG favicons
favicon (ICO, versioned name) | CDN | Fallback for browsers without SVG favicon support
favicon.ico | Site root on origin, or redirected to CDN | Answers automatic root requests
apple-touch-icon (PNG) | CDN | Home-screen icon on Apple devices
Manifest icons (PNG) | CDN or origin, tested for cross-origin loading | Installed web app icons

What this overview does not cover

No source evidence was supplied about specific CDN providers, their pricing, default headers or performance. No measurements were supplied comparing CDN-hosted and origin-hosted favicons. The guidance above relies on general, verifiable web platform behaviour. For exact browser support versions, search engine requirements and provider settings, consult current documentation.