Ajout du web manifest et des favicons multi-tailles

Génération des favicons 16x16, 32x32, 180x180 (apple-touch-icon), 192x192 et 512x512 depuis jalil-2.jpg. Création du site.webmanifest. Ajout de theme-color et remplacement de l'ancien favicon dans les deux layouts.
This commit is contained in:
Jalil Arfaoui 2026-02-21 15:10:38 +01:00
parent 91296ecdf5
commit d44f190845
8 changed files with 29 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 620 KiB

BIN
public/apple-touch-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

BIN
public/favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 873 B

BIN
public/favicon-32x32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

19
public/site.webmanifest Normal file
View file

@ -0,0 +1,19 @@
{
"name": "Jalil Arfaoui",
"short_name": "Jalil",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

View file

@ -40,7 +40,11 @@ const {
document.documentElement.classList.add('dark') document.documentElement.classList.add('dark')
</script> </script>
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#ffffff" />
<link rel="alternate" type="application/rss+xml" title="Jalil Arfaoui — Photo Blog" href="/rss.xml" /> <link rel="alternate" type="application/rss+xml" title="Jalil Arfaoui — Photo Blog" href="/rss.xml" />
<!-- Privacy-friendly analytics by Plausible --> <!-- Privacy-friendly analytics by Plausible -->
<script is:inline async src="https://plausible.io/js/pa-fP2pF1VtXKDIjQczHCynl.js"></script> <script is:inline async src="https://plausible.io/js/pa-fP2pF1VtXKDIjQczHCynl.js"></script>

View file

@ -89,7 +89,11 @@ const locale = pathname.startsWith("/en")
color: var(--facet-code-color) !important; color: var(--facet-code-color) !important;
} }
</style> </style>
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#ffffff" />
<link rel="alternate" type="application/rss+xml" title="Jalil Arfaoui — Photo Blog" href="/rss.xml" /> <link rel="alternate" type="application/rss+xml" title="Jalil Arfaoui — Photo Blog" href="/rss.xml" />
<script src="../assets/css/main.css"></script> <script src="../assets/css/main.css"></script>
<!-- Privacy-friendly analytics by Plausible --> <!-- Privacy-friendly analytics by Plausible -->