Favicon
La favicon est l’icône affichée par les navigateur dans l’onglet de la fenêtre, dans les favoris enregistrés ou encore dans les résultats de la recherche depuis la barre d’adresses. La balise permettant de définir l’icône doit être placée dans la balise <head>. Il a longtemps été recommandé d’enregistrer cette image au format .ico (format propriétaire de Windows) mais les navigateurs gèrent depuis un moment le format .png qui est libre et plus adapté au web.
<link rel="icon" type="image/png" href="favicon.png">
Icône iOS
Sur iOS, il est possible d’enregistrer sur l’écran d’accueil et au milieu des autres applications des raccourcis vers des sites internet. L’icône qui sera utilisée pour ce raccourci peut être personnalisé. S’il n’y a pas d’icône, c’est une capture d’écran qui sera utilisée.
L’image doit être carrée, d’une résolution minimum de 114×114 pixels et enregistrée au format .png. Les coins seront automatiquement arrondis par iOS.
<link rel="apple-touch-icon" href="chemin/ios_icon.png">
Il faut savoir qu’Apple applique par défaut un arrondissement des angles et un effet glossy à l’icône. Pour désactiver ce comportement il suffit d’ajouter -precomposed à l’attribut rel.
<link rel="apple-touch-icon-precomposed" href="chemin/ios_icon.png">
Exemple complet :
<!-- troisième-génération iPad avec haute-résolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/favicon144.png"> <!-- iPhone avec haute-résolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/favicon114.png"> <!-- iPad de première et deuxième génération : --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/favicon72.png"> <!-- iPhone non-Retina, iPod Touch et appareils Android 2.1+: --> <link rel="apple-touch-icon-precomposed" href="img/favicon57.png"> <!-- favicône de base --> <link rel="shortcut icon" href="img/favicon32.png">
Tuile Modern UI pour Windows
Depuis Windows 8 et sa gestion des tablettes tactiles, Microsoft a déployée Modern UI. Il s’agit du nom donné à une nouvelle interface comprenant notamment des tuiles sur l’écran de lancement remplaçant l’ancien menu démarrer. Il est possible de créer une tuile servant de raccourci vers un site (à l’instar du fonctionnement disponible sur iOS et Android).
Des méta balises permettent de personnaliser cette tuile en définissant l’image à afficher, la couleur de fond et le titre. Pour l’image, un format de 144×144 pixels au format PNG 32 bits sur fond transparent est recommandé (format PNG24). Le fond doit être transparent car Windows se permet des ajustements.
<meta name="msapplication-TileColor" content="#b0d139"> <meta name="msapplication-TileImage" content="chemin/tuile_icon.png"> <meta name="application-name" content="Alsacréations">