Graphisme Publié par le

Créer des favicon en .ico avec photoshop


Un Favicon est une petite icône qui apparait dans la barre d’adresse du navigateur à côté de l’adresse URL d’un site internet. Cette petite icône apparait également dans les favoris, dans les onglets des navigateurs ainsi qu’en icône de raccourci sur le bureau. Cette icône est un fichier image au format .ico.
Cependant, si vous souhaitez créer une icône avec Photoshop vous allez rencontrer un petit problème. Photoshop ne sait pas enregistrer nativement une image au format .ico. Heureusement, pour remédier à ce problème et ajouter le format de fichier .ico à Photoshop, il suffit d’installer un petit fichier nommé ICOFormat.8bi.

Ajouter le support du format .ico sous Photoshop

  1. Télécharger le fichier ICOFormat.8bi de votre version Photoshop à cette adresse.
  2. Copier le fichier ICOFormat.8bi dans votre répertoire Photoshop :

    pour CS3 :
    C:Program Files/Adobe/Adobe Photoshop CS3/Modules externes/Formats de fichiers

    pour CS4 en 32 bits :
    C:Program Files (x86)/Adobe/Adobe Photoshop CS4/Plug-ins/File Formats

    pour CS5 en 64 bits :
    C:Programmes/Adobe/Adobe Photoshop CS5(64bits)/Plug-ins/File Formats

  3. Redémarrer Photoshop.
    Désormais, vous pourrez enregistrer n’importe quelle image pour créer vos icones au format .ico

Créer un favicon pour votre site

Le favicon est une petite image de taille carré : 16 pixels par 16 pixels.

  1. Ouvrez Photoshop et créez un carrée de 16x16px.
  2. Ajouter votre image.
  3. Enregistrer au format .ico.

Note : Pour créer un favicon transparent, il suffit lors de la création de laisser le fond de l’image transparent.

Ajouter votre favicon sur votre site

Vous pouvez également créer un favicon sous des formats différents comme en PNG pour une meilleure gestion de la transparence. Sachez toutefois que le format PNG pour les favicon n’est pas reconnu sous tous les navigateurs.
Placez le code suivant entre les balises <head></head> de votre site :

<head>
...
<!-- version IE //-->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<!-- version standard PNG //-->
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- version iPhone, iPod Touch et iPad //-->
<link rel="apple-touch-icon" href="/favicon.png" />
...
</head>
About these ads


Laisser un commentaire

About these ads