Un favicon pour votre site

Transcription

Un favicon pour votre site
Qu’est-ce qu’un favicon?
« Icône d’URL » ou « icône de favoris » ou « favicon »
Le mot favicon est un mot contracté né des mots anglais favorites et icon dont les traductions françaises
sont marque-pages et icône.
Le (ou la ?) favicon est la petite icone qui apparaît dans la barre d’adresse devant l’URL des sites. C'est en
quelque sorte l'avatar de votre site web. Le favicon apparaît également dans le menu des favoris / marquespages. Enfin, pour les utilisateurs d’onglets, il apparaît sur chaque onglet.
Le favicon dans la barre d’adresse
Il participe ainsi à l’identité visuelle du site et contribue donc à sa mémorisation et son identification.
Actuellement sur IE8, IE9 et IE11 :
À l'heure actuelle, Mozilla a supprimé le favicon des sites au sein de la barre d’adresses de Firefox .
Anciennement sur Firefox :
Pourquoi? La raison en est simple : la sécurité.
Certains sites de hackers utilisent des favicons d’autres sites, ou intègrent un favicon représentant le fameux
cadenas indiquant – de façon fallacieuse – à l’internaute que la page sur laquelle il se trouve est sécurisée,
trompant ainsi sa confiance.
Dans le cas d’un site utilisant des certificats SSL avec Extended Validation, un cadenas vert apparaît, suivi
du nom du possesseur du certificat :
favicon pour votre site v2.docx
1/8
Dans le cas d’un certificat SSL sans Extended Validation, le cadenas sera gris et le possesseur du certificat
ne sera plus indiqué :
(L'exemple n'est pas bon, car en réalité il est vert)
Voir : Omnivox du Cégep de Matane (ici, le cadenas est gris)
Enfin, pour la grande majorité des sites qui n’ont aucun certificat SSL, Firefox n’affichera qu’un globe
terrestre générique :
Voir : Cégep de Matane
Si cette signalétique vous rappelle vaguement quelque chose, c’est qu’elle existe déjà en partie sur Chrome :
le navigateur de Google se sert des symboles cadenas et globe pour différencier les sites sécurisés et
classiques.
Favicon dans la barre d'adresse des différents navigateurs PC :
Favicon s'affiche
IE8, IE9 et IE11
Safari 5.1.7
Favicon ne saffiche pas (sécurisé)
Firefox
Chrome
Opéra 12.16
(à vérifier sur Mac)
Le favicon dans la liste des favoris
Le favicon dans les onglets
Le favicon est un repère particulièrement agréable dans l’utilisation des onglets. Il permet de
rapidement retrouver le site que l’on recherche.
2/8
Pourquoi avoir un favicon sur son site?
La favicon est un élément supplémentaire qui va participer à l’identité du site. Il est un facteur supplémentaire
qui fait qu’on identifie et mémorise le site; un peu comme un mini-logo.
Ce petit élément visuel permet également de plus rapidement repérer le site qu’on recherche dans une liste
(les favoris, ou les onglets notamment).
Comment choisir la forme de son favicon?
Ici, il n’y a pas de règle prédéfini et qui fonctionne. Il faut avoir en tête la mise en avant d’une image
facilement mémorisable, avec une couleur bien propre et qui rappelle le plus possible le nom du site, de la
marque, ou de la société.
On pourra ainsi voir apparaitre différents types de favicon :

Une lettre (quand le nom d’un site ou marque est trop long par exemple)

Un nom de marque ou société quand celui-ci le permet parce que les noms sont petits

Des images marquantes, symboles, représentant la société
Comment réaliser le favicon?
Objectif :
Permet un affichage correct de l'icône de favori sur tous les systèmes et dans tous les contextes.
Solutions techniques possibles :
Réaliser une icône multi-formats en 16x16 ou 32x32.
Moyens de contrôle :
Vérifier que l'icône s'adapte bien en l'affichant en différentes tailles dans l'explorateur de votre
système.
Afin de pouvoir s’adapter, un favicon doit être créée au moins au format 32x32 pixels, d’après la Bonne
Pratique Opquast. Mais c’est au format 16x16 pixels qu’elle s’affiche la plupart du temps. Il faut donc prévoir
que l’icône soit toujours "lisible" et que l’image soit propre dans ces deux tailles. Un favicon peut également
être prévue en 48x48 pixels. L'icône doit être en 256 couleurs au maximum.
Comme vous vous en doutez, il est assez difficile de faire tenir un graphisme minutieux dans un si petit
format. Optez pour des images simples, un logo, une ou deux lettres.
Le favicon est en fait un avatar de site : il doit refléter votre site, de façon à ce que l’internaute puisse
aisément associer l’icône au site. Sa couleur dominante sera donc identique à celle du site.
Si vous avez un logo, il est logique de l’utiliser pour fabriquer l’icône. Le réduire au bon format ne suffit pas
3/8
toujours, et il faut souvent le retoucher pour qu’il demeure visuellement signifiant, net et non pas flou. Il doit
tenir dans ce format carré. Évitez les zones vides, transparentes : il est dommage de ne pas utiliser tous les
pixels d’une si petite surface.
Installer le favicon
Pour insérer votre favicon, vous devez :
 Enregistrez-le au format de votre choix;
 placer l’image à la racine de votre site (voir commentaire un peu plus bas);
 placer le code d’appel de l'image dans le head de chaque page.
Placer une image favicon.ico à la base d'un site, et elle sera automatiquement repérée et affichée par
Microsoft Internet Explorer. Ceci est une mauvaise approche car :
 cette pratique s'apparente à des attaques de déni de service, ou Denial of Service (DoS) ;
 en recherchant systématiquement favicon.ico (et en ne la trouvant généralement pas), les
navigateurs remplissent les logs des serveurs web avec des requêtes inutiles, ce qui complique la
tâche des webmestres.
Par contre, si l'image est dans un sous dossier, Internet Explorer n'affiche pas l'icône.
Le format des icônes
Le format des icônes dépend de votre navigateur. Un seul format est supporté par tous, c’est le ICO.
Les navigateurs modernes comme Firefox supportent une très grande variété de formats d'image : PNG,
MNG, JPEG, GIF (animé ou non), XBM, BMP, ICO.
Microsoft Internet Explorer supporte uniquement le format d'image ICO. Depuis la version 11, il accepte les
.png. Donc, IE 10 et moins .ico.
Attention à respecter le copyright. Vous ne pouvez pas toujours récupérer pour votre usage les icônes des
programmes.
Code HTML dans la page
Il existe deux manières d’informer le navigateur de l’existence d’une icône pour la page, une bonne et une
mauvaise, je vous laisse trouver le navigateur qui ne supporte que la mauvaise.
Si on respecte les standards
Vous devez mettre le lien suivant dans votre page entre les balises <head> et </head>.
Par exemple :
<link rel="icon" type="image/png" href="favicon.png" />
ou
<link rel="icon" type="image/gif" href="favicon.gif" />
ou
<link rel="icon" type="image/jpeg" href="favicon.jpg" />
Remarquez le type qui contient le type ou Mime Type de l’image. Voici les types les plus courants :
 image/png
image PNG.
 image/gif
image GIF.
 image/jpeg
image JPEG ou JPG.
 image/x-icon
image de type icon, attention ce format n’est pas un format standard.
Selon le format de fichier de votre icône (les navigateurs modernes supportent différents formats de favicon,
y compris animé).
Explications :
 rel="icon"
signifie que l'image en question est une icône ;
4/8


type="image/png"
href="favicon.png"
définit l'objet comme une image au format png ;
est simplement l'adresse de l'image.
Tableau des différents navigateurs et versions vs .png :
http://caniuse.com/#feat=link-icon-png (à voir)
Si on ne respecte pas les standards (pour Internet Explorer)
Internet Eplorer 11 accepte maintenant les .png
Pour qu'Internet Explorer puisse utiliser l’icône (pour IE 10 et moins), vous serez obligé d'utiliser un .ico.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Notez l’utilisation du type shortcut icon à la place de icon et l’obligation d’utiliser une image au format ICO.
Paradoxalement, on préfère souvent cette seconde approche, qui est non respectueuse des standards, mais
supportée par la majorité des navigateurs.
L'attribut type="image/x-icon" peut également être omis mais c'est encore plus à éviter :
<link rel="shortcut icon" href="favicon.ico" />
IMPORTANT : Pour voir votre favicon sur IE, vous devez mettre votre page web sur un
serveur sinon sur le bureau, vous ne verrez pas votre favicon.
Format MNG et Internet Explorer
Le type MNG c'est comme les gifs animés mais pour le PNG. Le fichier MNG permet par ailleurs d’avoir plus
de 256 couleurs dans votre icône.
Petite explication sur video/x-mng
<head>
...
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="video/x-mng" href="favicon.mng" />
</head>
<!—pour IE -->

Et voilà, en mettant après le lien pour Internet Explorer, le lien vers la version animée. Internet Explorer va
prendre la première solution qu’il comprend et va laisser tomber le reste. Mozilla lui, va tout comprendre,
mais ne va garder que la dernière déclaration, c’est à dire la version animée pour l’affichage.
<link rel="icon" type="video/x-mng" href="favicon.mng" />
Format GIF (animé) et Internet Explorer

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

<link rel="icon" type="image/gif" href="favicon.gif" /> 
Ou
e

5/8
<link rel="icon" type="image/gif" href="favicon.gif" />

Favicon pour iPhone, iPod Touch et iPad
Les favicon sont utilisées lorsque vous ajouter un site à l’écran d’accueil. Les dimensions des favicon
classiques n’étant pas adaptées à l’interface utilisateur iOS, le navigateur prend une capture de la page sur
laquelle vous vous trouvez au moment où vous décider d’ajouter le site à l’écran d’accueil. Pour fournir une
image particulière, il faut créer une image de 57 pixels par 57 (iOS 6 et avant), et ajouter une balise link
dans la balise head de toutes les pages du site.
Tout dépend de votre iOS. Les appareils plus anciens iOS ne comprennent pas les sizes attribuent et ainsi
utiliser la valeur la dernière.
iPhone
26 septembre 2014
(non complet)
iOS 6 et avant
iOS 7
iOS 8
non-Retina
57 × 57
60 × 60
iPad
Retina
114 × 114
120 × 120
non-Retina
72 × 72
76 × 76
Retina
144 × 144
152 × 152
180 x 180
À voir pour plus de détails : https://developer.apple.com/library/ios/qa/qa1686/_index.html
Attention : si vous mettez un fond transparent, il va apparaître noir sur le iPad (les autres, je ne les ai pas
encore testés).
Il existe un générateur de favicon qui génère vos favicons et vous donne le code (excepté pour le .ico).
RealFavicon Generator.net : http://realfavicongenerator.net/
Vous devez fournir une image de 260x260 en png. Il s'occupe du reste.
Voici le code généré et autant d'icônes (cela fait beaucoup de code dans le head…) :
<link rel="icon" sizes="16x16" href="favicon-16x16.png" type="image/png">
<link rel="icon" sizes="196x196" href="favicon-196.png" type="image/png">
<link
<link
<link
<link
<link
<link
<link
<link
<link
rel="apple-touch-icon"
sizes="57x57" href="apple-touch-icon-57x57.png">

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
À noter : Le / devant le nom de l'image indique la racine de votre site web.
Attention : Les balises link générées par l'outil ne sont pas valides XHTML Strict. Il manque le / à la fin...
Si vous ne souhaitez pas que le navigateur n’applique un effet « bulle de verre » à votre image, remplacez
apple-touch-icon par apple-touch-icon-precomposed dans l’attribut rel.
6/8
<link rel="apple-touch-icon-precomposed" href="votre_image.png" />
Tests effectués avec des couleurs différentes afin de vérifier le favicon utilisé selon l'appareil utilisé :

<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-57x57.png" />


Et plus… voir les liens de référence en bas de cette page.
favicon iphone et ipad
Site à voir absolument :
http://www.alsacreations.com/astuce/lire/1080-apple-touch-icon-iphone-ipad-ipod-icone.html
http://www.astuces-webmaster.ch/page/transformez-votre-site-en-veritable-web-app
https://developer.apple.com/library/ios/qa/qa1686/_index.html
http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes
Performances web
Même si aucun favicon n’est déclarée, les navigateurs chercheront le fichier favicon.ico à l’emplacement par
défaut. Pour éviter de remplir les logs du serveur avec des lignes et des lignes d’erreur 404 « fichier non
trouvé », il est recommandé de mettre un favicon à la racine du site.
ExpiresActive On
ExpiresByType image/ico "access plus 1 years"
7/8
Enfin, puisque cette icône change rarement, on peut éviter aux visiteurs de retélécharger le même fichier
encore et encore. Pour cela, dans le fichier .htaccess à la racine du site (ou mieux, dans la configuration du
vhost si vous avez la main dessus), mettre le code suivant :
Générateur de favicon multi-plateformes
Real Favicon Generator.net
https://realfavicongenerator.net/
wikiHow
http://www.wikihow.com/Generate-a-Favicon-for-All-Major-Platforms
Convertisseur d'une image en .ico
Online-convert.com :
Favicon.cc :
http://image.online-convert.com/fr/convertir-en-ico
Générateur et convertisseur de favicon : http://www.favicon.cc/ (bien)
ATTENTION :
Si vous changez simplement votre extension de fichier, par exemple : .jpg pour
.ico, votre favicon ne sera pas visible sur Internet Explorer.
Validateur de favicon
SEO SiteCheckup :
Real Favicon Generator.net
http://seositecheckup.com/tool/favicon (Très intéressant)
https://realfavicongenerator.net/favicon_checker#.VqZkYEbZgUq
8/8

Un favicon pour votre site

Transcription

Documents pareils

Créer une favicon

xnview - Manuel d`Utilisation PowerBoutique

N° 2 - Mars 2007 Review de Twilight Princess

Evaluation du site oraciones.click

Caisson de basse Série S

Télécharger la version PDF

fiche produit

mystery shopping

86 decembre 2007: les oeillets du ICON | Le forum des gréeurs

Fiche technique KIER214 DOUBLE VU

Fiche technique WRP80512R 100 RESISTANCES CMS 0805 1