Clever Geek Handbook

Créer un favicon pour le site Web 2020

Qu'est-ce qu'un favicon et Ă  quoi sert-il?



Un favicon est un badge (icône) qui apparaît dans les onglets du navigateur, les signets et dans les extraits de résultats de recherche.



image



Favicon joue un rôle important dans les applications Web. Il peut améliorer l'apparence du site dans les résultats de recherche, augmenter la reconnaissance de votre site, aider l'utilisateur à trouver rapidement la page souhaitée dans les favoris et les onglets.



De plus, l'utilisateur peut ajouter une page de votre site à l'écran d'accueil du téléphone ou l'enregistrer en tant qu'application Web. Dans ce cas, en utilisant favicon, vous pouvez trouver rapidement un site parmi un grand nombre d'autres applications.



Quel format utiliser pour le favicon?



Auparavant, ICO était utilisé comme format principal. La particularité de ce format est sa multidimensionnalité. Ce fichier peut stocker plusieurs tailles d'icônes. L'ICO a été remplacé par le format PNG. Les ICO sont toujours pris en charge, mais la plupart des navigateurs modernes optent pour le format d'icône PNG, qui est plus léger. Certains navigateurs ne parviennent pas à sélectionner l'icône correcte dans le fichier ICO, ce qui entraîne une mauvaise utilisation de l'icône basse résolution.



Quelles plates-formes cet article couvrira-t-il?



  • Navigateurs de bureau classiques
  • Chrome Android
  • Clip Web Safari pour iOS
  • Mac OS
  • les fenĂŞtres




Navigateurs de bureau classiques



Commençons par le bureau classique.



Comme mentionné précédemment, le format ICO est obsolète aujourd'hui, mais cela ne signifie pas que vous devez l'oublier. Le format ICO peut enregistrer votre icône et afficher correctement le favicon dans certains cas. Par exemple, avant IE 11, le format PNG n'est pas pris en charge. Par conséquent, pour IE10 et les versions inférieures, vous devez utiliser l'ancien format ICO. Dans ce cas, il est conseillé d'utiliser la combinaison suivante de formats ICO et PNG: 



<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">


Pour créer une icône ICO multi-taille, vous pouvez utiliser le service de conversion icoconvert . Lors de la génération d'une icône, vous devez sélectionner les tailles suivantes: 16x16, 32x32, 48x48 (icône de résolution la plus élevée).



Les icĂ´nes PNG ont les tailles suivantes: 16x16, 32x32, 96x96, 120x120. Pourquoi une icĂ´ne 120x120? L'aide Yandex informe qu'elle peut utiliser une icĂ´ne de cette taille.



Si nous prĂŞtons attention Ă  la valeur de rel (type de ressource), alors l'icĂ´ne est prise en compte par la plupart des navigateurs, et l' icĂ´ne de raccourci est prise en compte par le navigateur IE.



Chrome Android



Android s'attend à voir une icône PNG 192x192, le canal alpha (transparence) est encouragé. 



<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">


Android Chrome repose sur le manifeste de l'application Web. Tout site peut utiliser le manifeste pour créer un lien vers certaines des icônes.



Le fichier manifeste lui-même est au format json et est déclaré avec la ligne suivante: 



<link rel="manifest" href="…/manifest.json">


Le fichier manifeste pour Android Chrome peut être généré à l'aide du service RealFaviconGenerator . 



{
 "name": "My Application",
 "short_name": "App",
 "description": "Application OK",
 "lang": "ru-Ru",
 "start_url": "/",
 "scope": "/",
 "display": "standalone",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "icons": [
  {
   "src": "\/res\/img\/icons\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/res\/img\/icons\/android-icon -96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png"
  }
 ]
}


Les icônes doivent avoir les tailles suivantes: 72x72, 96x96, 144x144, 192x192, 512x512 au format PNG, la transparence est encouragée. Comme l'icône peut avoir un arrière-plan transparent, la couleur peut être spécifiée dans le manifeste à l'aide de background_color .



Il vaut la peine d'annuler que sur le téléphone, l'utilisateur a la possibilité d'enregistrer la page du navigateur sur l'écran d'accueil. Ce sera simplement un lien vers une page de votre site, une icône avec le nom android-icon-192x192.png sera extraite , qui est déclarée dans votre code.



Si vous connectez un manifeste au site, lors de l'ouverture de la page, l'utilisateur peut être invité à enregistrer le site en tant qu'application. Dans ce cas, vous pouvez déclarer visuellement la même icône ( android-icon-192x192.png) ou redessinez l'icône de l'application en fonction de vos besoins et déclarez-la dans le manifeste avec les dimensions appropriées.



Clip Web Safari pour iOS



iOS Safari s'attend à voir une icône Apple Touch . Il s'agit d'une icône PNG 180x180, pas de canal alpha (pas de transparence). Les coins de l'icône seront automatiquement arrondis, ce qui facilitera la création d'une icône Apple Touch .



Les utilisateurs d'IOS peuvent Ă©galement ajouter un site Ă  l'Ă©cran d'accueil et cela ressemblera Ă  une application. Un tel lien s'affiche sous forme d'icĂ´ne et s'appelle un clip Web.

Les tailles d'icônes suivantes sont conçues pour prendre en charge divers appareils tels que l'iPhone et l'iPad: 



<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">


Dans le code, ajoutez l' attribut rel = "apple-touch-icon" et spécifiez la taille à l'aide des tailles.



Si le site n'a pas d'icône dont la taille est la taille recommandée pour l'appareil, l'icône la plus grande la plus proche sera utilisée. L' icône principale Apple Touch est une icône de 180 x 180. D'autres appareils peuvent mélanger l'icône.



N'oubliez pas le remplissage lors de la création d'une icône. Ils doivent mesurer au moins 4 pixels de tous les côtés. Cela permet d'éviter que votre icône ne se coupe car l'icône de l'application iOS a des coins arrondis.



Il convient de noter que les appareils iOS ne sont pas les seuls à rechercher une icône Apple Touch... Certains navigateurs, comme Android Chrome, peuvent utiliser des icônes Apple Touch, car elles sont plus courantes que d'autres icônes PNG haute résolution.



Mac OS



Sous Mac OS, les choses sont complètement différentes. Si l'utilisateur tente d'enregistrer le site sur le bureau, une capture d'écran de la page avec le code html sera affichée à la place de l'icône du site.



Pour ajouter une icône, vous devez utiliser le format SVG, qui vous permettra de créer un masque d'icône. Cette icône s'affiche lorsque vous épinglez un onglet dans Safari. 



<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">


Vous devez ajouter l' attribut rel = "mask-icon" dans votre code . L'icône SVG elle-même doit être noire. La couleur de l'icône est définie dans l' attribut color = "# e52037" .



L'icône SVG est utilisée dans un onglet épinglé (pas de focus) en monochrome. Au survol (onglet épinglé - focus), l'icône sera peinte dans la couleur qui a l'attribut " couleur ". La couleur de l'attribut " couleur " est également transmise à la barre tactile .



Lors de la création d'une icône, vous devez supprimer toutes les ombres existantes, la rendre plate et simple. Vous pouvez simplifier une icône en un seul objet en utilisant les opérations "Union" et "Aplatir". Ces opérations sont faciles à appliquer dans Figma.



Si vous fermez les yeux sur la création d'une icône de masque, le navigateur affichera simplement la première lettre du domaine de votre site.



les fenĂŞtres



Avec Windows, il faut un peu de bidouillage pour bien faire.



Pour IE10 et les versions inférieures, le format ICO doit être utilisé car PNG n'était pas pris en charge avant IE11.



Avec l'arrivée d'IE11 et de Windows 8.1, il est devenu possible d'épingler des sites en tant que tuiles dynamiques. Pour les petits carreaux, le favicon par défaut est utilisé, mais pour les carreaux grands et larges, vous devez définir une image d'une taille spécifique. Cela peut être fait en ajoutant des balises de métadonnées au balisage du site ou en créant un browserconfig.xml (fichier de configuration du navigateur).



Exemple d'ajout de balises de métadonnées au balisage de votre site Web pour les grandes tuiles: 



<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">


Avec cette ligne, nous spécifions la couleur de fond de la tuile: 



<meta name="msapplication-TileColor" content="#2b5797">


Vous pouvez spécifier le nom de votre site Web: 



<meta name="application-name" content="My Application">


Qu'est-ce que Browserconfig ? Il s'agit d'un document XML répertoriant diverses icônes correspondant à l'interface utilisateur de Metro.



Pour inclure le fichier browserconfig dans le balisage, ajoutez la ligne suivante Ă  l'en- tĂŞte : 



<meta name="msapplication-config" content="…/browserconfig.xml">


Le fichier lui-mĂŞme ressemblera Ă  ceci: 



<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="…/mstile-70x70.png"/>
            <square150x150logo src="…/mstile-150x150.png"/>
            <square310x310logo src="…/mstile-310x310.png"/>
            <wide310x150logo src="…/mstile-310x150.png"/>
            <TileColor>#ffc40d</TileColor>
        </tile>
    </msapplication>
</browserconfig>


Le fichier browserconfig définit des images pour différentes tailles de tuiles.

Microsoft recommande d'utiliser des tailles d'image plus grandes afin de prendre en charge les écrans à haute densité de pixels.



La liste suivante fournit quelques instructions pour l'utilisation de différentes tailles:



  • Petit - 70x70 (taille recommandĂ©e: 128x128)
  • Moyen - 150x150 (taille recommandĂ©e: 270x270)
  • Large - 310x150 (taille recommandĂ©e: 558x270)
  • Grand - 310x310 (taille recommandĂ©e: 558x558)


Par exemple, pour une image 70x70, la taille recommandée est 128x128. Cela signifie que vous devez créer une image 128x128 avec un fond transparent, dont le nom sera mstile-70x70 . Faites de même avec le reste des dimensions.



Préparer des favicons



Avant d'ajouter vos icônes au dossier racine du site, vous devez les préparer. Les tailles originales des icônes ne sont pas très grandes, mais elles peuvent être compressées avec la moindre perte de qualité.



Par exemple, dans mon cas, le poids de toutes les images était de 200 Ko, après compression, il était de 50 Ko. La qualité des images n'a guère changé. Vous pouvez utiliser n'importe quel service de compression d'image pratique. J'ai utilisé iloveimg .



Conclusion



SĂ©quence de connexion dans le balisage du site Web: 



<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">

<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">

<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">


Avec la dernière ligne de code " thème-couleur ", vous pouvez peindre la barre d'adresse et la barre de notification dans n'importe quelle couleur. La valeur de contenu définit la couleur.



Utilisez RealFaviconGenerator pour vérifier les icônes de votre site Web . Ce service vous montrera comment vos icônes sont affichées sur différentes plates-formes, vous indiquera où et quels problèmes il peut y avoir.



De plus, ce service peut générer les tailles, les formats d'icônes et le code requis. Mais il est nécessaire de vérifier le code source pour la présence de toutes les tailles recommandées pour un affichage correct sur divers appareils.


More articles:


All Articles