Favicon

Génération automatique, à partir de votre logo de site, de favicon et touch icon pour les différents navigateurs et terminaux.

Si ce n’est pas déjà fait, déposez votre logo de site via l’espace privé de votre site SPIP : menu « Configuration > Identité du site ». Pour que ce soit esthétiquement réussi, il est préférable que votre logo de site soit carré, de 150 pixels de côté minimum. Sinon vous pouvez déposer un fichier image spécialement nommé favicon.png, à la racine votre dossier squelettes.

Aussitôt activé, ce plugin insère automatiquement — au bon endroit : dans le head de votre page (grâce à la balise #INSERT_HEAD) — toutes les favicons utiles pour les différents navigateurs et terminaux, y compris les déclinaisons propriétaires de type apple-touch-icon ou msapplication-TileImage. Voici un exemple de code généré :

<link rel="shortcut icon" href="local/cache-gd2/9444631ffd3ddd2d111efbebb935ddc2.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="local/cache-gd2/e569705f477840ae1c549c12bfe4cafb.png" />
<link rel="apple-touch-icon" sizes="114x114" href="local/cache-gd2/34d11399ae3e76d10ac70a05596b47c8.png" />
<link rel="apple-touch-icon" sizes="72x72" href="local/cache-gd2/1505e94dd60a59f56d1cd358f69e3d1d.png" />
<link rel="apple-touch-icon" sizes="144x144" href="local/cache-gd2/99dea51baa23c07914725681f09ce3a4.png" />
<link rel="apple-touch-icon" sizes="60x60" href="local/cache-gd2/d6e2d9ad798b0f1aa954bf195738eb5a.png" />
<link rel="apple-touch-icon" sizes="120x120" href="local/cache-gd2/225cc8aba80e8836aadfc1e1f7936835.png" />
<link rel="apple-touch-icon" sizes="76x76" href="local/cache-gd2/d91730143b01bbd7cf7dd3c8be2d23b3.png" />
<link rel="icon" type="image/png" href="local/cache-gd2/9e0d479a319217b4b8ebebd39dd32758.png" sizes="96x96" />
<link rel="icon" type="image/png" href="local/cache-gd2/1dfb75427c01d50a405e5ce1408e16de.png" sizes="16x16" />
<link rel="icon" type="image/png" href="local/cache-gd2/1f2f660cee13267bbcced4d252cf9237.png" sizes="32x32" />
<meta name="msapplication-TileColor" content="#895aa4" />
<meta name="msapplication-TileImage" content="local/cache-gd2/34d11399ae3e76d10ac70a05596b47c8.png" />

Il est également possible de personnaliser une couleur de thème pour Android Chrome 39+ et Windows en définissant _FAVICON_COULEUR dans le fichier mes_options.php.

Portfolio

Pour en savoir plus sur les favicons, voir cette synthèse assez complète : https://github.com/audreyr/favicon-...

updated on 4 May 2019

Discussion

Une discussion

  • Hello ici ! Et encore merci pour le plugin :-)

    Petite question en revanche, qui m’est venue pendant que je traduisais sa doc :

    Il me semblait avoir compris (notament d’après le post de Mathias Bynens sur les favicons, un des devs à l’origine d’HTML5 Boilerplate) que les noms des fichiers images et, leur placement à la racine du site, avaient leur importance quand même dans le processus (notamment pour les attributs -precomposed) ? J’ai rêvé ou ... ?
    Parce que quand je vois le code généré par le plugin, j’ai un doute sur sa «validité» face à cette contrainte (si toutefois c’en est bien une et qu’elle soit encore valable en 2018) ?

    Merci pour vos retours ;)

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom