Use an emoji favicon
Favicons are small icons that are displayed in the browser tab next to the page title. They're also used as a bookmark icon in the browser.
The default favicon for a Remix app is the Remix's "R" logo. For a Next.js app, it's Vercel's triangle. You will often spot these on developers' websites, blogs, and personal projects, because proper favicons are a bit tedious to set up. You need to resize your logo, upload it to a server, and have your app link to it in the
There's a faster way to get started with favicons.
Most browsers support SVG data urls as favicons, which means you can use an SVG string to render text, and then just type in the emoji you want to use.
Here's a one-liner you can copy and paste into the
<head> section of your website.
Swap out the
🥑 for any emoji or character you want to use.
<linkrel="icon"type="image/svg+xml"href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🥑</text></svg>"/>