18008 sujets

Questions générales et questions de débutants

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.

upload/1624791114-58253-2021-06-27125024-faviconcheck.png

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

upload/1624789177-58253-2021-06-27121240-faviconcheck.png

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 Smiley smile

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 :

upload/1624816530-68566-capturedaeacran2021-06-27aa19.png

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 Smiley smile
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 Smiley lol

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 Smiley smile
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,

1)
apple-touch-icon.png a été passé sur fond blanc au lieu de transparent, le résultat me plait.

upload/1625248487-58253-2021-07-02195252-faviconcheck.png

2)
A votre avis quelle image est utilisée par Firefox qui montre les sites les plus fréquentés quand on ouvre un nouvel onglet ?

upload/1625248612-58253-2021-07-02194952-mozillafiref.png

Je me demande comment il serait possible de grossir le logo dans sa cartouche.
le X à droite est bien gros, comment font-ils ?
boteha_2 a écrit :
Bonjour,

1)
apple-touch-icon.png a été passé sur fond blanc au lieu de transparent, le résultat me plait.

upload/1625248487-58253-2021-07-02195252-faviconcheck.png

2)
A votre avis quelle image est utilisée par Firefox qui montre les sites les plus fréquentés quand on ouvre un nouvel onglet ?

upload/1625248612-58253-2021-07-02194952-mozillafiref.png

Je me demande comment il serait possible de grossir le logo dans sa cartouche.
le X à droite est bien gros, comment font-ils ?


Va voir le code source du site pour savoir comment ils font...
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 :

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


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.
Bonjour,

Merci de ton suivi.

Tu penses donc que Firefox utilise cette image :

<link rel="icon" type="image/png" sizes="192x192"  href="/catalogue/images/favicon/android-icon-192x192.png">


Le générateur m'a créé une image 192x192 :

android-chrome-192x192.png

Elle est à la racine du site mais ne figure pas dans la liste des <link>.

Je suppose que le générateur sait ce qu'il fait, je n'ai pas trop envie de modifier la liste des <link>.

J'ai aussi :

android-chrome-512x512.png

Je ne sais pas trop quoi faire...
Modifié par boteha_2 (04 Jul 2021 - 12:09)
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"
    }
  ]
}
Pour moi le webmanifest c'est pour les webapps. Je ne pense pas que Firefox l'utilise pour ses icônes de la page d'accueil. Pour ma page à moi, je pense qu'il utilise le svg car ça ne pixelise pas quand je zoome à mort.
Bonsoir,

Je suis l'auteur de RealFavicon. Le site change, lentement mais sûrement ???? L'éditeur de favicon SVG est prêt ( https://realfavicongenerator.net/svg-favicon/ ), et tout le site lui-même sera amené à se mettre au goût du jour.

Je valide ce qui a été dit ci-dessus, notamment en ce qui concerne la touch icon apple et l'absence de gestion de la transparence. D'où le fond noir.

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.

Bonne soirée,
Philippe
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 ?

upload/1625503515-58253-2021-07-02194952-mozillafiref.png

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.

upload/1625773548-58253-capturedancran2021-07-08no17..png

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

upload/1625773631-58253-capturedancran2021-07-08no17..png
Salut Boteha,

ça ne vient pas de ce que j'avais écrit plus haut, à savoir :

a écrit :
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">


?

Merci @Philippe_B d'être passé sur le forum ! Je ne savais pas que RealFavicon avait été créé par un Français Smiley smile
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)
Sujet clos
Aller à