L’une des étapes cruciales de la création de sites internet est le choix de la charte graphique. Bien sur la couleur doit être en accord avec le theme du site, l’impression qui devra s’en dégager, le public visé, etc…

En général il est assez simple de choisir la couleur de base, mais assez dur ensuite de trouver les accords de couleurs pour éviter les fautes de gout, et rendre le site vraiment agréable.

Pour vous aider à trouver des accords de couleurs harmonieux, il existe de nombreux outils, mais l’un d’eux est vraiment très utile : The color Wizard

Ce petit utilitaire est disponible en ligne, et ne necessite pas de téléchargement. Une fois chargé, vous entrez la référence de votre couleur de base et il s’occupe de vous founir des palettes de couleurs en jouant sur les teintes, la saturation, les couleurs complémentaires, analogues, etc…

Vous pouvez aussi modifier les composantes rouge vert bleu de votre couleur de base grace à des sliders, et enfin un bouton “Randomize” vous permet de choisir une couleur de base aléatoirement pour découvrir des accords de couleurs auxquels vous n’aviez peut être pas pensé.

En bref, un petit utilitaire bien pratique à ajouter dans votre boîte à outils de designer web, ou plutot dans la liste de vos favoris

Les “Favicon” sont de petites icones qui sont affichés par les navigateurs internet à côté du nom du site dans les onglets, à coté de l’adresse du site dans la barre de navigation et dans la liste des favoris. Elles permettent de reconnaitre plus facilement un site dans la liste des favoris.

Création des Favicons :

Il existe plusieurs moyens de créer des favicons. Le moyen le plus simple et de passer par l’utilitaire en ligne et gratuit “Favicon from pics“. Dans le petit formulaire affiché sur la page, vous choisissez l’image qui devra être transformée en favicon, et cliquez sur le bouton “Generate favicon.ico”. Le script se charge de convertir votre image en favicon, et il vous suffit ensuite de telecharger le résultat.

Attention toutefois lorsque vous choisissez votre image : une favicon mesure 16 pixels x 16 pixels, ce qui est très petit. Une image avec trop de détails ne ressortira pas bien, préférez donc des graphismes simples avec beaucoup de contraste entre le fond et le logo.

Une autre remarque concernant l’utilitaire Favicon from pics : les images sont redimensionnées en 16×16 et non rognées, ce qui signifie que si l’image d’origine n’est pas carrée, elle ressortira déformée.

Un autre moyen existe pour créer une favicon : Le logiciel d’adobe, Photoshop.

Par défaut, photoshop ne permet pas d’enregistrer vos images au format .ico, mais heureusement un petit plugin gratuit permet de résoudre ce problème.

Une fois le plugin installé (la marche à suivre est détaillée sur le site de l’auteur du plugin), la création des favicon se révèle très simple : Vous créez votre image à partir d’une image existante ou d’un nouveau document (choisir une hauteur égale à la largeur puisque la favicon devra mesurer 16px sur 16px), vous redimensionnez votre image à 16 pixels de hauteur et 16 pixels de largeur (image > Taille de l’image), puis vous sauvegardez votre image au format .ico (Fichier > Enregistrer sous et vous choisissez .ICO comme format d’enregistrement).

En utilisant l’une ou l’autre de ces méthodes, votre favicon est maintenant créée, voyons comment l’intégrer à votre site internet.

Intégration d’une favicon à votre site

Pour que les navigateurs affichent votre favicon, rien de plus simple :

• Envoyez votre image dans un repertoire de votre serveur web (nous prendrons ici comme exemple la favicon située à l’adresse http://www.isacoms.com/favicon.ico)
• Ajoutez la ligne suivante dans l’en-tete de vos pages (entre les balises ‹head› et ‹/head›)
  ‹link rel=”shortcut icon” href=”adresse_de_votre_favicon” /› ce qui nous donne par exemple ‹link rel=”shortcut icon” href=”http://www.isacoms.com/favicon.ico” /›

Et voila, le tour est joué, les navigateurs afficheront maintenant l’icone de votre choix à côté du nom de votre site.