Favicon

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

Mode d’emploi

Le logo utilisé pour les favicons est le logo global du site SPIP.
Vous pouvez déposer le logo de site depuis 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é avec une taille minimum de 150 pixels x 150 pixels.

Si vous voulez un autre logo, 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 la constante _FAVICON_COULEUR dans le fichier mes_options.php.

// définir la couleur du navigateur mobile en rouge
define('_FAVICON_COULEUR', 'cc0000');

Si aucune valeur n’est définie, la couleur sera la couleur « moyenne » du favicon fourni.

Documentation supplémentaire

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

Discussion

3 discussions

  • 1

    Bonjour,
    Merci pour ce plugin... Est-il possible de renseigner une image pour le « mode sombre » ?

    Répondre à ce message

  • 2

    Attention ce plugin se contenter de découper le morceau central de l’image qu’il utilise à chaque taille de fichier généré, il ne resize pas ni rien. Ça donne des résultats qui ne sont probablement pas ce à quoi vous vous attendez même si vous lui donnez une image carré (à savoir, votre logo en différentes tailles).

    • En fait, correction : le plugin fonctionne bien comme attendu mais peut prendre particulièrement longtemps (proche d’1h) à générer les différentes tailles voulues de l’image fournie. Armez vous de patience !

    • Pablo, j’ai rencontré aussi ce genre d’erreur d’affichage et je l’ai résolue en générant les miniatures (En tout cas en changeant l’outil de génération des miniatures)
      Dans Configuration > Fonctions avancées

      Depuis mon favicon est exactement le logo du site et il est correctement affiché et proportionné.

    Répondre à ce message

  • 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 ;)

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom