electronim
electronim copied to clipboard
[service-manager] Add ability to customize service favicons
Description
Allow users to upload and use custom favicon images for services, overriding the default favicon from the service URL. This provides better visual customization and helps users quickly identify their services with personalized icons.
Motivation
Users may want to:
- Use custom icons that better represent the service to them
- Replace low-quality or missing default favicons
- Use consistent icon styles across all their services
- Differentiate between multiple instances of the same service
Acceptance Criteria
User Interface
- [ ] Add "Custom Favicon" option in the service settings (expanded service view)
- [ ] "Choose Favicon" button opens native OS file picker
- [ ] File picker filters for supported image formats (PNG, JPG, GIF, SVG, ICO)
- [ ] Display preview of selected custom favicon in service settings
- [ ] Show "Remove Custom Favicon" button when custom favicon is set
- [ ] Custom favicon appears in chrome-tabs tabContainer, replacing default
Storage & Processing
- [ ] Store favicon files in app directory (e.g.,
<appDir>/favicons/<serviceId>.png) - [ ] Process images to appropriate favicon size (128x128 or 256x256 recommended)
- [ ] Validate file type and format before accepting
- [ ] Compress/optimize images to reasonable file size (target < 50KB)
- [ ] Handle corrupt or unsupported image files gracefully with error messages
Functionality
- [ ] Custom favicon persists across app restarts
- [ ] Custom favicon takes precedence over URL-provided favicon
- [ ] Removing custom favicon reverts to default behavior
- [ ] Service export/import includes custom favicon data
Implementation Details
Storage Structure
<appDir>/
favicons/
<serviceId>-<timestamp>.png
Data Model
Add to service configuration:
{
customFavicon: {
path: string, // relative path to favicon file
timestamp: number // for cache busting
}
}
Testing Checklist
- [ ] Upload various image formats (PNG, JPG, GIF, SVG, ICO)
- [ ] Upload oversized images (verify resizing works)
- [ ] Upload corrupt/invalid files (verify error handling)
- [ ] Remove custom favicon (verify revert to default)
- [ ] Restart app (verify persistence)
- [ ] Delete service with custom favicon (verify cleanup)
- [ ] Export/import service with custom favicon
Original description:
I have several slack channel, but they are all using the same icon... the slack logo ... it would be nice to be able, for some site, to use a custom icon that i would provide in the settings.
This seems like a good addition.
Could you please elaborate how would you specify this favicon (resized to 16x16px)?
e.g.An input field where you would add a URI