How to Set Up a Favicon in TYPO3

The short answer

In TYPO3, the frontend favicon is usually set in TypoScript through the PAGE object's shortcutIcon property, pointing to an icon file stored in your site package. Additional formats, such as an SVG icon or an Apple touch icon, are added as extra link tags through page.headerData. The favicon shown in the TYPO3 backend is configured separately, in the backend extension's settings. This core approach has been stable across recent TYPO3 versions, but your exact steps depend on details not given here: your TYPO3 version, whether your TypoScript comes from template records or site sets, and your site package's name. Check the documentation for your version if a property behaves differently.

Where to store the icon files

Put favicon files in the Resources/Public folder of your site package extension, for example Resources/Public/Icons. Files there are versioned with your code and are publicly accessible. You can reference a file in fileadmin instead, but editors can then replace or delete it, and it is no longer tied to your deployment.

Setting the main icon with TypoScript

Assign the icon to shortcutIcon on the PAGE object that renders your site. The object is often named page, but use whatever name your setup uses. TYPO3 resolves the EXT: path and outputs a link rel="icon" tag in the page head.

page = PAGE
page.shortcutIcon = EXT:my_sitepackage/Resources/Public/Icons/favicon.ico

Replace my_sitepackage with your extension key. For the shortcutIcon itself, an ICO or PNG file is the safest choice, because browser support for SVG favicons is not uniform.

Adding an SVG favicon and other formats

shortcutIcon produces a single tag. To offer an SVG icon alongside it, add further tags through page.headerData. The path: getText key resolves an EXT: path to a public file path, so you don't have to hard-code the published location.

page.headerData {
  20 = TEXT
  20 {
    data = path:EXT:my_sitepackage/Resources/Public/Icons/favicon.svg
    wrap = <link rel="icon" type="image/svg+xml" href="|">
  }
  30 = TEXT
  30 {
    data = path:EXT:my_sitepackage/Resources/Public/Icons/apple-touch-icon.png
    wrap = <link rel="apple-touch-icon" href="|">
  }
}

Browsers differ in how they choose among several icon tags. Keeping both an ICO or PNG and an SVG gives each browser something it can use. Many browsers and other clients also request favicon.ico from the public web root no matter what tags the page contains. Placing a copy there prevents error responses and stray default icons.

An SVG favicon can adapt to dark browser themes with an embedded media query. A minimal fragment inside the SVG looks like this:

<style>
  path { fill: #000; }
  @media (prefers-color-scheme: dark) {
    path { fill: #fff; }
  }
</style>

Checking that the SVG is actually vector

A .svg extension and a sharp preview do not prove that a logo file is vector. Open the file in a text editor or a vector editor and inspect what it contains. The table separates properties you can observe in the file from judgments that only look like evidence.

Check | What to look for | What it tells you

File extension | .svg | Nothing about the contents on its own

Shape elements | path, circle, rect, polygon | The artwork is built from vector geometry

Image elements | image tags containing base64-encoded PNG or JPEG data | A raster bitmap wrapped in SVG; it will not scale cleanly

Text elements | text or tspan tags | Live text that depends on installed fonts; convert it to outlines for a favicon

viewBox | A square viewBox | The icon will scale predictably into square favicon slots

Zoomed preview | Edges look crisp | A visual judgment only; a large embedded bitmap can also look sharp

Preparing the logo for favicon sizes

Whether a logo works as a favicon is a visual judgment, and you have to make it by viewing the icon at real tab size. Fine detail, thin strokes and wordmarks usually disappear at small sizes, so a simplified mark or a single letterform often reads better. Check contrast against both light and dark browser themes. Having the logo file does not give you permission to adapt or publish it. Confirm usage rights with the logo's owner before you simplify or redraw it.

Setting the backend favicon

The TypoScript settings above affect only the frontend. To change the icon shown in the TYPO3 backend, open Admin Tools, then Settings, then Extension Configuration. Select the backend extension and set the backend favicon field to your file, using an EXT: path or another supported reference.

If the favicon doesn't appear: order of checks

• 1. View the page source and look for a link rel="icon" tag. If it is missing, your TypoScript is not reaching that page: check that the template or site set is included for that page tree and that you edited the correct PAGE object.
• 2. Open the href value from the tag directly. A not-found response points to a wrong path, an extension key typo, an inactive extension, or a file outside Resources/Public.
• 3. Check the response type for SVG files. The server should send image/svg+xml; a misconfigured server may send something else, and the browser may then ignore the icon.
• 4. Confirm the file is valid. Make sure the SVG opens without errors and that the file's real format matches its extension.
• 5. Clear TYPO3 caches after changing TypoScript or replacing files.
• 6. Rule out browser caching, which is especially persistent for favicons. Test in a private window or another browser, or rename the file.
• 7. Look for conflicting tags. A hard-coded icon tag in a Fluid layout, or one added by another extension, can override yours.
• 8. Check the web root for a favicon.ico file, since some clients request it directly and ignore your tags.

What this guide cannot confirm

No version-specific evidence was available. Exact menu labels, the availability of site sets, and details of path resolution may differ in your TYPO3 installation. Current browser support for each icon format was not verified either, which is why the setup above keeps a raster fallback next to the SVG.