> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Créer des icônes et bannières pour réseaux sociaux

> Depuis votre site et Drive, générez des icônes de profil et des bannières de couverture au bon format pour chaque réseau.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

À partir de votre site web et de vos fichiers de marque dans Google Drive,
générez des icônes de profil et des bannières de couverture pour X, LinkedIn,
Instagram, Facebook, TikTok et les autres réseaux que vous indiquez. L'Agent
utilise les formats actuels et les zones de sécurité de chaque plateforme pour
que les visages, logos et textes ne soient pas rognés dans le profil en
direct. Conservez un seul système visuel et exportez en PNG. Si un réseau
nécessite un recadrage différent, créez un plan de travail dédié, ne
déformez pas.

## Idéal pour

* Les designers de marque qui ont besoin d'éléments de profil et de couverture pour plusieurs réseaux à la fois.
* Les marketeurs qui ont besoin d'icônes et de bannières prêtes à exporter à partir d'un logo et d'un site existants.

## Connecteurs

<Connectors
  items={[
{
  id: "google-drive",
  name: "Google Drive",
  why: "Logo, couleurs et ressources de marque existantes",
},
]}
/>

## Avant de commencer

Ayez l'URL du site et un logo (ou un dossier de marque) dans Drive. Indiquez
les réseaux dont vous avez besoin. Si le logo est un logotype, précisez si
l'icône doit être un symbole, une lettre, ou les deux.

## Invite à l'Agent

<AiPrompt>
  À partir de ce site web \[URL] et des fichiers de marque dans Google Drive,
  crée un kit social dans Replit Design : icônes de profil et bannières de
  couverture pour X, LinkedIn, Instagram, Facebook et TikTok. Utilise les
  formats officiels actuels et les zones de sécurité de chaque réseau pour que
  les visages, logos et textes ne soient pas rognés. Conserve un seul système
  visuel. Exporte en PNG. Si un réseau nécessite un recadrage différent, crée
  un plan de travail dédié, ne déforme pas.
</AiPrompt>

## À quoi s'attendre

L'Agent lit le site et les ressources Drive, puis construit un plan de travail par
élément avec la taille de pixel correcte. Ensemble type :

* **X :** profil 400×400, en-tête 1500×500
* **LinkedIn :** profil 400×400, bannière 1584×396
* **Instagram :** profil 320×320 (plus 1080×1080 et 1080×1920 si vous voulez des couvertures de publication et de story)
* **Facebook :** profil 320×320, couverture 820×312 (ou 1640×624 en 2×)
* **TikTok :** profil 200×200, couverture 1080×1920

Vérifiez les recadrages sur un profil rond et sur une bannière large avant de
mettre en ligne. Exportez une icône et une bannière, placez-les sur un avatar
rond et un en-tête large, et vérifiez les marges à petite taille.

## Adaptez-le à vos besoins

<AiPrompt>
  Ajoute YouTube (profil 800×800, bannière 2560×1440 avec la zone de sécurité
  1546×423) et Pinterest (profil 165×165, pins 1000×1500).
</AiPrompt>

<AiPrompt>
  Fais des versions claires et sombres de chaque icône. Garde les bannières
  dans la couleur principale du site.
</AiPrompt>

## Dépannage

* **Logos ou visages rognés :** vérifiez chaque élément sur un profil rond et une bannière large. Demandez à l'Agent de respecter les zones de sécurité et de créer un plan de travail dédié pour un recadrage différent. Ne déformez pas.
* **Les formats ne correspondent pas au réseau :** nommez les réseaux dont vous avez besoin et demandez à l'Agent d'utiliser les formats officiels actuels de chacun. Vérifiez à nouveau avant de mettre en ligne ; les réseaux changent ces formats.

## Voir aussi

<CardGroup cols={2}>
  <Card title="Concevoir une page de destination" href="/fr/use-cases/design-landing-page">
    Les mêmes fichiers de marque Google Drive pour une page de liste d'attente ou de lancement.
  </Card>

  <Card title="Créer un pitch deck pour investisseurs" href="/fr/use-cases/pitch-deck-from-website">
    Les mêmes fichiers de marque Google Drive pour des diapositives.
  </Card>
</CardGroup>