Favicon avec RealFaviconGenerator

Bonjour,

J'ai utilisé RealFaviconGenerator pour générer ma favicon.

<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">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Il y a des choses que je ne comprends pas avec Safari.

iOS Safari : fond noir horrible

Voir images jointes.



Mac OS X El Capitan Safari : couleur bleu assez moche.



Est-il possible de corriger avec le code html ci_dessus ?

Faut-il générer d'autres images que celles générées par RealFaviconGenerator ?

Merci de votre aide.
Modifié par boteha_2 (08 Jul 2021 - 21:49)

Salut

boteha_2 a écrit :
iOS Safari : fond noir horrible

Je pense qu'iOS ne gère pas la transparence des .png dans ce cas. C'est indiqué sur le site :



Si c'est le cas, on y peut rien. Tu peux cependant choisir une couleur de fond pour l'icône, mais j'ai pas l'impression que tu puisses le modifier directement dans le HTML.

boteha_2 a écrit :
Mac OS X El Capitan Safari : couleur bleu assez moche.
Est-il possible de corriger avec le code html ci_dessus ?

Essaye de remplacer le code hexa de la couleur par celle de ton choix ici :

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

La couleur #5bbad5 semble tout à fait correspondre au "bleu assez moche" ^^
Mais on peut aussi définir cette couleur depuis le site il me semble

Bonjour,

Merci de tes réponses.

Un truc que je comprends pas avec Mac OS X El Capitan Safari (couleur bleu assez moche).

On est obligé de définir une couleur dans le link ?

Safari ne peut pas prendre l'icône avec ses couleurs natives, cela m'étonnerait quand même ?
Modifié par boteha_2 (27 Jun 2021 - 20:19)

On est effectivement obligé de définir une couleur, mais il faut savoir que ce mask-icon n'a l'air de concerner uniquement Mac OS 10.11 avec Safari, et il semblerait que cette icône ne s'affiche que sur les onglets épinglés en plus. Ça limite donc vraiment le nombre d'utilisateurs potentiels de cette fonctionnalité, aujourd'hui, en 2021.
Est-ce que ça vaut alors le coup d'y investir autant d'effort ? Je ne sais pas, à toi de voir ^^

D'ailleurs, même le site web Apple.com ne semble plus l'utiliser

Je suis en Mac OS 10.14 et mon Safari affiche bien mon favicon de la même façon qu'un autre navigateur récent.

En 2021, il est communément admis que le code suivant est le minimum requis pour l'affichage des favicons sur les navigateurs :

<link rel="icon" href="/favicon.ico"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

N'hésitez pas à me contredire si je me trompe :

• Le favicon.ico en 32x32 assure le support standard du favicon sur les tous les navigateurs et notamment les plus anciens.
• Depuis iOS 8, seule un favicon en .png au format 180x180 est nécessaire (pour le apple-touch-icon)

Il n'y a donc peut être plus besoin de s'embêter avec ces favicon propriétaires aujourd'hui...

Cet article me semble pas mal pour les explications

Bonjour Loraga,

Encore merci pour tes réponses documentées.

Je vais réfléchir à tout cela.

A priori on peut penser que RealFaviconGenerato fait bien le boulot avec un nombre limité d'images et de liens.

Ce qui m'ennuie le plus est le fond noir que génère iOS Safari.
Actuellement mon image source est à fond transparent, je vais essayer une image à fond blanc pour iOS Safari.

Je vous tiens informés.

Bonjour,

C'est du sérieux :

<link rel="apple-touch-icon" sizes="57x57" href="/catalogue/images/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/catalogue/images/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/catalogue/images/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/catalogue/images/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/catalogue/images/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/catalogue/images/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/catalogue/images/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/catalogue/images/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/catalogue/images/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/catalogue/images/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/catalogue/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/catalogue/images/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/catalogue/images/favicon/favicon-16x16.png">
<link rel="manifest" href="/catalogue/images/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/catalogue/images/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">  

Et le manifest :

{
 "name": "App",
 "icons": [
  {
   "src": "\/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  },
  {
   "src": "\/android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
  },
  {
   "src": "\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  }
 ]
}

Reste à savoir quelle image est utilisée par Firefox pour le nouvel onglet...
Modifié par boteha_2 (03 Jul 2021 - 14:55)

boteha_2 a écrit :
Bonjour,

C'est du sérieux :

<link rel="apple-touch-icon" sizes="57x57" href="/catalogue/images/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/catalogue/images/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/catalogue/images/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/catalogue/images/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/catalogue/images/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/catalogue/images/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/catalogue/images/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/catalogue/images/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/catalogue/images/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/catalogue/images/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/catalogue/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/catalogue/images/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/catalogue/images/favicon/favicon-16x16.png">
<link rel="manifest" href="/catalogue/images/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/catalogue/images/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">  

Et le manifest :

{
 "name": "App",
 "icons": [
  {
   "src": "\/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  },
  {
   "src": "\/android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
  },
  {
   "src": "\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  }
 ]
}

Reste à savoir quelle image est utilisée par Firefox pour le nouvel onglet...

Je dirais celle en 192px. Pour confirmer va voir chez un autre quelle taille ils n'ont pas.

Moi j'ai mis juste ça pour ma homepage et ça marche partout :

	<link rel="icon" href="icon.svg" type="image/svg+xml">
	<link rel="icon" type="image/png" href="apple-touch-icon.png">
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<link rel="manifest" href="/manifest.webmanifest">

// manifest.webmanifest
{
"icons": [
{ "src": "192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "512.png", "type": "image/png", "sizes": "512x512" }
]
}

Bonjour kerlutinoec,

Merci de ton suivi.

Pour l'instant je m'intéresse juste à la taille de l'icône affichée par Firefox quand on ouvre un nouvel onglet vide.

Alsacreations s'affiche à une taille sympa, je ne sais pas si la manifest y est pour quelque chose.

{
  "name": "Alsacreations Forum",
  "theme_color": "#abc737",
  "background_color": "#fff",
  "start_url": "https://forum.alsacreations.com",
  "display": "fullscreen",
  "orientation": "portrait",
  "icons": [{
      "src": "\/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image\/png",
      "density": "0.75"
    },
    {
      "src": "\/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image\/png",
      "density": "1.0"
    },
    {
      "src": "\/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image\/png",
      "density": "1.5"
    },
    {
      "src": "\/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image\/png",
      "density": "2.0"
    },
    {
      "src": "\/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image\/png",
      "density": "3.0"
    },
    {
      "src": "\/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image\/png",
      "density": "4.0"
    }
  ]
}

Je ferai des essais.

Je vous tiens informés.

Bonjour Philippe,

D'abord merci pour la qualité de votre outil RealFaviconGenerator.

Je fais la recherche que vous conseillez dès que j'ai le temps, cela peut prendre quelques jours.

Vous avez compris mon problème, pourquoi l'onglet vierge de Firefox affiche ma favicon en petite taille alors que le "X" à droite arrive à être en bonne traille ?



Par contre l'affichage est bon sur Chrome.

Ce n'est pas très grave mais j'aime bien aller au fond des problèmes.

Je vous tiens informés.
Modifié par boteha_2 (05 Jul 2021 - 19:01)

Bonjour,

Avant de poursuivre les tests je montre le résultat sous Safari 14.0.1 et macOS Big Sur version 11.0 pour MacBook Pro 13 pouces.



La couleur bleu fadasse est indépendante des préférences système.

Bonjour Philippe

Philippe_B a écrit :
Bonsoir,
Pour découvrir quelle icône Firefox utilise, je recommande d'utiliser http://test01-v0-17-attempt-5.test.realfavicongenerator.net/ . L'intérêt : chaque icône est différente des autres, de sorte qu'on les distingue d'un coup d'oeil.

Excuse-moi mais je ne comprends pas comment utiliser cet outil pour trouver l'image utilisée par Firefox.
je ne vois pas comment sélectionner une URL ou une image et je ne trouve pas d'aide.

Peux-tu m'en dire un peu plus ?
Modifié par boteha_2 (10 Jul 2021 - 21:59)