QR Code Generator Introduction
Un logo au centre d'un code QR indique à qui appartient le code avant même qu'il soit scanné. QR Code Generator place une image au milieu du code et retire les points situés en dessous, et la correction d'erreurs intégrée au code QR restaure les données que l'image recouvre. Cet article montre comment charger un logo, ajuster sa taille et préserver la lisibilité du code.
Avant de commencer
Préparez le fichier image :
- les formats pris en charge sont JPG, JPEG, PNG et SVG ;
- pour un résultat optimal, utilisez une image d'au moins 300x300 pixels ;
- un logo carré ou presque carré donne le meilleur résultat — un logo large n'occupe qu'une bande étroite, et ses détails deviennent minuscules ;
- privilégiez le format PNG ou SVG avec un arrière-plan transparent, ou donnez au logo son propre fond uni.
Étape 1. Charger le logo
- Ouvrez la page contenant le composant WebPart. Pour conserver le logo pour tous les visiteurs, ouvrez la page en mode édition.
- Saisissez les données du code dans l'un des onglets, afin que l'aperçu affiche un code QR.
- Développez la section Logo sous les onglets.
- Cliquez sur Charger une image et sélectionnez le fichier.
Le logo apparaît au centre du code dans l'aperçu, et une miniature de l'image chargée s'affiche dans la section Logo. Si un fichier d'un autre type est sélectionné, la section affiche le message Formats de fichier pris en charge : JPG, JPEG, PNG, SVG. et le code ne change pas.
Étape 2. Ajuster la taille et la marge
Une fois l'image chargée, deux curseurs apparaissent dans la section Logo.
| Paramètre | Plage | Valeur par défaut | Rôle |
|---|---|---|---|
| Logo size (taille du logo) | 0.1 – 0.5 | 0.4 | La part du code que le logo peut occuper. Plus la valeur est élevée, plus le logo est grand et plus il recouvre de points. |
| Logo margin (marge du logo) | 0 – 20 | 5 | L'espace vide entre le logo et les points les plus proches. Une marge sépare le logo du motif et le rend plus visible. |
Déplacez les curseurs en observant l'aperçu. Commencez par un petit logo et ne l'agrandissez que tant que le code se scanne encore sans hésitation.
Étape 3. Augmenter le niveau de correction d'erreurs
Le logo recouvre une partie des données, et le lecteur restaure cette partie à partir des données redondantes du code. La quantité de redondance se règle dans la section Error Correction (correction d'erreurs).
- Développez la section Error Correction.
- Sélectionnez Élevé pour un grand logo. La valeur par défaut, Quartile, suffit pour un petit logo.
Les niveaux Faible et Moyen laissent une marge trop réduite, et un code avec logo risque de ne plus pouvoir être scanné.
❗ Important
L'aperçu ne vous avertit pas lorsque le logo est trop grand. Scannez toujours le code avec un smartphone après avoir modifié le logo, sa taille ou le niveau de correction d'erreurs. Si le code n'est pas lu, réduisez Logo size, augmentez Error Correction ou raccourcissez les données encodées.
Étape 4. Vérifier et enregistrer
- Scannez l'aperçu avec un smartphone et assurez-vous que le code ouvre bien ce qu'il doit ouvrir.
- Récupérez le résultat avec Télécharger ou Copier. Le logo est inclus dans l'image, quel que soit le format.
- Si la page est en mode édition, enregistrez-la ou republiez-la. Le logo est enregistré avec la page dans la configuration du composant WebPart : les visiteurs voient donc le code avec le logo.
📝 Remarque
L'image est stockée dans la configuration du composant WebPart, et non dans une bibliothèque du site : personne n'a donc besoin d'autorisations supplémentaires pour la voir. Pour la même raison, évitez les fichiers très volumineux : un fichier de plusieurs mégaoctets alourdit la page. Un logo de quelques centaines de pixels suffit.
Remplacer ou supprimer le logo
- Pour remplacer le logo, cliquez à nouveau sur Charger une image et sélectionnez un autre fichier. Les paramètres de taille et de marge sont conservés.
- Pour supprimer le logo, cliquez sur Supprimer l'image. Les points réapparaissent au centre du code.
Résumé
Pour apposer votre marque sur un code QR, chargez un logo dans la section Logo, ajustez-le avec Logo size et Logo margin, et réglez Error Correction sur Élevé pour un grand logo. Le seul test fiable est un scan avec un vrai smartphone.
💡 Astuce
Pour accorder les couleurs du code à celles du logo, consultez KB10265. Personnaliser l'apparence du code QR : forme, couleurs, dégradé et coins.
