feat(portal-shell): full favicon set + PWA manifest
Drop in the realfavicongenerator-style asset bundle under `public/favicons/`: SVG primary favicon, PNG fallback (96×96), legacy ICO, Apple touch icon (180×180), and a Web App Manifest with 192/512 maskable PNGs for Android adaptive icons. Wire them in index.html via the standard `<link rel="icon|apple-touch-icon|manifest">` block and add a matching `<meta name="theme-color">` so the mobile chrome tints align with the manifest. PWA install banner reads "APF Portal" (short_name "Portal") on home-screen and install prompts. theme + background colors stay white to match the app header. The old root-level `favicon.ico` is replaced by the one under `public/favicons/` (referenced via `<link rel="shortcut icon">`).
Julien Gautier
|
Before Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 92 KiB |
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "APF Portal",
|
||||||
|
"short_name": "Portal",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/favicons/web-app-manifest-192x192.png?v=20260511",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/favicons/web-app-manifest-512x512.png?v=20260511",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png",
|
||||||
|
"purpose": "maskable"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"theme_color": "#ffffff",
|
||||||
|
"background_color": "#ffffff",
|
||||||
|
"display": "standalone"
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 57 KiB |
@@ -2,10 +2,22 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>portal-shell</title>
|
<title>APF Portal</title>
|
||||||
<base href="/" />
|
<base href="/" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
|
||||||
|
<!-- Favicons + PWA manifest. SVG is the modern default; the PNG /
|
||||||
|
ICO entries cover older browsers and pinned-tab contexts. The
|
||||||
|
"180x180" Apple touch icon serves iOS home-screen installs.
|
||||||
|
The manifest unlocks Add-to-Home-Screen / Install on Android +
|
||||||
|
desktop Chromium. theme-color tints the browser chrome on
|
||||||
|
mobile and matches the manifest's value. -->
|
||||||
|
<link rel="icon" type="image/svg+xml" href="favicons/favicon.svg" />
|
||||||
|
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png" />
|
||||||
|
<link rel="shortcut icon" href="favicons/favicon.ico" />
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png" />
|
||||||
|
<link rel="manifest" href="favicons/site.webmanifest" />
|
||||||
|
<meta name="theme-color" content="#ffffff" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-root></app-root>
|
<app-root></app-root>
|
||||||
|
|||||||