Favicon Notification Badge Lab
A playground using libraries like favico.js to show users how to add dynamic "red dot" notification badges or counters to their icon.
Upload your favicon image (PNG, JPG, ICO)
This is how your favicon will look in the browser tab
Test the badge with these actions:
Tip: Check your browser tab to see the favicon update in real-time!
Features
- Upload custom favicon or use emoji as base icon
- Three badge types: Red dot, Number counter, or None
- Customizable badge colors and text colors
- Multiple animation styles: Pop, Fade, Slide
- Real-time preview of favicon with badge
- Interactive demo to test badge behavior
- Automatic code generation for easy implementation
- Pre-built examples for common use cases
- Live favicon updates in browser tab
- Uses popular favico.js library
How to Use
- Upload your favicon image or select an emoji as the base icon
- Choose a badge type: Red dot for simple notifications or Number for counters
- Customize the badge color and text color to match your brand
- Select an animation style for the badge appearance
- Use the interactive demo buttons to test the badge behavior
- Check your browser tab to see the live favicon update
- Copy the generated code and paste it into your website
- Try the quick examples to see different notification styles