Welcome, Guest

Please login or register

TUTORIALS SUBMENU

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING    [SUBMIT]

Related Links

Création et utilisation d'icônes pour les sites


Ce sont les petites images que l'on peut voir dans les barres d'adresse ou dans les listes de liens dans les favoris, qui vous permettent ainsi de reconnaitre au premier coup d'oeil.. Pas tous les sites ne disposent de ces icônes (mis à part les sites importants du style Adobe, Ebay...). Bien que ce ne soit pas la partie la plus importante d'un site, ces icônes vont permettre de créer un repère visuel à vos visiteurs et ajouter un petit plus. Voici comment ca se passe....

Étape 1: Photoshop ne permet pas de sauvegarder des fichiers dans le format nécessaire (.ICO) ou du moins, pas dans ses options de base. Pour cela on a besoin de ce petit plugin : Telegraphics qu'il faut donc installer avant d'aller plus loin. C'est gratuit et il permet de créer des fichiers .ICO en modes 1, 4 et 8-bit Indexed ou RVB 24-bit , ainsi que les icones 32-bit "XP" . De ce fait, ce plugin est plutôt essentiel si vous voulez vous lancer dans une carrière de créateur d'icônes et plus sérieusement d'une grande aide même pour l'utilisateur lambda.

Note : Après avoir installé ce plugin, si votre photoshop est en marche il vous faut le redémarrer afin qu'il prenne en compte le plugin.

Étape 2: Ces icônes ont une taille standard de 16*16px. Beaucoup pensent qu'il est extrêment difficile de faire quoi que ce soit dans une si faible surface mais il y a 2 possibilités en fait : - Vous pouvez faire votre image pixel par pixel, ou alors travailler sur une image un peu plus grande (64*64px) et la réduire après. Si vous choississez la seconde option, n'oubliez pas quecertains détails risquent d'être invisible lors de la réduction de votre image.

Étape 3: Lorsque vous avez fini avec votre oeuvre, il vous est nécessaire de la sauvegarder : Fichier > Sauvegarder sous... et sélectionnez le format nécessaire, .ICO. Enfin, uploadez le sur votre ftp, dans le même dossier que le fichier index de votre site.
 

Étape 4: Certains navigateurs recherchent directement "Favicon.ico" ou"favicon.ico" (attention aux majuscules d'ailleurs) sur votre site et mettent directement votre image. Les autres nécessitent quant à eux un lien sur dans votre code HTML. Pour que la fonction soit fonctionnelle à 100%, n'hésitez pas à copier ce code dans toutes vos pages:

<link rel="Shortcut Icon" href="/favicon.ico">

Si vous êtes sous Linux, il est OBLIGATOIRE, que votre fichier et votre balise <link> soit absolument identiques.

Note : Je tiens à préciser que certains navigateurs sont assez gonflant avec ces icônes. Microsoft IE6 pour Windows, par exemple, ne montre pas l'icône tant que l'adresse n'est pas mise dans les favoris.

Note supplémentaire : Bien, voici pour vos icônes de site :) Ils permettent de faire ressortir votre site dans un historique d'adresses et ne surchargent en rien le serveur, il n'y a donc pas de raison de ne pas les utiliser. Si vous avez besoin d'inspiration regardez cette collection... visitez quelques sites. Qui sait, votre imagination peut se réveiller d'un seul coup.....

- Tutorial written by Man1c M0g
- Translation by Bana

Automatic Translations: Translate Into French Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese
Amazing Font Pack!

Featured Tutorialsmore

Simple Camouflage
Simple Camouflage
- Adobe Photoshop -
Segmented Rings
Segmented Rings
- Adobe Photoshop -
Realistic Gears
Realistic Gears
- Adobe Photoshop -
The Last Remainder
The Last Remainder
- Adobe Photoshop -
Membership

Username:
Password:  
Remember Me

Lost Password? || Register

Related Links



Special Options
Printer Friendly Version
Forum Threads

 Deactivate Account
Author: jerinian
Posted: Oct 02nd, 11:16am
Activity: 1 replies, 890 views
 changes....
Author: supertackyman
Posted: Sep 12th, 2:56am
Activity: 2 replies, 1055 views
Back again and with free webhosting :)
Author: ngz
Posted: Aug 14th, 3:50pm
Activity: 0 replies, 1055 views
Cartoon Crab 6 Legs Walk Run created in Blender
Author: patricia3d
Posted: Jun 19th, 12:58pm
Activity: 0 replies, 1938 views
HTML Form Post Array to PHP
Author: Space Cowboy
Posted: May 25th, 2:18pm
Activity: 0 replies, 1834 views
My blog where i create Digi Scrapbook
Author: claudya07
Posted: May 11th, 2:33pm
Activity: 0 replies, 14444 views
Blood Dripping from Letters
Author: patricia3d
Posted: Apr 05th, 3:37am
Activity: 0 replies, 2757 views
A New Designer has joined the ranks
Author: skates1
Posted: Mar 28th, 2:19pm
Activity: 2 replies, 2777 views
The hole in Photoshop
Author: Mars
Posted: Feb 13th, 9:28pm
Activity: 2 replies, 3442 views
Colour Swatch
Author: ebz7350
Posted: Jan 15th, 11:18am
Activity: 0 replies, 2357 views
 BioRUST Forums - Reply to Topic
Author: inonShozy
Posted: Jan 11th, 11:32am
Activity: 8 replies, 2500 views
 Version 2 of my portfolio site.
Author: andrewnleon
Posted: Jan 08th, 6:18am
Activity: 6 replies, 2800 views
Forum Threads

--- Site Resources ---
Total Tutorials:212
Total Downloads:    441
Total Fonts:    4673