18034 sujets

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

Favicons

Bonsoir
vous avez le choix entre la création de votre fichier favicon à partir de zéro à l'aide cette éditeur en ligne
tatianapetit a écrit :
Bonsoir
vous avez le choix entre la création de votre fichier favicon à partir de zéro à l'aide cette éditeur en ligne

Certes, mais ce n'était pas le fond de ma question.
Faut il vraiment avoir autant de fichiers de type différent pour une chose aussi simple qu'une petite image? Ce que ce site en ligne fait ne serait il pas aussi bien fait par les navigateurs eux mêmes à partir du même fichier? Faut il vraiment autant de <link> dans l'en-tête de TOUS les fichiers HTML?
Je n'ai pas connaissance que cette multiplicité de link et de fichiers soit effectivement mise en œuvre dans les sites que je fréquente, il suffit de regarder le code source des pages.
Administrateur
Bonne question.

Tout dépend de la priorité que l'on peut accorder à la favicon ?

Il s'agit de la technique ultime qui couvre tous les cas de figure ou presque. Que l'on utilise pas forcément partout parce-que contraignante...

Les urls sont effectivement interrogées par les différentes plateformes surtout tactiles.
Salut Papy,

Ca dépend, regarde le code de quelques "good vibes" à suivre :
http://www.inpixelitrust.fr/blog/
http://romy.tetue.net/
http://www.creativejuiz.fr/blog/
Une grande partie du code est en place.
J'ai fait de même il y a peu pour mon site même s'il y a peu de probabilité que quelqu'un colle une icône de mon blog sur son écran. Disons que si tu veux proposer le top de la compatibilité d'icônes sur mobiles & Co c'est toujours mieux mais non obligatoire. C'est comme les polices, tu peux proposer une font-stack ou pas...
Et l'avantage de ce genre de site c'est que ça te fait tout le boulot.
Quand on voit les dernières stats d'utilisation tablette & mobiles vs ordi ça vaut le coup je pense d'ajouter quelques lignes, même si comme toi au début j'ai pensé la même chose à savoir : Smiley eek
Modifié par Manhattan (18 Oct 2015 - 10:27)
Bonjour,

Je pense comme Manhattan et Dew. Ces <link> ne sont pas obligatoire mais elles permettent d'assurer la compatibilité de ton favicon sur tout les supports. La véritable question c'est de savoir si oui ou non tu veux être compatible partout ?

Mais prenons l'exemple du favicon pour window 8. Si quelqu'un veut mettre ton site en favoris pour y accéder plus facilement, n'est-ce pas plus agréable d'avoir une icone - qui représente ton site, ta marque ?

Rien que cette représentation en elle-même m'a convaincu de rajouter ces 15 lignes. Même si les probabilité sont minces comparé aux appli mobile, il n'en est pas moins que cela démontre un certain sérieux. Surtout quand je sais que 70% de mon trafic viennent des mobiles/tablette ! Après tout, il s'agit de ta marque...
Merci de vos avis
Une question supplémentaire: faut il mettre ces lignes uniquement dans la page d'accueil ou bien dois-je me palucher toutes les pages HTML du site pour y mettre ces links?
Ce n'est pas tant le fait de les mettre que celui de devoir les modifier ou en ajouter de nouveaux pour chaque nouveau gadget qui m'interpelle (comme on dit sur France Culture).
Si les gens qui font ça avaient un peu de bon sens, ils se débrouilleraient avec une seule et bonne image en png qu'ils interpréteraient à leur guise, plutôt que d'enquiquiner des millions de gestionnaires des sites!
Mais bien sûr ça irait contre Sainte Compétition...
Modifié par PapyJP (18 Oct 2015 - 13:36)
Et oui, c'est toujours plus facile de faire ch*** les petits que d'imposer au gros de s'y plier... C'est partout pareil !

Et pour répondre à ta question, à ma connaissance, tu dois le mettre de partout.
Par contre, rien ne t'empeche de créer un fichier
favicon.php dans lequel tu mets tout tes <link>,
fichier que tu appelles sur toutes tes pages entre <head></head>. Comme ça si tu dois modifier, supprimer, rajouter d'autres <link> pas besoin de retourner sur toutes les pages, tu le fais que sur favicon.php Smiley cligne
J_B a écrit :
Comme ça si tu dois modifier, supprimer, rajouter d'autres &lt;link&gt; pas besoin de retourner sur toutes les pages, tu le fais que sur favicon.php Smiley cligne

Sauf que le site qui me préoccupe n'est pas en php, comme ceux que je gère d'habitude, mais en HTML pur et dur, plusieurs centaines de pages.

A ce sujet: connaissez vous un moyen de forcer le serveur à faire passer dans la moulinette php tous les fichiers ayant une extension .htm? Ça pourrait être une bonne façon de traiter ce problème, et d'autres plus importants qui me préoccupent davantage sur ce site.
Modifié par PapyJP (19 Oct 2015 - 08:37)
Une autre question sur le même sujet: quel est le rôle des links dans ce processus?
Il me semble que le simple fait d'avoir les fichiers présents avec un nom conventionnel dans le répertoire racine était suffisant pour que le navigateur retrouve ses petits. Il y a une grande différence entre ajouter une quinzaine de fichiers dans le répertoire racine et ajouter une quinzaine de liens dans les quelques centaines de fichiers HTML du site.
C'est vrai, je me souviens aussi qu'a mes débuts il fallait simplement ajouter le favicon à la racine du site et tout se faisait tout seul.
J'avoue que je suis comme toi, je ne sais pas. Peut-être finalement que ce n'est pas nécessaire ?
D'autant plus que si je me fie à un de mes sites, ou je n'ai pas mis tous les favicon, j'ai des erreurs 404 sur des favicons apple. Donc, on en revient a ce que tu dis, le travail se fait seul.

Je vais regarder de mon côté si je trouve quelque chose, je te tiens informé. Ou si quelqu'un a la réponse, ce serait top Smiley smile
Bonjour

Sur ce sujet, voir: https://css-tricks.com/favicon-quiz/

J'ai par ailleurs fait quelques essais: il semble qu'on puisse se contenter de mettre les links dans les pages susceptibles d'être mises par les utilisateurs comme "bookmark sur écran".
Compte tenu du contexte du site que je suis je train de rénover, je pense donc ne mettre ces links que sur la page d'accueil, peut être également sur certaines pages d'index de parties importantes du site.

Une autre approche serait de générer dynamiquement les links au chargement de la page en utilisant le fait que toutes les pages font référence à une même librairie JS. Je vais faire des essais dans cette direction.
Modifié par PapyJP (20 Oct 2015 - 09:17)
Après les essais que j'ai pu faire, je retiens la techno suivante:
Comme toutes les pages font référence à une même librairie JS, appelée dans la balise <head> par

<script type="text/javascript" src="/common.js"></script>

j'ai inclus dans cette librairie une commande

document.write('<!-- favicons -->'+ '\n' + 
'<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png?v=qAAgxEJlop"/>'+ '\n' + 
'<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png?v=qAAgxEJlop"/>'+ '\n' + 
'<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png?v=qAAgxEJlop"/>'+ '\n' + 
'<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png?v=qAAgxEJlop"/>'+ '\n' + 
'<link rel="icon" type="image/png" href="/favicon-32x32.png?v=qAAgxEJlop" sizes="32x32"/>'+ '\n' + 
'<link rel="icon" type="image/png" href="/favicon-96x96.png?v=qAAgxEJlop" sizes="96x96"/>'+ '\n' + 
'<link rel="icon" type="image/png" href="/favicon-16x16.png?v=qAAgxEJlop" sizes="16x16"/>'+ '\n' + 
'<link rel="manifest" href="/manifest.json?v=qAAgxEJlop"/>'+ '\n' + 
'<link rel="mask-icon" href="/safari-pinned-tab.svg?v=qAAgxEJlop" color="#5bbad5"/>'+ '\n' + 
'<link rel="shortcut icon" href="/favicon.ico?v=qAAgxEJlop"/>'+ '\n' + 
'<meta name="apple-mobile-web-app-title" content="Osirisnet"/>'+ '\n' + 
'<meta name="application-name" content="Osirisnet"/>'+ '\n' + 
'<meta name="msapplication-TileColor" content="#ffc40d"/>'+ '\n' + 
'<meta name="theme-color" content="#ffffff"/>'+ '\n' + 
'<!-- end favicons -->');

Il semble que cela suffise à référencer les favicons sans avoir à modifier une à une les centanies de pages du site.
Modifié par PapyJP (20 Oct 2015 - 11:40)
Sujet clos
Aller à