Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1918 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Impossible de mettre plusieurs favicon sur meme site

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Impossible de mettre plusieurs favicon sur meme site

n°2364499
Manu27
...
Posté le 13-10-2020 à 16:24:37  profilanswer
 

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

mood
Publicité
Posté le 13-10-2020 à 16:24:37  profilanswer
 

n°2364507
mechkurt
Posté le 13-10-2020 à 16:50:34  profilanswer
 

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
n°2364517
Manu27
...
Posté le 13-10-2020 à 17:43:51  profilanswer
 

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

n°2364522
Manu27
...
Posté le 13-10-2020 à 18:20:35  profilanswer
 

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 !

n°2364556
mechkurt
Posté le 14-10-2020 à 10:09:32  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Impossible de mettre plusieurs favicon sur meme site

 

Sujets relatifs
installation sql server 2019 impossibleCSS qui modifie plusieurs sites contre mon gré..
Afficher plusieurs webcams du monde entier sur un ecranVBA PPT - Sélectionner plusieurs Shape pour appliquer une animation
API pour Site Web de copropriétéExécution OK sous Eclipse, mais impossible en ligne de commande
Besoin de lumière concernant un site web créeRécupérer la valeur texte d'un site.
Problèmes pour site web htmlouvrir plusieurs URL simultanément ?
Plus de sujets relatifs à : Impossible de mettre plusieurs favicon sur meme site


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR