--- title: "Utiliser une image personnalisée comme icône de vignette" description: "Comment remplacer l'icône d'une vignette du composant WebPart Vitextra Smart Tiles par votre propre image : l'option Custom image, saisie de l'URL d'une image ou choix d'une image dans une bibliothèque de documents du site, exigences relatives à l'image, dimensionnement et suppression de l'image pour revenir à une icône." url: https://vitextra.com/fr/support/kb/10244 language: fr published: 2026-10-13 modified: 2026-10-13 author: "Lidija Reising" tags: ["icône de vignette personnalisée", "vignette avec logo d'entreprise SharePoint", "image à la place d'une icône", "image personnalisée Smart Tiles", "icône de vignette depuis une bibliothèque de documents", "icône SVG vignette SharePoint", "icône PNG composant WebPart", "Vitextra Smart Tiles", "image de marque navigation SharePoint", "URL d'image d'icône"] --- # Utiliser une image personnalisée comme icône de vignette Comment remplacer l'icône d'une vignette du composant WebPart Vitextra Smart Tiles par votre propre image : l'option Custom image, saisie de l'URL d'une image ou choix d'une image dans une bibliothèque de documents du site, exigences relatives à l'image, dimensionnement et suppression de l'image pour revenir à une icône. ## Introduction Les cinq jeux d'icônes de [Smart Tiles](https://vitextra.com/fr/products/smart-tiles) couvrent la plupart des liens d'intranet, mais certaines destinations méritent leur propre image : le logo d'un système partenaire, la marque d'un projet interne, une icône dessinée dans le style de l'entreprise. Pour ces cas, le composant WebPart accepte n'importe quelle image à la place de l'icône. Cet article explique comment attribuer l'image, ce qu'il faut préparer et comment l'image est affichée. ## Attribuer une image 1. Ouvrez la page en mode édition et cliquez sur le bouton **…** de la vignette. 2. Pointez sur **Tile Icon** (Icône de la vignette) et choisissez **Custom image** (Image personnalisée). La boîte de dialogue **Image** s'ouvre. 3. Fournissez l'image de l'une des deux manières suivantes : - saisissez ou collez son adresse dans le champ **Image URL**, ou - parcourez les bibliothèques du site dans la liste située sous le champ : cliquez sur une bibliothèque, ouvrez des dossiers si nécessaire et cliquez sur l'image. Son adresse est insérée dans le champ. 4. Cliquez sur **Apply** (Appliquer). ![La boîte de dialogue Image avec un logo choisi dans la bibliothèque Site Assets](https://static.vitextra.com/articles/10244/image-dialog-fr.png) *La boîte de dialogue Image avec un logo choisi dans la bibliothèque Site Assets* L'image remplace immédiatement l'icône sur la vignette. Dans le sous-menu **Tile Icon**, l'élément **Custom image** est désormais marqué d'une coche. ### Le champ Image URL Le champ accepte une adresse absolue commençant par `https://` ou un chemin commençant par `/` — par exemple `/sites/intranet/SiteAssets/logos/sap.svg`. Les autres formes sont refusées avec un message sous le champ, et le bouton **Apply** reste désactivé. ### Parcourir les bibliothèques du site La liste située sous le champ commence par les ::bibliothèques de documents:: du site actuel. Cliquez sur une bibliothèque pour afficher ses dossiers et les images qu'elle contient sous forme de miniatures ; l'étiquette au-dessus de la liste indique le chemin où vous vous trouvez, et **Back** (Retour) remonte d'un niveau. Seuls les fichiers image sont listés — PNG, JPEG, GIF, SVG, WebP et BMP ; un dossier sans image ni sous-dossier affiche *No images in this folder* (Aucune image dans ce dossier). 📝 **Remarque** Le navigateur n'affiche que les bibliothèques du site actuel. Pour utiliser une image stockée sur un autre site, collez son adresse dans le champ **Image URL**. ## Préparer l'image L'image est dessinée à l'**Icon size** (Taille de l'icône) du composant WebPart — entre 20 et 64 pixels — et mise à l'échelle pour tenir dans ce carré en conservant ses proportions. Pour un résultat net : - utilisez une **image carrée** dont le sujet remplit le cadre ; les logos larges deviennent petits lorsqu'ils sont comprimés dans un carré ; - privilégiez le format **SVG**, ou un PNG d'au moins 128 × 128 pixels, afin que l'image reste nette sur les écrans haute résolution ; - utilisez un **arrière-plan transparent**, afin que l'image se pose sur la couleur de la vignette plutôt que dans un cadre blanc ; - vérifiez le rendu de l'image sur la couleur de la vignette — un logo sombre disparaît sur une vignette sombre. ![Une image carrée et transparente donne les meilleurs résultats](https://static.vitextra.com/articles/10244/image-comparison-fr.png) *Une image carrée et transparente donne les meilleurs résultats* Contrairement aux icônes standard, une image personnalisée ne prend pas la **Font Color** (Couleur de police) de la vignette : elle est affichée avec ses propres couleurs. Le paramètre **Shadow** (Ombre) du composant WebPart s'applique aux images personnalisées de la même manière qu'aux icônes. ## Où stocker les images La bibliothèque **Site Assets** du site est l'emplacement naturel : tous les visiteurs du site peuvent la lire, et elle est incluse lors de la sauvegarde ou de la restauration du site. Toute autre bibliothèque ou tout autre site convient, à condition que les personnes qui voient la vignette puissent lire l'image — un visiteur sans accès à l'image voit un espace vide à l'endroit où l'icône devrait se trouver. ❗ **Important** Les images sont chargées par le navigateur du visiteur directement depuis l'adresse indiquée dans la vignette. Une image hébergée sur un site web externe doit être servie en HTTPS, et le composant WebPart ne peut pas l'afficher si ce site interdit l'intégration. ## Supprimer l'image Pour revenir à une icône, choisissez une icône dans n'importe quel jeu du sous-menu **Tile Icon** — cela supprime l'image personnalisée — ou rouvrez **Custom image** et cliquez sur **Remove image** (Supprimer l'image) dans la boîte de dialogue. 💡 **Astuce** La même boîte de dialogue **Image** sert pour l'arrière-plan d'une vignette ; consultez [KB10245. Définir une image d'arrière-plan pour une vignette](https://vitextra.com/fr/support/kb/10245). Les jeux d'icônes sont décrits dans [KB10243. Choisir des icônes pour les vignettes](https://vitextra.com/fr/support/kb/10243).