Favicon de tailles multiples et transparentes

Version imprimable

10/06/2013, 17h57
sergeh

Favicon de tailles multiples et transparentes

Bonjour,

J'ai réalisé (avec plusieurs outils différents, mais à chaque fois le résultat est le même) une favicon contenant mon logo en plusieurs tailles différentes.

Quand je regarde dans des visionneuses du genre xnview, pas de soucis. Dans mes fenêtres Windows et Mac, les icones apparaissent aussi correctement. Mais dans les onglets des navigateurs, le fond de l'image, qui normalement est transparente, est remplacée par du noir.
Je n'arrive à obtenir un fond transparent dans ces onglets qu'en générant une favicon ne contenant qu'une seule taille (16x16) mais du coup, lorsqu'on crée un raccourcis de ma page sur le bureau, ça fait une icone toute pixellisée.

Quelqu'un peut-il m'aider à trouver une solution, ou c'est perdu d'avance ?
Merci !!
10/06/2013, 18h00
rodolphebrd

Bonjour,

avez-vous créez vos images au format .png et .ico?
11/06/2013, 09h53
sergeh

Bonjour,

Mon image d'origine est un png avec transparence.
Ensuite j'ai testé plusieurs outils différents (applications téléchargées/générateurs en ligne...) pour générer à chaque fois un .ico contenant plusieurs tailles : j'y importais mon "grand" png, et l'outil me générait un .ico contenant plusieurs tailles.

Mais quelque-soit l'outil utilisé, le résultat reste le même.
11/06/2013, 10h45
rodolphebrd
Avez-vous inséré les lignes de code entre les balises <head> et </head> pour les 2 formats d'image:
Code:

1 2 3 <link rel="icon" href="favicon.ico" /> <link rel="icon" type="image/png" href="logo.png" />

Voici ce que je suis en train de tester :
Code:

1 2 3 4 5 6 7 <link rel="icon" href="public/images/favicon.ico" type="image/x-icon" /> <link rel="icon" href="public/images/favicon_shrt.png" type="image/png" /> <link rel="shortcut icon" href="public/images/favicon_shrt.png" type="image/png" /> <link rel="shortcut icon" href="public/images/favicon_shrt.ico" type="image/x-icon" /> <link rel="shortcut icon" href="public/images/favicon_shrt.ico" type="image/vnd.microsoft.icon" /> <link rel="apple-touch-icon" href="public/images/favicon_shrt.png" /> <link rel="apple-touch-icon-precomposed" href="public/images/favicon_shrt.png" />
favicon.ico contient une version 16x16, elle apparait comme il faut dans les onglets.
favicon_shrt.ico contient des versions 16x16, 24x24, 32x32, ... etc.
Et favicon_shrt.png contient l'original en "grande" taille.

Cela semble fonctionner, j'ai bien la favicon.ico dans la barre du navigateur, et à priori le système récupère favicon_shrt.ico pour le raccourcis.

Merci en tout cas pour l'aide !!!!!