Give the Admin and Website different Favicons

Did you know you can give the Admin a different Favicon than the website? In the image below, this site’s Admin gets a black Favicon, and the website gets a colored Favicon.

Screen Shot 2023-04-27 at 9.48.16 AM

This makes it easy for me and clients to identify the tabs, especially if you have multiple tabs open.

It’s very simple.
For the Admin, save the favicon.ico file in the root folder.
For your Website, save the favicon.ico and others in a different folder.
Yep, That’s it.

I use to create my Favicons. What do you use?

Hope someone finds this use full.


Thanks @Rhatch! Nice hack. Definitely gonna try this …

@Rhatch that’s cool. Thanks for sharing.
I also use RealFaviconGenerator :slight_smile:
My only reservation with this is that I’ve always thought it to be best practice to keep favicons in the root directory… not sure if this is so much of an issue now though?

They are no different than any other element. Here you go, a bit of history.

The favicon was standardized by the World Wide Web Consortium (W3C) in the HTML 4.01 recommendation, released in December 1999, and later in the XHTML 1.0 recommendation, released in January 2000. The standard implementation uses a link element with a rel attribute in the section of the document to specify the file format, file name, and location. Unlike in the prior scheme, the file can be in any Website directory and have any image file format.

1 Like