Favicons
Les favicons identifient le site dans les onglets navigateur, les raccourcis mobiles, les résultats Google, et la barre de signets. Gradly fournit trois fichiers dans public/ pour couvrir tous les contextes.
| Fichier | Format | Taille | Usage |
|---|---|---|---|
favicon.svg | SVG | 500 o | Navigateurs modernes, scalable, supporte le dark mode |
favicon.png | PNG | 2.5 Ko | Fallback pour navigateurs anciens |
favicon-32.png | PNG 32×32 | 2.5 Ko | Format explicite 32×32 px pour IE et compatibilité |
Déclaration dans le <head> :
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="apple-touch-icon" href="/logo.png" />Apple Touch Icon
Pour le raccourci iOS (mobile / iPad), Apple utilise un format spécifique. Gradly utilise directement logo.png (158 Ko, dimensions natives). Apple se charge du crop et du découpage coins arrondis.
OG image (Open Graph)
L’OG image apparaît dans les prévisualisations de liens sur les réseaux sociaux (LinkedIn, X, Facebook, Slack, WhatsApp). C’est un atout conversion important sur le web social.
| Paramètre | Valeur |
|---|---|
| Fichier | og-image.png |
| Dimensions | 1200 × 630 px (ratio 1.91:1, recommandé) |
| Poids | 63 Ko |
| Format | PNG (compatibilité universelle) |
Déclaration dans le <head> :
<meta property="og:image" content="https://www.gradly.fr/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />Contenu de l’OG image
L’image actuelle met en scène le logo Gradly + baseline sur fond gradient de marque. À reproduire quand une nouvelle version est produite :
- Fond : gradient marque (Primary 900 → Accent 800) avec radial lights
- Logo : version actuelle, centré, hauteur environ 120 px
- Baseline : “Votre outil. Votre poste. Vos données.” sous le logo
- Pas d’URL en dur, le contexte de la plateforme l’ajoute
Test de rendu
Avant de publier un changement d’OG image, vérifier le rendu réel sur chaque plateforme :
- OpenGraph.xyz (simulation multi-plateforme)
- LinkedIn Post Inspector
- X Card Validator
Règles d’usage
- Servir les trois formats de favicon (SVG + PNG + PNG 32)
- Une seule OG image pour le site entier, pas de variantes par page
- Tester le rendu sur LinkedIn avant la mise en prod
- Un favicon uniquement en SVG sans fallback PNG
- Texte minuscule dans l’OG image (non lisible en preview LinkedIn)
- Dimensions OG non conformes (affichage cropé ou déformé)