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