59 lines
2.7 KiB
Markdown
59 lines
2.7 KiB
Markdown
# Problème : favicon.ico retourne 404
|
|
|
|
## Date
|
|
2025-01-27
|
|
|
|
## Problème
|
|
Le navigateur demandait automatiquement `/favicon.ico` mais le fichier n'existait pas dans le dossier `public/`, causant une erreur 404.
|
|
|
|
## Symptômes
|
|
- Console navigateur : `Failed to load resource: the server responded with a status of 404 ()`
|
|
- Erreur répétée sur toutes les pages : `favicon.ico:1 Failed to load resource: the server responded with a status of 404 ()`
|
|
- Aucun favicon affiché dans les onglets du navigateur
|
|
|
|
## Root cause
|
|
Le fichier `favicon.ico` n'existait pas dans le dossier `public/`, mais plusieurs pages référençaient `/favicon.ico` dans leur balise `<Head>` :
|
|
- `components/HomeView.tsx`
|
|
- `pages/presentation.tsx`
|
|
- `pages/docs.tsx`
|
|
|
|
Les navigateurs demandent automatiquement `/favicon.ico` même si une autre icône est spécifiée, ce qui causait l'erreur 404.
|
|
|
|
## Impact
|
|
- Erreurs 404 répétées dans les logs du serveur
|
|
- Aucun favicon affiché dans les onglets du navigateur
|
|
- Expérience utilisateur dégradée
|
|
|
|
## Correctifs
|
|
1. Création d'un fichier `favicon.svg` minimal dans `public/`
|
|
2. Mise à jour des références dans les fichiers pour pointer vers `/favicon.svg` au lieu de `/favicon.ico`
|
|
3. Ajout du type MIME `image/svg+xml` dans les balises `<link>`
|
|
|
|
## Modifications
|
|
- **Fichier créé** : `public/favicon.svg` (SVG minimal avec un rectangle cyan)
|
|
- **Fichiers modifiés** :
|
|
- `components/HomeView.tsx` : `<link rel="icon" href="/favicon.svg" type="image/svg+xml" />`
|
|
- `pages/presentation.tsx` : `<link rel="icon" href="/favicon.svg" type="image/svg+xml" />`
|
|
- `pages/docs.tsx` : `<link rel="icon" href="/favicon.svg" type="image/svg+xml" />`
|
|
|
|
## Modalités de déploiement
|
|
1. Les modifications sont dans le code source
|
|
2. Le fichier `favicon.svg` est servi automatiquement par Next.js depuis le dossier `public/`
|
|
3. Rebuild de l'application : `npm run build`
|
|
4. Redémarrage du service Next.js si nécessaire
|
|
5. Aucune configuration supplémentaire nécessaire
|
|
|
|
## Modalités d'analyse
|
|
Pour vérifier si le problème existe :
|
|
1. Vérifier la présence du fichier `public/favicon.svg`
|
|
2. Vérifier les références dans les fichiers HTML (balises `<link rel="icon">`)
|
|
3. Tester dans le navigateur : accéder à `/favicon.svg` et vérifier qu'il est servi
|
|
4. Vérifier les logs du serveur pour les erreurs 404 sur `/favicon.ico`
|
|
|
|
## Notes
|
|
- Les navigateurs modernes supportent les SVG comme favicon
|
|
- SVG est plus léger et plus flexible qu'un fichier .ico
|
|
- Si nécessaire, on peut créer un fichier `.ico` en plus pour la compatibilité avec les anciens navigateurs
|
|
- Le favicon SVG actuel est minimal (rectangle cyan) et peut être remplacé par un design plus élaboré si nécessaire
|
|
|