If you don’t have time to create favicons for your website, you can use emojis! It is perfect for side projects or even for serious projects when you’re just starting.
That was exactly the case for my recent side project—Blast Banners and that’s how it looks like:
SVG
The trick is to use an SVG format:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50%" y="50%" font-size="80" text-anchor="middle" dominant-baseline="middle">💥</text></svg>
You can use any emoji you want and you can play with the font-size and other properties to make it look nice.
For regular HTML
In the head section of your HTML file, you can add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 font-size=%2280%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22>💥</text></svg>"
/>
</head>
<body>
<!-- ... -->
</body>
</html>
It must be escaped.
For Next.js
In the app/layout.tsx file, you can add the following code:
import type { Metadata } from "next";
// ...
export const metadata: Metadata = {
title: "BlastBanners.com",
description: "A funny game where you blast banners on websites.",
icons: {
icon: `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50%" y="50%" font-size="80" text-anchor="middle" dominant-baseline="middle">💥</text></svg>`,
},
};
// ...
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-orange-100`}
>
{children}
</body>
</html>
);
}
Browser support
It is supported in the most modern browsers, except Safari at the time of writing.
However, since the goal is to have something simple and fast to start with, it is a good enough solution.