---
title: "Asset handling in TYPO3"
manual: "Site Package Tutorial"
version: "main"
permalink: "https://docs.typo3.org/permalink/t3sitepackage:assets-theme@main"
source: "Assets/Index.rst"
rendered: "2026-09-24T15:01:46+00:00"
---

# Asset handling in TYPO3 {#assets-theme}

Assets usually include CSS files, JavaScript and images / icons used for design
purposes.

Within an extension, including a site package, assets can only be placed in folder
`Resources/Public` and subfolders of this folder. This folder will be
symlinked into `public/_assets/<some hash>`.

> [!NOTE]
> You **must never** reference any file in `public/_assets` directly by
> using the hash in an absolute or relative URL. The hashes can change at any
> time. Only use TYPO3 library methods to reference the assets.

Read more about assets in [Getting started, assets](https://docs.typo3.org/m/typo3/tutorial-getting-started/main/en-us/Concepts/Assets/Index.html#assets).

-   [Referencing assets](https://docs.typo3.org/permalink/t3sitepackage:referencing-assets-1@main)
-   [Repairing the symlinks from packages/my_site_package/Resources/Public into public/_assets](https://docs.typo3.org/permalink/t3sitepackage:repairing-the-symlinks-from-packages-my-site-package-resources-public-into-public-assets@main)
-   [Managing asset dependencies in real life projects](https://docs.typo3.org/permalink/t3sitepackage:managing-asset-dependencies-in-real-life-projects@main)

## Referencing assets {#referencing-assets}

You can reference assets by prefixing the path with `EXT:extension_name`, for
example `EXT:my_site_package`.

For example the path to the favicon can be configured in TypoScript like this:

```typoscript
page {
    shortcutIcon = EXT:my_site_package/Resources/Public/Icons/favicon.ico
}
```

And a CSS asset can be loaded in Fluid using the
[Asset.css ViewHelper \<f:asset.css>](https://docs.typo3.org/other/typo3/view-helper-reference/main/en-us/Global/Asset/Css.html#typo3-fluid-asset-css)
like this:

```html
<f:asset.css identifier="main" href="EXT:my_site_package/Resources/Public/Css/main.css" />
```

## Repairing the symlinks from packages/my_site_package/Resources/Public into public/\_assets {#theme-example-assets-symlink}

In case you installed a site package before it had a folder called
`Resources/Public` the symlinks did not get automatically created
during Composer installation.

In that case you can use the [asset:publish](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/CommandControllers/ListCommands.html#console-command-asset-publish)
command to re-perform this initialization-process.

```bash
ddev typo3 asset:publish
```

<!-- TODO: no Markdown rendering for "versionadded" -->

In TYPO3 14 the new command: asset:publish
were added.
This allows you to create the symlinks to the public resources without
any Composer command.

## Managing asset dependencies in real life projects {#asset-dependencies}

It is technically possible to use a CDN (Content Delivery Network) to include
libraries in TYPO3. However there are privacy and security risks attached to
this and it might be a GDPR Violation. Therefore we recommend to host all files
yourself by placing them in the `Resources/Public` folder.

In a later step, you can use [npm](https://www.npmjs.com/) (Node Package
Manager) to manage your JavaScript and CSS dependencies locally. We also
recommend using a JavaScript bundler like [Vite](https://vite.dev/).

If you decide to use a frontend bundler, make sure that the resulting asset
files are placed in a publicly available folder, like `Resources/Public`
in your site package.

There are also TYPO3 extensions like [`praetorius/vite-asset-collector`](https://packagist.org/packages/praetorius/vite-asset-collector)
to bundle your TYPO3 frontend assets with Vite.