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

• 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.

• 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.

• 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.

• 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.

• Uses CSS custom properties to simplify styling and style changes.
• Supports dark and light mode through CSS prefers-color-scheme media feature.
• Supports all kind of screen sizes through CSS breakpoints.

• Tested and works well in all major browsers: Chrome, Safari, Firefox, Edge, Opera.

• The website is served over HTTPS, image uploads are encrypted as well.
• It doesn't collect or store any sensible information about the user.

• 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.

• 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

• 1Password
• Allo
• Amazon
• Analytics
• Android Auto
• Android TV
• Android Wear
• Audible
• Bank of America
• Calendar
• Camera
• Capital One
• Chase
• Comixology
• Dashlane
• Dropbox
• Duo
• Evernote
• Facebook
• Fandango
• Gmail
• Hangouts
• Hulu
• IFTTT
• Inbox
• Instagram
• Keep
• Kik
• Kindle
• LastPass
• Lifx
• LinkedIn
• Lyft
• Messenger
• Nest
• Netflix
• Play Books
• Play Dev Console
• Play Games
• Play Movies
• Play Music
• Play Newsstand
• PlayStation
• Pocket
• Pocket Casts
• Slack
• Snapchat
• Snapseed
• Spotify
• Starbucks
• Steam
• Switch Online
• Trello
• Twitch
• Twitter
• Uber
• Wells Fargo
• Xbox
• YouTube
• YouTube Gaming

• Official documentation
• Understanding Adaptive Icons
• Designing Adaptive Icons
• Implementing Adaptive Icons

Marius Claret | @mariusclaret | https://mariusclaret.com