# Importer sa marque depuis son site : un kit de marque en une étape
[Canonical HTML page](https://gradiently.design/fr/guide/import-brand-from-website)
Votre site connaît déjà votre nom, votre accroche en une ligne, votre couleur et votre icône. Un bouton sur la page Marque les lit, et vous décidez de ce que vous gardez.
## The short version
- Gradiently peut lire le site web d’une marque et proposer son nom, sa description, sa couleur de thème et son icône pour le kit de marque.
- Rien n’est ajouté automatiquement : chaque élément trouvé apparaît comme une suggestion que vous pouvez utiliser ou ignorer.
- Le nom vient des balises de nom du site, la description de sa meta description, la couleur de sa balise theme-color et l’icône de son icône tactile ou de son favicon.
- Un site sans balise theme-color ou avec seulement une icône SVG donne moins de suggestions : quelques lignes dans son head HTML améliorent le résultat.
- La lecture d’un site fait partie du kit de marque, inclus dans Gradiently Pro.
Pour **importer votre marque depuis votre site** dans Gradiently, ouvrez la page Marque, saisissez votre adresse dans **Site web** sous Identité et choisissez **Lire le site**. Gradiently récupère le nom du site, sa description, sa couleur de thème et son icône, puis propose chacun : utiliser le nom, utiliser la description comme slogan ou pour À propos, ajouter la couleur à vos couleurs de marque, ajouter l’icône comme logo. Vous choisissez ce qui entre. Cela prend quelques secondes et vous épargne la partie la plus fastidieuse de la configuration d’un kit.
## Importer votre marque depuis un site web
1. **Ouvrez la page Marque** Choisissez la marque à remplir. Chaque marque de votre compte a son propre kit : vérifiez que vous êtes dans la bonne.
2. **Saisissez le site web** Sous **Identité**, saisissez l’adresse dans **Site web**. Un simple domaine comme `crumb.co` suffit ; le https est inutile.
3. **Choisissez Lire le site** Gradiently consulte la page une fois, lit son head et récupère son icône. Le bouton affiche **Lecture…** pendant le traitement.
4. **Utilisez ce qui convient** Chaque élément trouvé apparaît avec son propre bouton : **Utiliser « Crumb » comme nom**, **Utiliser sa description comme slogan**, **Utiliser sa description pour À propos**, **Ajouter sa couleur**, **Ajouter son icône comme logo**. Ignorez ce qui ne va pas.
5. **Relisez après des changements** Si vous mettez votre site à jour, choisissez **Relire**. Quand tout ce qui est utile se trouve déjà dans le kit, la page vous l’indique.
La couleur du site réapparaît aussi plus tard comme suggestion dans la section **Couleurs**, accompagnée du nom de votre site : vous pouvez l’y ajouter si vous l’avez ignorée la première fois.
## Ce que Gradiently lit sur votre site
Il ne lit que la page d’accueil publique à l’adresse indiquée, et seulement les parties qui décrivent la marque. Il ne parcourt pas d’autres pages, ne se connecte pas et ne lit pas votre contenu.
| Suggestion du kit | Provenance | Devient |
| --- | --- | --- |
| Nom | `og:site_name`, `application-name` ou le titre d’app web Apple | Nom de la marque |
| Description | `meta name="description"`, ou la description Open Graph | Slogan ou À propos |
| Couleur | `meta name="theme-color"` en hex ou rgb() | Une couleur de marque |
| Icône | La plus grande `apple-touch-icon`, les autres icônes matricielles, puis `/favicon.ico` | Un logo, jusqu’à 256 px |
Quatre suggestions et leurs sources. L’icône est redessinée en PNG de 256 px maximum avant que Gradiently la conserve.
Deux détails sont bons à savoir. Les icônes SVG sont ignorées, car Gradiently ne pixellise pas le SVG de quelqu’un d’autre : un site qui n’a qu’un favicon SVG ne donne donc pas d’icône. Et la couleur doit être une simple valeur hex ou rgb() ; une variable CSS dans la balise theme-color ne peut pas être lue.
## Rendre votre site facile à lire
Si Lire le site renvoie peu de choses, la solution tient en général en quelques lignes dans le head HTML de votre site. Elles servent bien au-delà de Gradiently : les navigateurs utilisent theme-color pour la barre d’adresse sur téléphone, et les aperçus de liens utilisent vos balises Open Graph. [Les balises Open Graph](https://gradiently.design/fr/guide/open-graph-tags) et [le design de favicon](https://gradiently.design/fr/guide/favicon-design) vont plus loin.
```html
Crumb · Sourdough bakery in Leeds
```
Tout ce que cherche Lire le site : un nom de site, une description en une ligne, une couleur de thème en hex et une icône tactile matricielle en 180×180.
### Donne peu
- Pas de meta description, ou une description bourrée de mots-clés
- Pas de balise theme-color, ou une variable CSS dedans
- Seulement un favicon SVG
- Une page d’accueil qui redirige vers un écran de connexion
### Donne un kit bien lancé
- Une phrase honnête sur ce que vous faites
- Une couleur de thème en hex assortie à votre logo
- Une icône tactile PNG en 180×180
- Une page d’accueil publique qui se charge vite
## Que faire après l’import
L’import vous donne une base, pas un kit terminé. Quatre choses méritent d’être faites ensuite, dans cet ordre.
1. **Importez de vrais fichiers de logo.** Un favicon est minuscule et carré. Ajoutez votre logo complet en PNG, JPEG, WebP, GIF ou AVIF, un pour les fonds sombres et un pour les fonds clairs ; voir [un logo sur un fond en dégradé](https://gradiently.design/fr/guide/logo-on-gradient-background).
2. **Complétez les couleurs.** Une couleur de thème est un début. Ajoutez une couleur de soutien ainsi que vos neutres les plus sombres et les plus clairs ; [comment choisir ses couleurs de marque](https://gradiently.design/fr/guide/how-to-choose-brand-colors) vous aide.
3. **Réglez vos polices.** Choisissez une police de titre et une police de texte, ou [importez vos propres fichiers de police](https://gradiently.design/fr/guide/custom-fonts-upload).
4. **Écrivez la voix.** Une description de site dit au Designer ce que vous êtes, pas comment vous parlez. Remplissez Ton, Avec vos mots, Toujours et Jamais ; [la voix de marque pour l’IA](https://gradiently.design/fr/guide/brand-kit-voice) montre comment.
Une publication Instagram présentant Crumb, une boulangerie au levain, avec le nom et la description lus sur son site
Une première publication juste après l’import : nom et description tirés du site.
La même présentation de Crumb en story Instagram verticale
La même marque en story 1080×1920, prête une fois le kit configuré.
## Quand la lecture d’un site échoue
Si vous voyez **Nous n’avons pas pu lire ce site web**, la page n’a pas répondu à temps, a renvoyé une erreur ou a bloqué la requête. Vérifiez que l’adresse s’ouvre dans une fenêtre de navigation privée. Les adresses qui pointent vers un réseau privé, une page de connexion ou un fichier plutôt qu’une page web sont refusées volontairement. Un site derrière une protection anti-robots stricte peut ne jamais être lisible ; saisissez alors les informations à la main, ce qui prend deux minutes.
> **Qui peut le faire** La lecture d’un site fait partie du kit de marque, inclus dans Pro. Dans un espace de travail partagé, seuls les propriétaires et administrateurs peuvent modifier un kit de marque. Gradiently lit le site une fois, à votre demande, sans cookies ni identifiants.
Une fois le kit rempli, le Studio place vos couleurs en tête de chaque sélecteur, propose vos logos et démarre les créations dans vos polices, et le Designer écrit à partir de votre description. Associez-le à un Mark que personne d’autre ne peut utiliser et vos publications vous ressemblent dès la première. Le reste du kit est détaillé dans [la configuration du kit de marque](https://gradiently.design/fr/guide/brand-kit-setup).
## FAQ
### Comment récupérer mes couleurs de marque depuis mon site ?
Dans Gradiently, saisissez votre site sur la page Marque et choisissez Lire le site. Si votre site a une balise theme-color, sa couleur est proposée comme couleur de marque.
### Pourquoi Lire le site n’a-t-il pas trouvé mon logo ?
Il cherche des icônes matricielles comme une apple-touch-icon ou favicon.ico et ignore les icônes SVG. Ajoutez une icône tactile PNG à votre site, ou importez directement votre logo.
### L’import écrase-t-il mon kit de marque ?
Non. Chaque élément trouvé est proposé comme suggestion, et rien ne change dans le kit tant que vous ne choisissez pas de l’utiliser.
### Puis-je importer une marque depuis le site de quelqu’un d’autre ?
L’outil lit n’importe quel site public, mais utilisez-le pour les marques que vous gérez ou pour lesquelles vous travaillez. Le kit doit contenir des éléments que vous avez le droit d’utiliser.
### Et si mon site n’a pas de description ?
Lire le site proposera quand même ce qu’il trouve. Écrivez votre slogan et votre À propos à la main, et pensez à ajouter une meta description à votre site, ce qui aide aussi dans les résultats de recherche.