Logo dans l’en-tête de votre site web : quelle taille, quel format et quelle version ?

Dans l’en-tête d’un site web, on utilise le plus souvent la version horizontale du logo, en SVG quand c’est possible, affichée à une hauteur d’environ 40 à 80 pixels sur ordinateur et un peu moins sur mobile. Ces repères varient selon le thème et la forme du logo, mais une règle ne change pas : le logo se règle séparément pour chaque taille d’écran.

Beaucoup de propriétaires de PME téléversent le fichier qu’ils ont sous la main, souvent un JPEG reçu par courriel, et laissent le thème décider du reste. Le résultat est connu : un logo minuscule sur téléphone, flou sur un grand écran, ou entouré d’un rectangle blanc sur un en-tête foncé. Voici comment choisir la bonne version, le bon format et les bons réglages pour que votre logo soit net partout.

Quelle version du logo mettre dans l’en-tête d’un site ?

Un en-tête de site est une bande large et basse. La version de logo qui s’y installe le mieux est donc la version horizontale, où le symbole est placé à gauche du nom. Elle occupe la largeur disponible sans faire grossir l’en-tête en hauteur, ce qui laisse plus de place au contenu visible sans défiler.

La version empilée, avec le symbole au-dessus du nom, fonctionne mal dans un en-tête classique. Pour qu’elle reste lisible, il faut l’afficher plus haute, et l’en-tête devient épais. C’est un défaut fréquent sur les sites de restaurants et de boutiques, où l’on reprend tel quel le logo de l’enseigne ou du menu.

Le symbole seul, sans le nom, a aussi sa place : il sert d’icône de navigateur et peut remplacer le logo complet dans un en-tête très réduit sur mobile, à condition que la marque soit déjà bien connue. Pour une entreprise qui commence, le nom doit rester visible.

Si votre logo n’existe qu’en une seule version, c’est le bon moment pour demander les déclinaisons qui manquent. Une création de logo professionnelle prévoit en général une version horizontale, une version empilée, un symbole seul et des versions pour fond clair et pour fond foncé.

SVG ou PNG : quel format choisir pour le web ?

Le SVG est un format vectoriel. Le logo y est décrit par des formes et non par des pixels, ce qui lui permet de rester parfaitement net à n’importe quelle taille et sur n’importe quel écran. Il est aussi très léger pour un logo simple. C’est le format idéal pour un en-tête, à condition que votre plateforme l’accepte : certains outils de création de site le permettent directement, d’autres demandent un réglage ou une extension.

Le PNG est le meilleur plan de secours. Il gère la transparence, ce qui permet de poser le logo sur un fond coloré sans rectangle blanc autour. Pour qu’il reste net, préparez-le au double de sa taille d’affichage : un logo affiché à 200 pixels de large sera exporté à 400 pixels.

Le JPEG est à éviter pour un logo. Il ne gère pas la transparence et ajoute de petites taches autour des contours nets, surtout dans le texte.

Pour obtenir un bon SVG, il faut partir d’un vrai fichier vectoriel. Un PNG simplement converti en SVG reste une image en pixels déguisée. Si vous ne savez pas ce que contient votre fichier, notre vérificateur de logo vectoriel vous l’indique en quelques clics.

Quelle taille donner au logo sur ordinateur et sur mobile ?

Il n’existe pas de taille universelle, mais des repères couramment utilisés :

• Sur ordinateur : une hauteur d’affichage d’environ 40 à 80 pixels pour un logo horizontal, selon la hauteur de l’en-tête et la longueur du nom.
• Sur mobile : une hauteur d’environ 30 à 50 pixels, en laissant assez de place au bouton du menu et, souvent, à un bouton d’appel.
• La largeur : elle découle de la hauteur. Un nom très long donnera un logo très large, qu’il faudra parfois réduire davantage sur mobile.

Réglez la hauteur plutôt que la largeur. Deux logos de même hauteur paraissent équilibrés dans un en-tête, même si l’un est beaucoup plus long que l’autre. La plupart des thèmes permettent de fixer cette valeur séparément pour chaque taille d’écran.

Le bon test reste l’œil. Sur téléphone, le nom doit se lire sans zoomer, à bout de bras. Sur ordinateur, le logo doit être clairement visible sans dominer le titre de la page. Un entrepreneur en rénovation ou une clinique dentaire a tout intérêt à ce que son nom se lise du premier coup, car c’est souvent lui que le visiteur retient pour revenir.

Pourquoi le logo paraît flou sur certains écrans

Un logo net sur votre ordinateur peut paraître flou sur un téléphone récent ou un grand écran haute résolution. Ces écrans affichent deux ou trois pixels physiques là où un écran ordinaire n’en affiche qu’un. Un PNG exporté à sa taille d’affichage exacte est alors étiré, et les contours deviennent mous.

Les causes les plus fréquentes :

1. Un fichier trop petit, exporté à la taille d’affichage au lieu du double.
2. Une image recompressée par le thème ou par une extension d’optimisation qui réduit trop la qualité.
3. Un JPEG utilisé au lieu d’un PNG ou d’un SVG.
4. Un logo récupéré d’une capture d’écran ou d’une publication sur les réseaux sociaux, déjà dégradé à la source.

La solution durable est le fichier SVG. À défaut, exportez un PNG au double ou au triple de la taille d’affichage à partir du fichier original, puis vérifiez que votre extension d’optimisation ne le recompresse pas de façon excessive.

En-tête fixe ou qui rétrécit : adapter le logo

Beaucoup de sites utilisent un en-tête fixe, qui reste en haut de l’écran pendant le défilement. Certains le font rétrécir dès que l’on descend dans la page. Dans ce cas, le logo doit rester lisible dans sa version réduite, qui peut être nettement plus petite que la version de départ.

Deux approches fonctionnent bien :

• Réduire le même logo, en vérifiant que le nom reste lisible à la plus petite taille. C’est simple, mais cela marche surtout avec un logo au nom court.
• Changer de version pendant le défilement : logo horizontal complet en haut de page, puis symbole seul ou version compacte dans l’en-tête réduit.

Évitez les effets d’animation trop marqués lors de ce changement. Le visiteur doit sentir que l’en-tête s’adapte, pas que le logo saute ou clignote. Vérifiez aussi que l’en-tête fixe ne cache pas une trop grande partie de l’écran sur mobile, où chaque ligne compte.

Le logo dans le pied de page et sur fond foncé

Le pied de page reprend souvent le logo, parfois sur un fond foncé. Si vous utilisez le même fichier que dans l’en-tête, un logo foncé deviendra illisible sur ce fond. Il faut alors une version claire, en blanc ou dans une teinte pâle de votre palette, prévue dès la conception du logo.

Quelques bonnes pratiques :

• Préparez une version pour fond clair et une version pour fond foncé, dans le même format et aux mêmes proportions.
• Ne vous contentez pas d’inverser les couleurs automatiquement : certains symboles perdent leur sens une fois inversés.
• Affichez le logo du pied de page un peu plus petit que celui de l’en-tête, pour qu’il signe la page sans la concurrencer.
• Pensez au mode sombre de certains navigateurs et appareils, qui peut assombrir le fond de l’en-tête sans prévenir.

Ces versions servent bien au-delà du site : publications sur les réseaux sociaux, signature de courriel, présentations et documents à fond coloré. Les avoir en main dès le lancement évite de bricoler une solution à chaque nouveau support.

Questions fréquentes

Le logo de l’en-tête doit-il mener vers la page d’accueil ?

Oui, c’est une convention que la plupart des visiteurs connaissent. Ils cliquent sur le logo pour revenir à l’accueil, surtout sur mobile. Presque tous les thèmes le font automatiquement, mais vérifiez-le, en particulier si vous avez remplacé le logo par une image personnalisée. Ajoutez aussi un texte de remplacement qui contient le nom de l’entreprise, pour l’accessibilité et pour les moteurs de recherche.

Peut-on utiliser un logo animé dans l’en-tête ?

C’est possible, mais avec retenue. Une animation discrète au chargement de la page peut renforcer une marque créative, comme un studio ou une boutique de mode. Une animation qui tourne en boucle détourne l’attention du contenu et fatigue le visiteur. Si vous en utilisez une, prévoyez une version fixe pour les personnes qui ont désactivé les animations dans les réglages de leur appareil.

Où placer le logo dans l’en-tête : à gauche ou au centre ?

À gauche dans la grande majorité des cas, car c’est là que le regard commence la lecture et que les visiteurs s’attendent à le trouver. Le logo centré convient à certains sites de marques très visuelles, comme une boutique ou un restaurant haut de gamme, à condition que le menu reste facile à repérer. Sur mobile, le logo se place généralement à gauche et le bouton du menu à droite.

Le fichier du logo influence-t-il la vitesse du site ?

Un peu, et surtout s’il est mal préparé. Un PNG de plusieurs mégaoctets, exporté sans optimisation, ralentit l’affichage de toutes les pages, puisque le logo apparaît partout. Un SVG simple ou un PNG bien compressé ne pèse que quelques kilo-octets et n’a pratiquement aucun effet. Vérifiez le poids du fichier avant de le téléverser, et gardez l’original haute qualité à part.

Un logo net sur tout votre site avec Conception-Logo.com

Un en-tête soigné commence par les bons fichiers et les bons réglages. Notre équipe prépare les déclinaisons de votre logo pour le web et les intègre correctement à votre site, sur ordinateur comme sur mobile. Découvrez notre service de création de site internet et appelez-nous au 514 665-6715 pour une soumission sans engagement.