Jacob Paris
← Back to all content

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 <head> tag.

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.

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>"
Professional headshot

Hey there! I'm a developer, designer, and digital nomad building cool things with Remix, and I'm also writing Moulton, the Remix Community Newsletter

About once per month, I send an email with:

  • New guides and tutorials
  • Upcoming talks, meetups, and events
  • Cool new libraries and packages
  • What's new in the latest versions of Remix

Stay up to date with everything in the Remix community by entering your email below.

Unsubscribe at any time.