👨💼 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 ✨ 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 .
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
Filessection 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.