Adapticon
The app icon is one of the most important assets of an app and therefore it is key to make it look perfect on any device. Adaptive Icons make that possible and also allow you to add a nice little extra touch to your app.
Adaptive Icons are intended to make all icons on a device look coherent and still allowing customization by applying different masks. I designed and developed this web tool to support other designers in creating and debugging their icons.
Try it out: https://adapticon.mariusclaret.com
Technical Description
View Framework
- Adapticon is built using only HTML, JavaScript and CSS, and is not making use of a framework.
- The source code is lightweight and the page loads very fast (even on a flaky connection).
- It uses new web capabilities and can be labeled as Progressive Web App.
API Technology
- The Web App Manifest provides basic information about the PWA (icons, name, description, etc.) and gives the user the option to install the app on his device. It makes it easier to access it if he is frequently using it.
- A Service Worker caches all static files and allows the website to work offline.
- If the user wants to insert his own custom icon, he can browse his device for the image file or just drag and drop it into the window. The file is then uploaded to Imgur via the Imgur API. Then, the user can easily share the icon or access it again at a later time.
Authentication Strategy
- The website can be used in its entirety without any authentication from the user's side.
- The Imgur API requires to create a Client ID and to send it as authorization header when interacting with an endpoint.
State Management
- Changing the displayed icon results in a URL hash change (for example:
/#/bg=https://i.imgur.com/Mn5hNFP.png/fg=https://i.imgur.com/rdWZQj8.png) and is shareable and is restored on a page refresh. - The selected mask and settings (ghost, grid, shrink) are stored in local storage and are restored on a page refresh.
Styling
- Uses CSS custom properties to simplify styling and style changes.
- Supports dark and light mode through CSS
prefers-color-schememedia feature. - Supports all kind of screen sizes through CSS breakpoints.
Testing
- Tested and works well in all major browsers: Chrome, Safari, Firefox, Edge, Opera.
Security
- The website is served over HTTPS, image uploads are encrypted as well.
- It doesn't collect or store any sensible information about the user.
Production Setup and Deployment
- The project is hosted at https://adapticon.mariusclaret.com.
- Static files are hosted and served via Firebase Hosting.
- Uses Fathom for anonymous and privacy-focused analytics.
Source Structure
- Adapticon Logo: background.png, foreground.png
- Icons: 3x clear icons (default), 2x maskable icons (for Android), 1x solid icon (for Apple platforms)
- Website: index.html, style.css, script.js
- Example Collection: icons.json
- Web App Manifest: manifest.json
- Service Worker: worker.js
Examples by Cristian Ruiz
- 1Password
- Allo
- Amazon
- Analytics
- Android Auto
- Android TV
- Android Wear
- Audible
- Bank of America
- Calendar
- Camera
- Capital One
- Chase
- Comixology
- Dashlane
- Dropbox
- Duo
- Evernote
- Fandango
- Gmail
- Hangouts
- Hulu
- IFTTT
- Inbox
- Keep
- Kik
- Kindle
- LastPass
- Lifx
- Lyft
- Messenger
- Nest
- Netflix
- Play Books
- Play Dev Console
- Play Games
- Play Movies
- Play Music
- Play Newsstand
- PlayStation
- Pocket Casts
- Slack
- Snapchat
- Snapseed
- Spotify
- Starbucks
- Steam
- Switch Online
- Trello
- Twitch
- Uber
- Wells Fargo
- Xbox
- YouTube
- YouTube Gaming
Reference
- Official documentation
- Understanding Adaptive Icons
- Designing Adaptive Icons
- Implementing Adaptive Icons
Author
Marius Claret | @mariusclaret | https://mariusclaret.com