Links to Public Files

Loading "Manage Asset Links in a Remix Application"

Manage Asset Links in a Remix Application

👨‍💼 We're super excited about this awesome new app! First off, we've got an awesome favicon for our site in the public directory. Browsers will request the /favicon.ico by default, but we've got a ✨ responsive ✨

public/favicon.svg

that will look good in light and dark mode (you will find a media query embedded in the SVG itself). Let's get that on the page.

To do this, we'll need to add a <link> to

app/root.tsx

In Remix, you add links to the page by exporting a links function:

// ...
import { type LinksFunction } from '@remix-run/node'

export const links: LinksFunction = () => {
	return [
		{
			rel: 'stylesheet',
			// all files in the public directory are served at the root of the site
			href: '/my-stylesheet.css',
		},
	]
}

//...

It's important for you to know that Remix puts all the responsibility of what appears in the document on you. The app/root.tsx component you export is responsible for everything that appears between <html> and </html> and that includes the <head> element which contains the links that routes define. So you need to render the <Links /> element in that component:

// ...
import { Links } from '@remix-run/react'

// ...

export default function App() {
	return (
		<html>
			<head>
				<Links />
			</head>
			{/* ... */}
		</html>
	)
}

🦉 Remember, check the Files section at the bottom of these instructions for links that will open your editor to the right file you need to alter. My other emoji friends will be waiting there for you to guide you through this task.

🦉 Tip: Check the network tab in the app on the home page. You'll know you got it right when you see the favicon.svg file loaded.

SVG favicons are not currently supported in Safari. See caniuse for browser support.

01. Styling/01. Links to Public Files (💪 problem)

Links to Public Files