Faire une favicon avec photoshop

Date : 28/11/07 10:23:55

Si vous appréciez cet article cliquez sur ce bouton : Votez pour cette page avec Wikio

 

Cette astuce ne s'adresse qu'aux possésseurs de Photoshop. Nous allons apprendre à créer très simplement des favicon de bonne qualité, légés en poids très simplement.

 

Qu'est ce qu'une Favicon ? 

Et oui bien sur la question que tout le monde se pose, qu'est ce qu'une favicon ? Question encore plus importante : doit on dire une favicon ou un favicon ? 

Une favicon c'est la petite image qui dans la barre d'adresse de votre navigateur représente le site sur lequel vous naviguez.

L'exemple est disponible sur mon site http://www.throze.net, regardez la belle image :

Favicon de Thorze.net

Sur le net la plupart des sites possèdent une favicon voici quelques exemples :

Favicon de Google

Favicon de Wikipédia

 

Cette petite image est reprise également sur les onglets des navigateurs :

Onglets avec Favicon

 

Plus qu'un petit gadget cela donne une réél identité visuelle à votre site, d'un seul coup d'oeil votre site est directement visualisé dans la masse d'onglet que votre visiteur peut avoir ouvert.

Maintenant vous savez tout ce qu'il y a à savoir sur les favicons. Tout ? Non il ne faut pas oublier la question la plus importante que tout le monde se pose, masculin ou féminin ? Doit on dire une favicon ou un favicon ? D'après mes recherches sur de nombreux dictionnaires se mot n'héxiste pas, pauvre de lui. Vous pouvez essayer sur votre petit robert (pas si petit que ça d'ailleur) pour vérifier. Ce motne fais pas partis de la langue française. Mais heureusement que Wikipédia est là, c'est grâce à lui que j'ai enfin découvert la vraie vérité : le terme est un mot-valise né de la contraction de « favorites » et « icon ». Encore anglais tout ça. On va traduire par UNE ICONE DES FAVORIS. Donc je vais utiliser du féminin mais libre à vous d'utilisé un autre sexe puisque ce mot je le répète n'héxiste pas.

 

 

Comment mettre en place une favicon sur son site 

Il suffit de mettre un lien dans les balises <head> et </head> de votre site.

Voici le lien :

<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />

Il vous suffit par la suite de simplement placer votre fichier favicon.ico à la racine de votre site pour que le tout se mette en place. 

 

Comment créer sa favicon avec Photoshop 

Commencez par aller sur se site puis téléchargez la dernière version de ICO (Windows Icon) Format. Ce qui correspond à ce lien de téléchargement si vous voulez la version pour windows.

Décompréssez le fichier téléchargé et placez le dans \Adobe Photoshop CS\Modules externes\Conversion\ 

Ouvrez maintenant Photoshop, faites un nouveau document de 16x16 pixels, c'est très petit et ce n'est pas facile de faire rentrer quelque chose qui représente son site dedans. Puis au moment d'enregistrer il suffit de faire Fichier, enregistrer sous... et de choisir en extension Format ICO. Pas trop dur, le plus dur étant d'arriver à créer quelque chose de correct dans un site petit espace...

 

 

Je n'arrive pas à créer quelque chose de correct, au secours

Le mieux est de prendre des icones créés par d'autres personnes qui les proposent en plus en libre téléchargement, vous pourrez en retrouver plus de 700 sur http://www.favicon.fr ce qui vous permettra de surement trouver votre bonheur au risque que d'autres sites utilisent la même favicon que vous...

 

Présentation de favicon

 

 

 

Liens intéréssants : http://www.favicon.cc/

 

Ecrire un commentaire

  • Les champs indispensables sont marqué avec le caractère*.

Si vous avez des problèmes pour lire le code, cliquez sur le code pour en générer un autre.
Code de sécurité:
 
thorze
Posts: 1
Comment
Re: Faire une favicon avec photoshop
Reply #4 on : Mon December 03, 2007, 15:13:15
Effectivement j'ai cherché après ton info, j'ai trouvé ce site : http://www.favicon.cc/
très sympas pour faire des favicon facilement !
Raynord
Posts: 1
Comment
fav
Reply #3 on : Sun December 02, 2007, 23:53:09
Il y a un site génial qui transforme diréctement une image en une favicon, malheuresement j'ai perdu le lien :(