Aller au contenu


Real Favicon Generator, des favicons optimaux en toute situation


  • Vous ne pouvez pas répondre à ce sujet
No replies to this topic

#1 noisette

noisette

    Webmarster

  • Admin
  • PipPipPipPipPipPipPipPipPip
  • 20 959 Messages :
  • Gender:Male

Posté 22 décembre 2015 - 10:21

real_favicon_generator.png

 
 
 
On ne présente plus aujourd'hui ce qu'est un Favicon, tant celui-ci  est adopté par presque tous les sites pour personnaliser raccourcis, onglets et favoris de leurs visiteurs.
 
Simplement, force est de constater que parallèlement, les différents navigateurs des différentes plateformes ne se sont pas forcément entendus pour définir leur charte graphique, et en particulier, la taille et la résolution que devrait avoir un favicon pour un affichage optimal. Si bien qu'aujourd'hui, ce n'est pas un favicon qu'il faut fournir, mais tout un jeu - si l'on tient à apporter le même soin à tous les visiteurs.
 
On pense partir pour une opération simple mais répétitive et fastidieuse ... et c'est là qu'intervient Real Favicon generator.
 
Vous uploadez votre image qui doit servir à vos favicons, et si le ratio de cette image n'est pas idéal, il vous sera proposé de compléter avec un fond transparent,
vous pouvez ensuite configurer un autre jeu que le jeu complet par défaut, et apporter une petite et dernière touche de personnalisation,
et il reste enfin à faire générer le jeu d'images et le code à placer dans le head de votre fichier.
 
Pour se rendre compte du travail évité ...




 
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> 
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> 
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> 
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> 
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> 

<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> 
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> 
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> 
<link rel="manifest" href="/manifest.json"> 
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<meta name="msapplication-TileColor" content="#da532c"> 
<meta name="msapplication-TileImage" content="/mstile-144x144.png"> 
<meta name="theme-color" content="#ffffff">

Le seul truc à faire, tout de même, pour aller au bout du truc, c'est de passer par là: Optimiser ses images pour le net

Voilà voilà, c'est donc par ici: http://realfavicongenerator.net/
 
 
:byebye:



1 utilisateur(s) en train de lire ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)