Published 📅: ....
Last modified 📝: ....
Share this post on BlueskySee discussion on Bluesky
The other day I was reminded of two neat tricks related to customizing your favicon to bring some delight to your website visitors and also to improve your development flow - all thanks to @scottykaye!
If you want to skip right to the code, checkout both recipes in my hamlim/custom-favicon-recipes repo!
The first recipe is a neat way to change the favicon of your site based on the preferred color scheme of the visitor. You can use the <link /> tag's media attribute
to have the browser "choose" the preferred icon based on light or dark mode.
If you're writing plain old html (or using some framework that gives you control over the html), you can use the below snippet to accomplish this:
<head>
<link rel="icon" href="./light-mode-favicon.ico" media="(prefers-color-scheme: light)" />
<link rel="icon" href="./dark-mode-favicon.ico" media="(prefers-color-scheme: dark)" />
</head>If you're using Next.js and it's metadata or generateMetadata exports, you can do the following:
export const metadata: Metadata = {
title: "Custom light/dark mode favicons",
description: "Generated by create next app",
icons: [
{
rel: "icon",
url: "./sun-favicon.ico",
media: "(prefers-color-scheme: light)",
},
{
rel: "
You can see this recipe in action on this Next app!
This is a pretty neat trick that makes it just a bit easier to determine if you're looking at the development version of your site or the production one.
We've all been there, we're about 45 minutes into trying to debug an issue, you keep making more basic and basic changes to the code, refreshing the page in the browser and still can't see your changes. Only to then realize that you've been madly refreshing the production site expecting to find your local changes.
With a custom icon for development, you'll no longer get stuck in that situation again!
If you're using Next.js and it's metadata or generateMetadata exports, you can do the following:
export const metadata: Metadata = {
title: "Custom favicon per environment",
description: "Generated by create next app",
icons: [
{
rel: "icon",
url: process.env.NODE_ENV === "production"
? "./env-favicon.ico"
: "./env-favicon-dev.ico
You can see this recipe in action on this other Next app!
Let me know if you know of other tips and tricks with customizing your site's favicon!
Loading...
Published: ....
A quick tip for creating roundup or summary notes based on other notes in Obsidian using the Dataview plugin!
Published: ....
The secret to excellent product teams is using your own product, and often!
Published: ....
Are we reinventing the wheel when it comes to onboarding new AI agents to a codebase, when we already have primitives available for onboarding humans?
Published: ....
Have you ever found the need to change the image you render on a web page based on the current preferred color scheme of your theme?
Published: ....
Have you ever wanted to create a class in JavaScript or TypeScript but also have the initialization be async? Here's a quick tip on a pattern that I've used in the past!
Published: ....
I recently launched a rewrite and redesign of this personal website, I figured I'd talk a bit about the changes and new features that I added along the way!
Published: ....
A few thoughts on what to do after you launch a new project
Published: ....
Have you ever found the need to change the image you render on a web page based on the current preferred color scheme of your theme?