Webfiles and Metatags: Upload and serve app icons

[leandrocp]

Managing app icons may be complex and time consuming for end users. We want to 1) have a page on beacon admin to upload icons, and 2) generate the html tags for displaying such icons.

upload icons on beacon admin

Ideally users would upload a high-res .svg file that beacon can convert to:

• 1 favicon.ico with 2 layers 32x32 and 16x16
• apple-touch-icon.png size 180x180
• icon-192.png size 192x192
• icon-512.png size 512x512
• optimized icon.svg

We may allow users uploading individual files, either to overwrite the generated one or because users may not have the high-res .svg file.

display icons

The expected tags are:

<link rel="icon" href="{site_prefix}/favicon.ico" sizes="any">
<link rel="icon" href="{site_prefix}/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="{site_prefix}/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="{site_prefix}/manifest.webmanifest">

Note that {site_prefix} has to be replaced with router(conn).__beacon_site_prefix__(site), see asset_path/2 for example.

Refs

Read https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs for the full explanation.

Extra:

• https://web.dev/building-an-adaptive-favicon/
• https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html