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.

<link
rel="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>"
/>
Professional headshot

Hi, I'm Jacob

Hey there! I'm a developer, designer, and digital nomad with a background in lean manufacturing.

About once per month, I send an email with new guides, new blog posts, and sneak peeks of what's coming next.

Everyone who subscribes gets access to the source code for this website and every example project for all my tutorials.

Stay up to date with everything I'm working on by entering your email below.

Unsubscribe at any time.