[Résolu] Favicon, simple, complet, ou pas ?

Bonsoir à tous,

Je suis en train de finaliser mon futur site professionnel, et en testant une des versions sur smartphone sur Android (j'utilise Firefox Focus), j'ai constaté que les favicons ne s'affichaient pas sur l'écran d'accueil du smartphone, mais qu'une lettre dans un carré violet était à la place. Avec Samsung browser (qui est une catastrophe soit dit passant pour la lecture du CSS) j'ai bien le favicon…

Donc le navigateur déciderai de l'affichage du favicon ou non. Dès lors quel intéret y a t il à mettre la formule complète des favicons, surtout qu'au final, si on passe par un site comme https://realfavicongenerator.net/ on se retrouve avec des png et svg non optimisés assez lourds (l'optimisation fait gagner 25% de poids environ sur ces fichiers d'après mes constats).

Qu'utilisez vous ? Pas de favicon, un favicon style old school .ico, un .png ou la ribambelle de favicons créée par les générateurs ?

Merci pour vos avis, qui m'éclaireront (j'avais fait le générateur, mais c'est lourd pour seulement un micro site de 2 pages…)

Bonsoir. C'est un choix on ne peut plus personnel. Moi je reste old school en ce domaine... pour l'instant.

La dernière fois que j'ai eu à m'en occuper : toutes les favicons correspondant au support navigateur annoncé au client donc pas iOS 3 mais 10+, Fx, Chrome, Android 5 ou 6+, IE11, Edge 16+, etc et soit le client envoyait les sources selon nos recommandations, soit on s'en occupait et ensuite snippet HTML généré via la webapp que tu cites. Ça alourdit un peu le code HTML mais bah ça se compresse particulièrement bien et c'est que dalle face à une simple image ou jQuery.
Modifié par Felipe (05 Nov 2018 - 10:07)

Bonsoir,
Merci pour vos réponses.
Il me semblait avoir lu quelque part que de multiplier les favicons engendrait le chargement de tous les favicons pour qu'au final un seul soit utilisé.
Mon site n'utilise justement pas jQuery ou autre justement pour rester très léger (je suis à 65 ko pour tout le site, images - quasi toutes les images sont en svg -, css et html compris).

Y a t il d'autres avis dans la salle ?

Merci
Bonne fin de soirée
Modifié par januor (06 Nov 2018 - 00:02)

100 fois moins que le poids d'une page du site de ma ville donc (et 50 fois moins que le poids moyen d'une page web en 2018 ).
Si tu as accès aux logs serveur, ce serait super intéressant de voir si plusieurs versions sont téléchargées. Je sais que favicon.ico est téléchargé même sans être indiqué dans le code source (coucou les 404) et que le cache est… différent (les navigateurs n'en font qu'à leur tête, repassent au doigt mouillé toutes les ~48H mais sans garantie et que ça n'a rien à voir avec les caches des pages, cookies et autres)

Bonjour,

J'ai accès aux logs, visiblement, seuls les favicons affichés sont téléchargés (j'ai supprimé un à un les favicon, et n'ai pas eu de message d'erreur en étant sur le laptop).

Par contre je me prends la tête…
Voici mon code source :

<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
		<link rel="manifest" href="favicon/site.webmanifest">
		<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
		<meta name="apple-mobile-web-app-title" content="Nom">
		<meta name="application-name" content="Nom">
		<meta name="msapplication-TileColor" content="#ffc40d">
		<meta name="msapplication-config" content="favicon/browserconfig.xml">
		<meta name="theme-color" content="#ffffff">

J'ai bien l'icone dans l'onglet de Firefox, mais impossible d'avoir sur Firefox un raccourci vers mon écran de smartphone et rien non plus dans la page de démarrage où il y a l'historique, juste une laconique lettre sur fond de couleur…

quelqu'un saurait d'ou vient le problème ?

Merci
Modifié par januor (08 Nov 2018 - 00:13)

Ca semble fonctionner désormais, sans doute un soucis de cache de navigateur ou je ne sais quoi.