Icône favicon.ico sur mobile

Version imprimable

19/12/2022, 16h03
laurentSc

Icône favicon.ico sur mobile

Bonjour,

mon souci est que j'ai pu mettre un "favicon" qui est visible sur PC (Firefox), mais pas sur mobile (testé sur 2 iphones (Safari)). Pour voir si le favicon est affiché, faire avec Google la requête guêpes vercors et le title du site est éliminer guêpes ou frelons dans Vercors ou bassin grenoblois.
Pour ce faire, j'ai essayé les 2 méthodes proposées dans https://tutoriels.lws.fr/wordpress/favicon-wordpress, donc avec le plugin Favicon by RealFaviconGenerator et avec une méthode manuelle.
Mais sur iphone, l'icône reste celle par défaut (WP). Comment faire (l'icône attendue est une guêpe) ?

Bonsoir,

je détaille la méthode manuelle. Son avantage est qu'on maîtrise plus.

1- J'ai généré un favicon.zip avec le générateur https://realfavicongenerator.net (j'avais déjà créé une image carrée de 612px par 612px). J'ai renommé ce fichier en favicon.ico. Puis je l'ai transféré à la racine du site à l'aide de Filezilla.

2- J'ai copié ce code :
Code:

1 2 3 4 5 6 <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="/site.webmanifest"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff">
dans le header.php du thème enfant.

Résultat : l'icône est bien visible sur desktop, par contre sur mobile (j'ai testé sur 2 Iphones), on a encore l'icône par défaut (WP).

Donc comment faire pour que ça soit correct aussi sur mobile ?

Bonjour,
j'ai essayé une autre méthode manuelle :

1- génération des fichiers image avec le générateur https://www.favicon-generator.org/ et au départ, je lui ai fourni https://pasdpanique.fr/wp-content/up...mmune-512.jpeg (image 512px par 512px)

2- je mets tous les fichiers générés dans le répertoire /assets/img/ (situé à la racine du thème enfant)

3- dans functions.php du thème enfant, je mets ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
 * Generated favicons
 * @see https://www.team-ever.com/wordpress-personnaliser-les-favicons-du-site
 */
function generated_favicons() {
    echo '
    <link rel="icon" sizes="57x57" href="'.get_stylesheet_directory_uri().'/assets/img/favicon.ico">
    <link rel="apple-touch-icon" sizes="57x57" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-180x180.png">
    <link rel="apple-touch-icon-precomposed" href="'.get_stylesheet_directory_uri().'/assets/img/apple-icon-57x57.png" />
    <link rel="icon" type="image/png" sizes="192x192"  href="'.get_stylesheet_directory_uri().'/assets/img/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="'.get_stylesheet_directory_uri().'/assets/img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="'.get_stylesheet_directory_uri().'/assets/img/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="'.get_stylesheet_directory_uri().'/assets/img/favicon-16x16.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="'.get_stylesheet_directory_uri().'/assets/img/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    ';
}
add_action('wp_head', 'generated_favicons');

mais c'est toujours pas visible sur iphone (je crois que c'est bon sur androïd). Comment faire, SVP ?

22/12/2022, 08h21
NJNDEV

Proposition de Test

Bonjours, si tu veux , je peux tester sut mon Androïd avec l'adresse de ton site et la page incriminée.
22/12/2022, 09h31
laurentSc

Bonjour,

je suis preneur pour l'essai car sur certains modèles de smartphone, ça marche, mais pas sur les iphones ni certains androïd...

Pour vérifier, le mieux est de faire une recherche dans Google. Par exemple guêpes Vercors et de vérifier l'icône devant le site https://pasdpanique.fr/
titre affiché par Google (tant qu'une réindexation ne sera pas faite car je l'ai changé) : éliminer guêpes ou frelons dans Vercors ou bassin grenoblois