The current icon is a flat square with no transparency. Toolbar icons with transparent backgrounds use shape itself as a recognition signal, which helps at small sizes (16x16) where color alone isn't enough.
Goals
- Remove the opaque background so the icon floats in the toolbar
- Use a shield as the primary shape — universally recognized for protection and privacy
- Incorporate the @ symbol into the shield in a way that reads clearly at 16x16 and 32x32 (the sizes that matter most in the toolbar and extension management pages)
Design considerations
At small sizes, the @ letterform competes with the shield outline. Some approaches worth exploring:
- @ centered inside the shield, with the shield acting as a frame
- @ whose circular bowl merges with or cuts into the shield silhouette
- A simplified @ (just the inner "a" with a partial arc) overlaid on a minimal shield
The 128x128 size (used in the store listing) can be more detailed. The 16x16 must still be legible.
Deliverables
Replacement PNGs at all four sizes already referenced in manifest.json:
icons/maskify16x16.pngicons/maskify32x32.pngicons/maskify48x48.pngicons/maskify128x128.png
All with transparent backgrounds.
The current icon is a flat square with no transparency. Toolbar icons with transparent backgrounds use shape itself as a recognition signal, which helps at small sizes (16x16) where color alone isn't enough.
Goals
Design considerations
At small sizes, the @ letterform competes with the shield outline. Some approaches worth exploring:
The 128x128 size (used in the store listing) can be more detailed. The 16x16 must still be legible.
Deliverables
Replacement PNGs at all four sizes already referenced in
manifest.json:icons/maskify16x16.pngicons/maskify32x32.pngicons/maskify48x48.pngicons/maskify128x128.pngAll with transparent backgrounds.