Favicon de tailles multiples et transparentes

**sergeh** · 10/06/2013, 17h57

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 !!

**rodolphebrd** · 10/06/2013, 18h00

Bonjour,

avez-vous créez vos images au format .png et .ico?

**sergeh** · 11/06/2013, 09h53

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.

**rodolphebrd** · 11/06/2013, 10h45

Avez-vous inséré les lignes de code entre les balises <head> et </head> pour les 2 formats d'image:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**sergeh** · 11/06/2013, 11h16

Voici ce que je suis en train de tester :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !!!!!

Favicon de tailles multiples et transparentes

HTML

Discussions similaires

Partager

Partager