1. ✅ Apprenez une METHODE qui marche pour votre SEO ! Formation à distance avec Olivier Duffez et Fabien Facériès + aide pour prise en charge du financement
    Rejeter la notice

Favicon : bonnes pratiques

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 12 Décembre 2019.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    811
    J'aime reçus:
    10
    Salut à tous,

    Le favicon semble être incontournable mais quel code doit-on insérer et quels formats d'icons doit-on privilégier ?

    Certains site de générateur de favicon nous invite à insérer tout ce code :
    Code:
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    
    Est-ce vraiment nécessaire d'insérer tout ce code et d'avoir toutes ces icons dans tous ces formats ?

    Quelles sont les bonnes pratiques en matière de favicons ?

    Merci pour vos réponses.
     
  2. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 516
    J'aime reçus:
    202
    J'utilise ce générateur : https://realfavicongenerator.net/
    Il n'y a pas toutes ces balises meta mais on lie un fichier manifest.json

    Tout ce qu'il génère est très recommandé oui. Facultatif, mais recommandé car sinon cela fait des icônes baveuses à certains endroits, sur mobile, etc. Du moins, si on ne doit laisser qu'une icône, la mettre en grand format, pas 16x16...

    Apple a voulu faire ses formats à lui, comme depuis l'origine de la création de cette boîte (être incompatible, la devise d'Apple !), donc tout est doublé.
     
    KOogar apprécie ceci.
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    811
    J'aime reçus:
    10
    Merci pour ta réponse. Je vais suivre tes conseils.
     
  4. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    556
    J'aime reçus:
    67
    Il n’y a que 4 formats qui comptent encore pour iOS :
    https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
    Et encore... si tu veux n’en avoir qu’un, tu peux :
    https://stackoverflow.com/questions...d-apple-touch-icon-png-be-for-ipad-and-iphone
    Le reste est composé de formats dépassés (iPhone edge/3g/3GS, par exemple). Comme il n’y a plus d’écrans non hidpi dans le monde iOS, tu ne risques pas d’avoir d’icône « baveuse » si tu ne proposes que le format le plus élevé. Si tu veux des icônes absolument parfaites pour tous les appareils Apple en circulation, il te faut les quatre formats de la doc Apple.
    PS : mais bon, si tu génères les icônes automatiquement, ça ne sert à rien. Laisse iOS se charger de redimensionner.
     
    spout apprécie ceci.
Chargement...
Similar Threads - Favicon bonnes pratiques Forum Date
Favicon dans Qwant Autres moteurs de recherche connus 13 Mai 2020
Détournement/vol de favicon - SERP Google mobile Référencement Google 28 Avril 2020
Disparition de ma Favicon dans SERP Google Mobile Référencement Google 7 Avril 2020
modification Favicon : délai de mise à jour Google Développement d'un site Web ou d'une appli mobile 23 Janvier 2020
favicon dans les SERP Crawl et indexation Google, sitemaps 8 Novembre 2019
Favicon sites wordpress ne s'affichent pas sous Microsoft Edge Le café de WebRankInfo 14 Septembre 2016
Des favicons dans les SERP de Bing Référencement Bing 13 Août 2013
Favicon Retargeting AdWords 8 Août 2013
Favicon sous Spip avec Explorer Administration d'un site Web 16 Novembre 2012
Faire apparaite le favicon dans les résultats de recherche Google Référencement Google 14 Juin 2012