explaingit

ejci/favico.js

★ 8,692JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

JavaScript library that adds notification badges, custom images, or live video to your browser tab's tiny favicon icon so users see updates without switching tabs.

Mindmap

mindmap
  root((favico.js))
    What it does
      Badge on tab icon
      Image in favicon
      Video in favicon
    Features
      Font icon support
      Badge position config
      Large number support
    Browser Support
      Chrome supported
      Firefox supported
      Safari not supported
    Use Cases
      Unread message count
      Live status indicator
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Show an unread message count badge on the browser tab icon

USE CASE 2

Display a notification number on the favicon without a push notification

USE CASE 3

Add a FontAwesome icon to the favicon for visual status indicators

USE CASE 4

Stream live webcam video into the browser tab favicon

Tech stack

JavaScript

Getting it running

Difficulty · easy Time to first run · 5min

Does not work in Safari or Internet Explorer/Edge, only Chrome, Firefox, and Opera are supported.

Dual-licensed under GPL and MIT, you can choose to use it under the permissive MIT license, which allows any use with attribution.

In plain English

Favico.js is a JavaScript library that lets you add badges, images, or video to your website's favicon, which is the small icon that appears in the browser tab. The most common use case is showing a notification count, like the number of unread messages, directly on the tab icon so users can see it without switching to the tab. The README is sparse and does not include usage examples, pointing instead to the project's demo page for more detail. The changelog shows a history of features added over time: support for badge numbers larger than 9 and then larger than 999, font icon support (such as FontAwesome icons), webcam video in the favicon, configurable badge positions and font options, and various performance improvements. Browser support is limited. Chrome, Firefox, and Opera are listed as supported. Internet Explorer, Edge, and Safari are not, with the README noting that Safari hides favicons entirely. The library is dual-licensed under GPL and MIT.

Copy-paste prompts

Prompt 1
Add a red notification badge with the number 5 to my site's favicon using favico.js.
Prompt 2
How do I update the favicon badge count dynamically as new messages arrive using favico.js?
Prompt 3
Show me how to reset the favico.js badge back to the default favicon when notifications are cleared.
Prompt 4
How do I change the badge position and font color in favico.js?
Prompt 5
Set up a favicon badge counter in my vanilla JavaScript app using favico.js, no framework.
Open on GitHub → Explain another repo

← ejci on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.