Générateur pour créer un ensemble optimal de favicons

Instruction

Dans le passé, vous deviez créer des dizaines d'icônes de sites web pour différents navigateurs et leurs versions. Mais dans la construction de sites web modernes, beaucoup de choses ont changé. Aujourd'hui, tout ce dont nous avons besoin pour créer une belle icône de site web est un fichier svg, un favicon, trois png et un json. Pour en savoir plus cet article.

HTML:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- 180x180 - first for safari --> 
<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32x32 --> 
<link rel="icon" href="/icon.svg" type="image/svg+xml"> 
<link rel="manifest" href="/manifest.webmanifest">

Fichier manifeste:

// manifest.webmanifest
{
   "icons": [
      { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
      { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
   ]
}

Yandex Browser Tableau

Seul Yandex Browser, avec son tableau, a ajouté quelques problèmes. Si vous voulez que votre site s'affiche correctement sur le tableau (lors de l'ouverture d'un nouvel onglet), vous devez créer un fichier manifeste et une image png avec un arrière-plan transparent et un rapport d'aspect : 1:3.

Cette ligne sera ajoutée à l'en-head: 

<link rel="yandex-tableau-widget" href="/tableau.json">

Et créez un fichier manifeste pour Yandex à la racine:

{
   "version": "1.0",
   "api_version": 3,
   "layout": {
      "logo": "/tableau.png",
      "color": "#003C8C",
   }
}

Dans la colonne color indiquez la couleur d'arrière-plan que vous souhaitez voir apparaître dans le Yandex Browser Tableau.
logo - est le chemin d'accès à l'image.
Plus de détails dans cet article..

Générateur

Utilisez le formulaire ci-dessous pour télécharger le fichier du logo de votre site web dans l'un des formats (jpg, png, svg) et obtenez un ensemble de cinq icônes ! Taille maximale: 5мб

Faites glisser et déposez le fichier du logo carré ici ou cliquez.

Joindre un fichier logo carré avec de petits retraits sur les bords (~10%).
Vous pouvez avoir un arrière-plan transparent ou coloré.
Les icônes au format png sont acceptées;
Les icônes au format svg sont acceptées;
Les icônes au format jpg sont acceptées;

Le générateur d'icônes créera: