l'effet de Coriolis

et pendant ce temps-là, la Terre tourne.

Utiliser Photoshop pour créer de belles petites favicon au format ico

Une « favicon » est une icône qui s’affiche à coté de l’adresse d’un site internet et dans l’onglet des principaux  navigateurs. C’est un repère visuel lié au site, souvent le logo pour une marque ou un service connu.

Favicon pixeliséeUn site professionnel se doit d’avoir une favicon personnalisée, unique, c’est la petite touche qui fera la différence entre un site amateur ou provenant d’un template, et un site réalisé sur mesure. Une favicon est une image au format .ico, préférablement de taille 16×16 pixels avec un codage couleurs 8 bits (256 couleurs), mais certains systèmes accepteront les icônes 32×32 en couleurs 24 bits.

Pour réaliser manuellement cette favicon, il est possible de se tourner vers des services en ligne comme www.favicon.cc mais cette solution est moins puissante que d’utiliser Photoshop si vous êtes un tant soit peu habitué à ce logiciel. Le problème, c’est que Photoshop ne reconnait pas nativement le format ico…

Permettre à Photoshop d’enregistrer un fichier au format .ico

Il faut pour cela installer un plugin qui permettra à Photoshop de reconnaitre le format ICO. Attention si vous avez un système 64 bits (Windows 7 et Photoshop en 64 bits par exemple) le fichier et le processus d’installation ne seront pas les mêmes que pour la version 32 bits. Rendez-vous sur ce site pour télécharger le plugin gratuit et voir la procédure d’installation en détail, qui dépend de votre système.

Une fois le plugin installé, ouvrez à nouveau Photoshop. Dans Aide > A propos des modules externes… vous devez désormais voir le plugin « Windows ICO ». Si ce n’est pas le cas, c’est que l’installation a mal fonctionné : probablement que le plugin n’a pas été enregistré au bon endroit. (Consultez l’aide pour en savoir plus)

Créer votre image favicon.ico

Ouvrez à nouveau Photoshop, créer un nouveau document au format 16×16 et dessiné de ce que vous voulez. Le plus simple est de recourir à un visuel de votre site que vous allez réduire : le logo, un détail d’une photo… Si vous êtes en panne d’inspiration, vous pouvez jouer avec la première lettre du nom de votre site, en y appliquant les couleurs de votre charte graphique.

Vérifier que votre image est bien au format 16×16 en mode couleurs 8bits, et enregistrez la en lui donnant le nom favicon.ico

Ajouter l’icône à votre site

  • la première option est de placer le fichier favicon.ico à la racine. C’est normalement suffisant pour la plupart des navigateurs.
  • la seconde option est de décrire précisément l’emplacement de l’icône dans le code html de votre site. Cela se fait entre les balises d’entête du site :
<head>
<link rel="icon" type="image/x-icon" href="http://example.com/img/favicon.ico">
</head>

A noter qu’il est théoriquement possible de prendre des images (JPG, PNG, GIF) comme favicon, en décrivant l’emplacement et le type de fichier, mais Internet Explorer est encore réticent à les appliquer.

Catégorie : geekeries, monoblog, toshop

Votre adresse email ne sera pas publiée. Champs requis marqués avec *

*