Comment créer une favicon et l'installer sur votre site friweb ?

Une « favicon » est la petite image qui apparaît dans le champ d'URL de votre site, souvent avant le texte de l'adresse :

favicon-32x32.png http://www.friweb.ch

Cette image est aussi visible dans la barre des favoris de certains navigateurs comme Chrome. Elle permet de personnaliser votre site, que vos visiteurs reconnaîtront ainsi plus facilement. Il s'agit en général d'une petite image carrée qui se nomme favicon.ico.

Il existe des solutions en ligne pour créer automatiquement votre favicon à partir d'une image, comme par exemple le site favicons.fr.

Si vous possédez un logo carré au format JPG, PNG ou GIF, d'une taille maximale entre 2 et 5 MB, vous pouvez l'utiliser sans autre dans ces sites.

Dans le cas contraire, il vous faudra créer une image dans un logiciel de traitement d'image comme Paint (Windows, gratuit), Gimp (Mac et Windows, gratuit), Inkscape (Mac et Windows, gratuit), Pixelmator (Mac, 30 CHF) Photoshop Elements (Mac et Windows, env. 90 CHF), etc. :

  • Créez un nouveau document carré, par exemple de 500 pixels x 500 pixels
  • Dessinez votre logo de manière assez simplifiée, car il ne faut pas oublier que la taille de ce dernier sera fortement réduite.
  • Enregistrer votre fichier au format GIF, PNG, ou JPG.
  • Allez sur le site favicons.fr.
    1. Uploadez votre image en cliquant sur "Choisir le fichier".
    2. Cochez uniquement le pack Standard, suffisant pour créer des images pour le web.
    3. Cliquez sur le bouton Créer vos favicons.

favicons_fr_1.png

  • Cliquez ensuite plus bas sur le bouton Afficher un aperçu des favicons.

favicons_fr_2.png

  • Vous découvrez alors les différentes versions de votre image, que vous téléchargez ensuite en cliquant sur Télécharger vos favicons.

favicons_fr_3.png

  • Une série de favicons sera ainsi présente sur votre disque dur, dans un dossier favicon_xxxxxxxx, placé là où vous téléchargez habituellement vos documents depuis le web. Vous n'aurez besoin que de celle dont le nom est "favicon.ico".

dossier_favicons.png

  • Rendez vous ensuite sur votre site et identifiez-vous comme webmaster.
  • Allez sous le menu Friweb > Apparence.
  • Dans la partie FAVICON, décochez la case "Utiliser la favicon fournie par le thème"
  • Cliquez sur le bouton "Choisir le fichier", sous "Transférer l'image de favicon"

choix_favicon.png

  • Choisissez votre image nommée "favicon.ico" dans le dossier que vous venez de télécharger depuis le site favicons.fr
  • Cliquez tout au fond de la page sur le bouton bleu Enregistrer la configuration
  • Votre nouvelle favicon devrait apparaître à présent dans l'URL de votre navigateur

 

> Retour aux tutoriels