figbell

Tous les articles

Guides

Produire un jeu d'icônes, un favicon et un SVG pour le web à partir d'un logo

Comment Bezira produit, à partir d'un logo SVG, des icônes PNG de 16 à 512 pixels, un favicon.ico et un SVG optimisé. L'export se fait sur l'appareil.

Un site web ou une application a besoin du même logo dans de nombreuses tailles : l'icône de l'onglet, l'icône de l'écran d'accueil, le SVG de la page. Bezira produit tout cela depuis une seule fenêtre d'export ; le traitement a lieu sur cet appareil.

Préparation

  1. Ouvrez le fichier SVG du logo avec Fichier › Ouvrir… (Ctrl/⌘ O). Le fichier s'ouvre tel quel ; les identifiants, définitions et styles sont conservés.
  2. Les icônes sont produites sous forme de PNG carrés. Si le logo n'est pas carré, un plan de travail carré peut être créé avec Objet › Ajouter un plan de travail ; la fenêtre propose des tailles prédéfinies comme Icône d'application (512×512).

Jeu d'icônes et favicon.ico

  1. Ouvrez la fenêtre Fichier › Exporter (Ctrl/⌘ ⇧ E).
  2. Dans la section Contenu, choisissez Document entier, Chaque plan de travail séparément ou Sélection uniquement.
  3. Dans la section Formats, cochez Jeu d'icônes et choisissez les tailles voulues : 16, 24, 32, 48, 64, 128, 256 et 512.
  4. Sélectionnez aussi le bouton favicon.ico. Le fichier contient les tailles de 16, 32 et 48 pixels.
  5. Vérifiez la liste Fichiers produits et cliquez sur Exporter.

Dans Chrome, Edge et Opera, Choisir un dossier écrit les fichiers directement dans un dossier. Si aucun dossier n'est choisi ou si le navigateur ne peut pas écrire dans un dossier, les fichiers multiples sont téléchargés dans un seul .zip.

Un SVG léger pour le web

Dans la même fenêtre, lorsque SVG est coché et Optimisé choisi, les attributs inutiles, les groupes vides et les décimales superflues sont supprimés. Options :

  • Conserver les noms de calque comme id : pour les éléments à cibler en CSS ou par script.
  • Minifier (une ligne) : ramène le fichier à une seule ligne.
  • Couleurs en currentColor (icônes) : l'icône prend la couleur du texte de la page.
  • Précision décimale : de 0 à 3 chiffres.

La fenêtre indique la taille du SVG d'origine ; l'optimisation ne modifie pas l'apparence. Pour modifier de nouveau le document plus tard, utilisez l'option Modifiable : les calques, les groupes et les plans de travail sont conservés.

Bon à savoir

  • Les fichiers Adobe Illustrator (.ai), EPS et PDF ne s'ouvrent pas ; le logo doit être fourni en SVG.
  • La conversion du texte en tracés et le texte sur un tracé ne sont pas disponibles.
  • Les scripts, attributs d'événement et liens externes d'un fichier ouvert sont supprimés par sécurité ; le nombre d'éléments supprimés est indiqué.

Bezira s'ouvre immédiatement dans le navigateur.