43 lines
1.2 KiB
Markdown
43 lines
1.2 KiB
Markdown
|
# Browser Phone Images
|
||
|
|
|
||
|
|
## Required Images for PWA Notifications
|
||
|
|
|
||
|
|
Place the following image files in this directory for browser push notifications:
|
||
|
|
|
||
|
|
### phone-icon.png
|
||
|
|
- **Purpose**: Main notification icon
|
||
|
|
- **Size**: 192x192 pixels (recommended)
|
||
|
|
- **Format**: PNG with transparency
|
||
|
|
- **Usage**: Shown in browser notifications for incoming calls
|
||
|
|
|
||
|
|
### phone-badge.png
|
||
|
|
- **Purpose**: Small badge icon for notifications
|
||
|
|
- **Size**: 96x96 pixels or 72x72 pixels
|
||
|
|
- **Format**: PNG with transparency
|
||
|
|
- **Usage**: Displayed in the notification badge area (Android)
|
||
|
|
|
||
|
|
## Fallback Behavior
|
||
|
|
|
||
|
|
If these images are not present, the browser will:
|
||
|
|
- Use a default browser notification icon
|
||
|
|
- Still display text-based notifications
|
||
|
|
- Functionality will not be affected
|
||
|
|
|
||
|
|
## Image Creation Tips
|
||
|
|
|
||
|
|
- Use a simple, recognizable phone icon
|
||
|
|
- Ensure good contrast for visibility
|
||
|
|
- Test on both light and dark backgrounds
|
||
|
|
- Transparent backgrounds work best
|
||
|
|
- Use a consistent color scheme with your brand
|
||
|
|
|
||
|
|
## Example Resources
|
||
|
|
|
||
|
|
- Google Material Icons: https://fonts.google.com/icons
|
||
|
|
- Font Awesome: https://fontawesome.com/
|
||
|
|
- Flaticon: https://www.flaticon.com/
|
||
|
|
- Or create custom icons using tools like:
|
||
|
|
- Figma
|
||
|
|
- Adobe Illustrator
|
||
|
|
- Inkscape (free)
|