Use Any Emoji as a Favicon in Less Than One Minute

Summary

The web content provides a quick tutorial on how to replace a default favicon with any emoji in a Next.js project.

Abstract

The article outlines a simple method for changing the favicon of a Next.js project to any desired emoji. The author shares a personal preference for using emojis over the standard Vercel logo as a favicon, noting that with numerous tabs open, an emoji can make a localhost:3000 tab more distinguishable. The tutorial credits Joshua Soileau for discovering the technique, which involves adding a specific SVG code snippet to the Head component in the index.js file of a Next.js project. This SVG snippet includes the emoji within an SVG tag and is set as the href attribute of a link element with the rel attribute set to "icon". The method is praised for its immediate effectiveness and ease of implementation.

Opinions

The author prefers a unique and recognizable favicon, such as an emoji, over the default Vercel logo to easily identify tabs among many open.
The author appreciates the simplicity and quickness of the favicon replacement method, emphasizing its ease for developers.
The author expresses gratitude towards Joshua Soileau for devising the favicon customization technique.

Use Any Emoji as a Favicon in Less Than One Minute

This will be a super quick tutorial, as it’s simply a code snippet. I always like to remove the Vercel logo when making a new project and I favour an emoji. There are so many emoji to choose from, so why not make it quick and easy? I typically have so many tabs open, that my localhost:3000 gets lost in the mix. Not anymore!

I stumbled upon this trick by accident here, and I can tell you it immediately works in a Next.js project!

Basically, all you have to do is add this snippet into your Head component in your index.js file:

<link

rel="icon"

href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🍓</text></svg>"

/>

This overwrites the favicon.io which typically comes out of the box in any Next.js blog / app boilerplate install.

Big thanks to Joshua Soileau for figuring this out!