centraliser-iconnotsurefacemuch-circlespencil
17 novembre 2015

Utiliser un favicon

Avez-vous remarqué l’option “Téléverser un favicon” dans l’onglet apparence de votre école Didacte? C’est une étape facultative mais qui ajoute une touche personnalisée à votre site web.

Un favicon, c’est quoi?

Un diminutif de favorites icon, le favicon est une petite icône parfaitement carrée qui servait à l’origine à rendre votre site web unique dans la liste des adresses placées en favori par un internaute. Elle est aujourd’hui affichée à côté du titre d’une page web dans la majorité des navigateurs.

Le favicon devrait généralement être votre logo ou une varation de celui-ci et doit toujours être un carré. La taille minimale de l’icône est de 16x16 pixels.

Voici de quoi il à l’air sur le site de Didacte. C’est aussi l’icône par défaut utilisée sur les nouvelles écoles lorsqu’aucune icône n’est ajoutée :

Apparence du Favicon dans votre navigateur

Comment générer votre favicon facilement

N’ayez crainte, nous n’allons pas vous demander d’apprendre à être graphiste ou d’installer des logiciels simplement pour créer votre favicon !

Il existe de nombreuses ressources gratuites, mais notre préférée est définitivement ce site tout simple. Son avantage est qu’il va générer les différentes tailles de favicon les plus supportées et ce, à l’intérieur d’un seul et unique fichier.

http://www.icoconverter.com/

Pour avoir un meilleur résultat visuel, nous vous conseillons cependant de suivre ces deux règles :

  1. Utiliser une image carrée.
  2. Ne pas cocher les tailles supérieures à celles de votre image d’origine.

C’est tout !

Exemple pratique

Disons que je lance une école de cuisine et que j’aime beaucoup cette image libre de droits trouvée sur Pixabay.

Je décide de l’utiliser comme logo pour mon école de cuisine :

Logo de mon école de cuisine

Ensuite, j’ouvre le site Ico Converter mentionné plus haut pour créer mon favicon :

http://www.icoconverter.com/

Mon image est carrée, dans une taille de 260x260 pixels. Cette taille est supérieure à la taile maximale de favicon proposée par le site, alors je vais tout simplement sélectionner mon image et cocher l’ensemble des tailles possibles :

Taille de l'image

J’appuie ensuite sur Convert et le site me génère automatiquement un fichier nommé favicon.ico. Dans l’administration de mon école Didacte, sous l’onglet Apparence, je téléverse mon fichier favicon.ico et j’appuie sur Enregistrer.

Téléverser un Favicon

Mon nouveau favicon personnalisé remplace alors le logo de Didacte !

Nouvelle apparence du Favicon dans votre navigateur

Kaven ayotte

Kaven Ayotte