📁 Logos Directory

Ce dossier contient les fichiers de logo pour l'application Thé Tip Top.

📝 Instructions pour ajouter votre logo

Étape 1 : Préparer votre logo

Placez vos fichiers de logo dans ce dossier. Formats recommandés :

logo.svg - Format vectoriel (recommandé)
- Taille : Scalable
- Avantages : Qualité parfaite à toutes les tailles, fichier léger
logo.png - Format PNG avec fond transparent
- Taille recommandée : 500x500px minimum
- Avantages : Compatible partout, fond transparent
logo-white.svg ou logo-white.png - Version blanche pour le footer
- Pour affichage sur fond sombre

Étape 2 : Nommer vos fichiers

public/logos/
├── logo.svg          # Logo principal (couleur)
├── logo.png          # Alternative PNG
├── logo-white.svg    # Logo blanc pour footer
├── logo-icon.svg     # Icône seule (favicon)
└── README.md         # Ce fichier

Étape 3 : Le code est déjà configuré !

Les fichiers Header.tsx et Footer.tsx sont déjà configurés pour utiliser automatiquement votre logo.

Le système utilise :

logo.svg si disponible (priorité)
logo.png en alternative
🍵 Emoji par défaut si aucun logo

Formats de fichier acceptés

✅ SVG (recommandé) - Scalable, léger
✅ PNG - Avec transparence
✅ WEBP - Format moderne
⚠️ JPG - Moins recommandé (pas de transparence)

Dimensions recommandées

Logo principal (Header):

Largeur : 150-200px
Hauteur : 40-60px
Format : Horizontal ou carré

Logo footer:

Largeur : 120-150px
Hauteur : 40-50px

Favicon/Icon:

512x512px (carré)
Format : SVG ou PNG

🎨 Exemple de création rapide

Si vous n'avez pas encore de logo, vous pouvez :

Créer un SVG simple avec un éditeur comme :
- Figma (gratuit)
- Canva (gratuit)
- Inkscape (gratuit, open-source)
Utiliser un générateur en ligne :
- Canva Logo Maker
- Looka
- Hatchful by Shopify
Commander un logo sur :
- Fiverr
- 99designs
- Upwork

🔧 Comment vérifier si ça fonctionne

Placez votre logo dans ce dossier
Rafraîchissez la page (F5)
Le logo devrait apparaître dans le Header et Footer

Si vous voyez toujours 🍵, vérifiez :

Le nom du fichier (logo.svg ou logo.png)
Le chemin (/public/logos/logo.svg)
La console du navigateur pour les erreurs

💡 Astuce

Pour un meilleur rendu, utilisez un logo SVG optimisé :

# Installer SVGO pour optimiser votre SVG
npm install -g svgo

# Optimiser votre logo
svgo logo.svg -o logo-optimized.svg

2.6 KiB Raw Permalink Blame History