Cette section est close pour le moment.
Mais je n'arrête pas la veille, loin de là. Retrouvez mes projets sur Github et sur cette page qui sera à jour plus régulierement


Ressources

Définition de ressource : (nom féminin) Qui peut fournir ce dont on a besoin.
Vous l'aurez compris, sur cette page ce ne sont pas vraiment des tutoriels, c'est plutôt des penses-bêtes plus ou moins fournis mais qui vous permettront d'avoir des bases concernant la programmation.
Recherche par tag

Identifier son site avec un favicon, simple mais indispensable

Identifier son site avec un favicon, simple mais indispensable
Publication : Le 04/10/2012 à 09:48:29

Introduction

Le favicon va vous servir à identifier facilement votre site.

Que ça soit quand on a plein d'onglets d'ouvert, un dossier de marque-pages conséquents ou sur la page d'accueil de votre iphone.

L'icône classique

Vous pouvez mettre presque n'importe quel type d'image pour votre icône.

Les formats sont :
- ICO
- GIF
- JPG
- PNG

Dans la balise LINK il faudra faire le lien vers l'image (HREF), le type de données (TYPE = image/x-icon pour les fichiers ico et image/extention_image pour les autres) et REL pour indiquer qu'il s'agit d'un icône.
<link rel="icon" type="image/png" href="favicon.png" />
Pour internet explorer, il faudra obligatoirement utiliser un fichier ICO. Et donc d'utiliser une condition afin de ne pas charger le fichier pour rien si on utilise un vrai navigateur. #troll
<!--[if IE]>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<![endif]-->
Notez que sur la plupart des navigateurs, vous n'êtes pas obligé de déclarer le fichier favicon. Il suffit de l'uploader à la racine du site.

L'icône pour iPhone

Lorsque l'on mets un site en favori sur un iPhone, on se retrouve avec une capture d'écran de la page en cours en icône. Le résultat est pas très probant.

Autant utiliser une balise qui va servir que pour Apple :
<link rel="apple-touch-icon" href="mon-icone-114px-114px.png" />
Pour que l'icône soit dans un format optimal il devrait être de la taille 114px * 114px depuis l'iPhone 4 (pour 57px * 57px avant, l'image sera redimensionnée).

Par défaut, Apple mettra un petit effet brillant sur la partie haute de l'image, si vous n'en voulez pas, il faudra la nommer apple-touch-icon-precomposed.png (ou rajouter la mention -precomposed dans la valeur de l'attribut rel).

En plus des appareils d'apple, cet icône est pris en charge par les systèmes Android.

Conclusion

Même si votre site n'a pas de logo (comme le mien) il est important de mettre un favicon pour différencier votre page, ça donne vraiment un aspect fini à votre application.

Sur le même thème

Identifier son site avec un favicon, simple mais indispensable
Publication : Le 04/10/2012 à 09:48:29

Tags

Tag : CSS

Suggestion :

Identifier son site avec un favicon, simple mais indispensable

Identifier son site avec un favicon, simple mais indispensable