Skip to content

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.

License

Notifications You must be signed in to change notification settings

mariusclaret/adapticon

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

Adaptive Icons Demo Gif

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-scheme media 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

Source Structure

Examples by Cristian Ruiz

Reference

Author

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

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published