[Tutoriel] Mettre un favicon

    Publicités

Users Who Are Viewing This Thread (Total: 0, Members: 0, Guests: 0)

S

Skiteam

Membre
Jun 16, 2011
48
0
426
33
Bonjour à tous, aujourd'hui de plus en plus de site se créer sur le net.
Et pour différencier certains, une chose est important Wink
LE FAVICON !

Qu'est-ce que le Favicon :
- Le favicon est l'image qui représente un peut votre site. Il se trouve
à gauche de votre barre de navigation. Par exemple sur Facebook, le Favicon c'est ça :
favicon.ico

Son format peut être le format de toutes les images possibles .

Comment créer un Favicon :
- Pour créer un Favicon, il vous suffit d'ouvrir votre logiciel de graphisme (Toshop, GIMP ...).
Ouvrez un nouveau fichier (Taille : 16 x 16) et faites ce que vous voulez Wink

Comment le mettre sur son site :
- Et bien dans votre site vous pouvez trouver les balises <head> et </head>,
Il vous suffit de mettre le code qui suit entre ces balises :
Code: 
<link rel="shortcut icon" href="URL/lien de votre favicon.ico">
Voilà vous avez votre FAVICON sur votre site, à bientôt !!
 
Evaelis

Evaelis

La Voix de la Sagesse
V
Ancien staff
Apr 28, 2010
22,949
468
1,699
Valhalla
Déjà il n'y a pas que le 16 * 16 de plus ça un tuto ...
Tu veut ptete mettre tuto pour lien , images ? --'
 
Metali

Metali

Membre d'Honneur Elite
V
Ancien staff
Dec 3, 2011
2,713
2
944
Paris, France
Muwé sauf que la taille ne veux rien dire, sur les dernières version des navigateurs les favicon sont redimensionnés donc on peux facile monté jusqu'en 48x48 sans perdre trop de couleur dans la redimension auto.
 
W

Warzinga

Membre
Sep 28, 2012
35
0
206
Façon simple :
HTML: 
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Façon complexe pour s'adapter aux différents écrans :

HTML: 
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

De manière générale si vous voulez connaître les bonnes pratiques HTML et CSS allez sur :

- Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
- Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
- Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!


( Certains articles c'est possible que vous disiez ça : :quoi: Faut avoir un certains niveau quand même )
 
Votre publicité ici !
You must log in or register to reply here.
Top Bottom