Impossible de mettre plusieurs favicon sur meme site

Impossible de mettre plusieurs favicon sur meme site - HTML/CSS - Programmation

Marsh Posté le 13-10-2020 à 16:24:37    

Bonjour à tous,
 
Je suis embêté avec les favicon.
 
J'en utilise un depuis plusieurs années, tout était ok.
 
à la racine de mon serveur ftp, j'avais mis plusieurs fichiers favicon (qui était le meme logo) avec les noms suivant :
 
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
safari-pinned-tab.svg
manifest.json
 
 
mon fichier index.html (lui meme à la racine du ftp) avait ces lignes de code :
 

Citation :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 <link rel="manifest" href="/manifest.json">
 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">


 
l'icone était vu par iOS et Android sous soucis.
 
J'ai eu besoin de refaire un fichier index.html avec un autre favicon sur ce même ftp.
Je précise que le tout n'est plus à la racine mais dans un repertoire (disons "exemple" pour ce cas)
 
J'ai crée le répertoire /exemple puis à l'intérieur, j'ai mis un autre favicon + un fichier index.html c'est à dire que dans le répertoire il y a :
 
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
safari-pinned-tab.svg
manifest.json
index.html
 
le code pour les favicon dans le fichier html est le suivant
 
mon fichier index.html (lui meme à la racine du ftp) avait ces lignes de code :
 

Citation :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link rel="apple-touch-icon" sizes="180x180" href="http://blablabla/exemple/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="http://blablabla/exemple/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="http://blablabla/exemple/favicon-16x16.png">
 <link rel="manifest" href="http://blablabla/exemple/manifest.json">
 <link rel="mask-icon" href="http://blablabla/exemple/safari-pinned-tab.svg" color="#5bbad5">


 
et la .. problème.
 
Safari / iOS arrivent à faire la différence et place le bon favicon sur le springboard de l'iPhone.
Par contre j'ai testé sous Android et à chaque fois, le navigateur reprend le favicon de la racine du répertoire sans faire attention à mes liens de direction dans le fichier index.html du repertoire /exemple.
 
J'espere que vous m'avez compris et j'espère avoir la solution magique :-D
 
Sachant que j'ai testé aussi de changé les noms des favicon comme ceci
 
apple-touch-icon-exemple.png
favicon-16x16-exemple.png
favicon-32x32-exemple.png
safari-pinned-tab-exemple.svg
manifest-exemple.json
 
puis j'ai mis ces fichiers directement à la racine du ftp avec évidement l'index modifié comme ceci
 

Citation :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link rel="apple-touch-icon" sizes="180x180" href="http://blablabla/apple-touch-icon-exemple.png">
 <link rel="icon" type="image/png" sizes="32x32" href="http://blablabla/favicon-32x32-exemple.png">
 <link rel="icon" type="image/png" sizes="16x16" href="http://blablabla/favicon-16x16-exemple.png">
 <link rel="manifest" href="http://blablabla/manifest-exemple.json">
 <link rel="mask-icon" href="http://blablabla/safari-pinned-tab-exemple.svg" color="#5bbad5">


 
Mais rieb y fait !!!!!
 
Merci d'avance

Reply

Marsh Posté le 13-10-2020 à 16:24:37   

Reply

Marsh Posté le 13-10-2020 à 16:50:34    

Si c'est Androide qui déconnes en défaultant sur la favicon à la racine je dirais à vue de nez que tu as des problèmes avec tes manifest.json, peut être des chemins relatif  vs absolus...
Perso j’utilise https://realfavicongenerator.net/ qui marche vraiment pas mal est qui est régulièrement mis à jour, tu peut vérifier le code généré pour voir ce qui ne fonctionne pas...
 
Si j'étais toi je n'encombrerais pas la racine avec toutes tes favicon, je laisserais juste un générique favicon.ico (car y'a toujours des requêtes qui finissent en 4004 dans les logs ^^) et tout le reste bien rangé dans des dossier :

Code :
  1. /favicon/default/
  2. /favicon/exemple/
  3. /favicon/autre/


 
Moi mes meta gaéré pour un site ressemble à ca :

Code :
  1. <link rel="apple-touch-icon" sizes="180x180" href="https://domaine.com/assets/favicon/apple-touch-icon.png">
  2.     <link rel="icon" type="image/png" sizes="32x32" href="https://domaine.com/assets/favicon/favicon-32x32.png">
  3.     <link rel="icon" type="image/png" sizes="16x16" href="https://domaine.com/assets/favicon/favicon-16x16.png">
  4.     <link rel="manifest" href="https://domaine.com/assets/favicon/site.webmanifest">
  5.     <link rel="mask-icon" href="https://domaine.com/assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
  6.     <link rel="shortcut icon" href="https://domaine.com/assets/favicon/favicon.ico">
  7.     <meta name="msapplication-TileColor" content="#ffffff">
  8.     <meta name="msapplication-config" content="https://domaine.com/assets/favicon/browserconfig.xml">
  9.     <meta name="theme-color" content="#ffffff">


 
Avec les bons fichiers et meta ça devrait fonctionner...


---------------
D3
Reply

Marsh Posté le 13-10-2020 à 17:43:51    

je teste ça dans les minutes à venir.
Je tiens au courant

Reply

Marsh Posté le 13-10-2020 à 18:20:35    

Alors
 
J'ai refais les fichiers avec le lien que tu m'a donné et j'ai re-codé les pages html en mettant, comme tu m'as conseillé, un dossier favicon.
 
Meme soucis
 
et j'ai tenté après en mettant les liens absolu vers le dossier favicon/exemple et sur android, il m'a mis le bon logo donc ça devrait être bon :-)
 
Merci de ton aide en tout cas !

Reply

Marsh Posté le 14-10-2020 à 10:09:32    

Manu27 a écrit :

et j'ai tenté après en mettant les liens absolu vers le dossier favicon/exemple et sur android, il m'a mis le bon logo donc ça devrait être bon :-)


mechkurt a écrit :

Si c'est Androide qui déconnes en défaultant sur la favicon à la racine je dirais à vue de nez que tu as des problèmes avec tes manifest.json, peut être des chemins relatif  vs absolus...


 [:ab614]  
Content que ma boule de cristal est fonctionné ! ^^
 
De manière général, les liens absolus sont quand même plus safe quand on fait du web...


Message édité par mechkurt le 14-10-2020 à 10:09:42

---------------
D3
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed