Bonjour,

J'ai mis en place plusieurs fichiers favicon en différentes résolutions.

Dans les marques pages ou barre d'adresse des navigateurs le favicon s'affiche bien.

Sous Firefox, sur mon smartphone quand j'ajoute mon site sur la page d'accueil le favicon s'affiche bien sur toute la surface 1x1, par contre avec Chrome ou le navigateur de Samsung le favicon n'occupe pas tout l'espace et s'affiche dans un fond blanc, voir images ci-après

De plus, Firefox mets le nom de la page du site comme nom du raccourci alors que Chrome et Samsung mettent 'favicon'

Comment remédier à ce problème d'image?

Merci

Bonjour,

Personne pour m'aider sur ce problème qui a pourtant une solution puisque sur certains sites, dont OpenClassRoom, l'image s'affiche bien dans la totalité de 1x1 et le nom du site est bien proposé ?

dans le head j'ai

<meta name="application-name" content="Baia" />
<meta name="msapplication-TileImage" content="images/favicon/ms-favicon-144.png">
<link rel="shortcut icon" href="images/favicon/favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="16x16" href="images/favicon/favicon-16.png" type="image/png" />
<link rel="icon" sizes="32x32" href="images/favicon/favicon-32.png" type="image/png" />
<link rel="icon" sizes="48x48" href="images/favicon/favicon-48.png" type="image/png" />
<link rel="icon" sizes="96x96" href="images/favicon/favicon-96.png" type="image/png" />
<link rel="icon" sizes="192x192" href="images/favicon/favicon-192.png" type="image/png" />
<link rel="icon" sizes="256x256" href="images/favicon/favicon-256.png" type="image/png" />
<link rel="icon" sizes="512x512" href="images/favicon/favicon-512.png" type="image/png" />
<link rel="apple-touch-icon" sizes="57x57" href="images/favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="images/favicon/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="80x80" href="images/favicon/apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="images/favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="images/favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="images/favicon/apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="167x167" href="images/favicon/apple-touch-icon-ipad-retina.png" />
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon-iphone-retina.png" />
<link rel="manifest" href="manifest.json">
<link rel="manifest" href="site.webmanifest">

et le fichier site.webmanifest contient

{
    "name": "Mon Site",
    "short_name": "Mon Site",
    "icons": [
        {
            "src": "/images/favicon/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/images/favicon/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Bonjour.

Peut-être que lorsque tu as modifié la définition (et non la résolution*) de tes images, tu n'as pas activé la transparence pour toutes ?

Cordialement.

*Erreur très, très répandue depuis que les fabricants d'appareil photo annoncent la définition de leur capteurs en parlant de résolution, mais je n'abandonne pas, tout comme je mets le mot espèce au féminin ;-)

-
Edité par Domi65 13 décembre 2023 à 10:56:11

Bonjour,

Toutes les images sont bien transparentes.

Le problème c'est qu'elles n'occupent pas toute la surface, comme si elles étaient réduites pour entrer dans un fond blanc

Cordialement

Hello !

Ton site est en ligne ? Mets-nous son URL qu'on essaie de comprendre.