web-dev-qa-db-fra.com

Comment ajouter une icône d'onglet de navigateur (favicon) pour un site Web?

Je travaille sur un site Web et j'aimerais ajouter une petite icône à l'onglet du navigateur.

Comment puis-je faire cela en HTML et où dans le code aurais-je besoin de le placer (par exemple, en-tête)? J'ai un fichier de logo .png que je voudrais convertir en icône.

Connexes: image HTML définie dans l'onglet du navigateur .

htmliconsfavicon
514
knookie

Il existe en fait deux façons d'ajouter un favicon à un site Web.

<link rel="icon">

Ajoutez simplement le code suivant à l'élément <head>:

<link rel="icon" href="http://example.com/favicon.png">

Les favicons PNG sont pris en charge par la plupart des navigateurs, sauf IE <= 10 . Pour une compatibilité ascendante, vous pouvez utiliser les favicons ICO.

Notez que vous ne devez plus précéder icon dans rel attribut avec shortcut. De Types de lien MDN :

Le type de lien shortcut est souvent vu avant icon, mais ce type de lien est non conforme, ignoré et les auteurs de sites Web ne doivent plus l'utiliser .

favicon.ico dans le répertoire racine

De une autre SO réponse (by @ mercator ):

Tous les navigateurs modernes (testés avec Chrome 4, Firefox 3.5, IE8, Opera 10 et Safari 4) demanderont toujours un favicon.ico à moins que vous n'ayez spécifié une icône de raccourci via <link>.

Donc, tout ce que vous avez à faire est d’envoyer la favicon à la demande /favicon.ico de votre site Web. Cette option ne vous permet malheureusement pas d'utiliser une icône PNG.

Voir aussi favicon.png vs favicon.ico - pourquoi devrais-je utiliser le format PNG au lieu de ICO?

342
Michał Perłakowski
  1. Utilisez un outil pour convertir votre png en fichier ico. Vous pouvez rechercher "générateur de favicon" et vous pouvez trouver de nombreux outils en ligne.

  2. Placez l'adresse ico dans la head avec une balise link-:

    <link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
419
Gustavo Costa De Oliveira

Le meilleur que j'ai trouvé est http://www.favicomatic.com/ Je dis le mieux parce qu'il m'a permis d'obtenir le favicon le plus croustillant et qu'il ne nécessitait aucune édition après leur transformation. Il va générer des favicons en 16x16 et 32x32 et les citer "Toutes les tailles, monsieur!" En outre, leur site a l'air cool et est facile à utiliser.

Ils génèrent également le code HTML que vous devez utiliser pour les fichiers qu'ils génèrent.

<link rel="Apple-touch-icon-precomposed" sizes="57x57" href="Apple-touch-icon-57x57.png" />
<link rel="Apple-touch-icon-precomposed" sizes="114x114" href="Apple-touch-icon-114x114.png" />
<link rel="Apple-touch-icon-precomposed" sizes="72x72" href="Apple-touch-icon-72x72.png" />
<link rel="Apple-touch-icon-precomposed" sizes="144x144" href="Apple-touch-icon-144x144.png" />
<link rel="Apple-touch-icon-precomposed" sizes="60x60" href="Apple-touch-icon-60x60.png" />
<link rel="Apple-touch-icon-precomposed" sizes="120x120" href="Apple-touch-icon-120x120.png" />
<link rel="Apple-touch-icon-precomposed" sizes="76x76" href="Apple-touch-icon-76x76.png" />
<link rel="Apple-touch-icon-precomposed" sizes="152x152" href="Apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

J'ai regardé les 20 premiers résultats Google, et c'était de loin le meilleur.

66
Jared Menard

Il existe un certain nombre d'icônes différentes et même d'écrans de démarrage que vous pouvez définir pour différents appareils. Cette réponse explique comment les soutenir tous.

Voici quelques extraits que j'ai utilisés avec des liens pertinents vers l'endroit où j'ai recueilli les informations. Voir mon blog pour plus d'informations et plus d'informations sur le modèle de projet ASP.NET MVC Boilerplate avec tout cela intégré et prêt à l'emploi (y compris des exemples de fichiers image).

Ajoutez le balisage suivant à votre tête html. Les sections commentées sont entièrement facultatives. Bien que les sections non commentées soient recommandées pour couvrir toutes les utilisations des icônes. N'ayez pas peur, surtout s'il s'agit de commentaires pour vous aider.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/Android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.Apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//Apple_ref/doc/uid/30001261-SW1 -->
<!-- Apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="Apple-mobile-web-app-title" content="">-->
<!-- Apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="Apple-mobile-web-app-capable" content="yes">-->
<!-- Apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="Apple-mobile-web-app-status-bar-style" content="black">-->
<!-- Apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="Apple-touch-icon" sizes="57x57" href="/content/images/Apple-touch-icon-57x57.png">
<!-- Apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="Apple-touch-icon" sizes="114x114" href="/content/images/Apple-touch-icon-114x114.png">
<!-- Apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="Apple-touch-icon" sizes="72x72" href="/content/images/Apple-touch-icon-72x72.png">
<!-- Apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="Apple-touch-icon" sizes="144x144" href="/content/images/Apple-touch-icon-144x144.png">
<!-- Apple-touch-icon-60x60.png - Same as Apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="Apple-touch-icon" sizes="60x60" href="/content/images/Apple-touch-icon-60x60.png">
<!-- Apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="Apple-touch-icon" sizes="120x120" href="/content/images/Apple-touch-icon-120x120.png">
<!-- Apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="Apple-touch-icon" sizes="76x76" href="/content/images/Apple-touch-icon-76x76.png">
<!-- Apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="Apple-touch-icon" sizes="152x152" href="/content/images/Apple-touch-icon-152x152.png">
<!-- Apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="Apple-touch-icon" sizes="180x180" href="/content/images/Apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://Gist.github.com/tfausak/2222823 -->
<!-- Apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- Apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- Apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- Apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- Apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- Apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- Apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="Apple-touch-startup-image"
      href="/content/images/Apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.Microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Mon fichier browserconfig.xml. Explication complète ci-dessus.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Mon fichier manifest.json. Explication complète ci-dessus.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/Android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/Android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/Android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/Android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/Android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/Android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

Une liste des fichiers du projet (notez que les noms de ces fichiers sont importants si vous décidez de mettre certains d'entre eux à la racine de votre projet pour éviter d'utiliser les balises méta ci-dessus):

favicon.ico
browserconfig.xml
Content/Images/
    Android-chrome-144x144.png
    Android-chrome-192x192.png
    Android-chrome-36x36.png
    Android-chrome-48x48.png
    Android-chrome-72x72.png
    Android-chrome-96x96.png
    Apple-touch-icon.png
    Apple-touch-icon-57x57.png
    Apple-touch-icon-60x60.png
    Apple-touch-icon-72x72.png
    Apple-touch-icon-76x76.png
    Apple-touch-icon-114x114.png
    Apple-touch-icon-120x120.png
    Apple-touch-icon-144x144.png
    Apple-touch-icon-152x152.png
    Apple-touch-icon-180x180.png
    Apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    Apple-touch-startup-image-1536x2008.png
    Apple-touch-startup-image-1496x2048.png
    Apple-touch-startup-image-768x1004.png
    Apple-touch-startup-image-748x1024.png
    Apple-touch-startup-image-640x1096.png
    Apple-touch-startup-image-640x920.png
    Apple-touch-startup-image-320x460.png

Total des frais généraux

Si vous supprimez les commentaires représentant 3 Ko de code HTML supplémentaire, si vous ne supportez pas les écrans de démarrage de 1,5 Ko. Si vous utilisez la compression GZIP sur votre contenu HTML, ce que tout le monde devrait faire de nos jours, cela vous laisse environ 634 octets de temps système par demande pour prendre en charge toutes les plates-formes ou 446 octets sans écrans de démarrage. Personnellement, je pense que cela vaut la peine de prendre en charge les appareils IOS, Android et Windows, mais que votre choix, je ne fais que donner les options!

Note latérale à propos de l’icône Web actuelle/écran d’écran/situation des paramètres

Cette situation avec des icônes spécifiques au fournisseur, des écrans de démarrage et des balises spéciales pour contrôler le navigateur Web ou les icônes épinglées est ridicule. Dans un monde parfait, nous utiliserions tous un fichier favicon.svg qui pourrait avoir une belle apparence, quelle que soit sa taille, et qui pourrait être placé à la racine de la page. Seul FireFox le prend en charge au moment de la rédaction (voir CanIUse.com ).

Cependant, les icônes ne sont pas le seul paramètre de nos jours, il existe plusieurs autres paramètres spécifiques au fournisseur (présentés ci-dessus), mais un fichier favicon.svg couvrirait la plupart des cas d'utilisation.

Mettre à jour

Mise à jour pour inclure la nouvelle version Android/Chrome M39 + options de favicon/thèmes. Fait intéressant, ils ont adopté une approche similaire à celle de Microsoft, mais utilisent un fichier JSON au lieu de XML.

13
Muhammad Rehan Saeed

Je l'ai fait avec succès pour mon site web.

La seule exception est que le navigateur SeaMonkey requiert du code HTML inséré dans votre <head>; alors que les autres navigateurs affichent toujours le fichier favicon.ico sans aucune insertion HTML. En outre, tout navigateur autre que IE peut utiliser d'autres types d'images, pas uniquement le format .ico. J'espère que ça aide.

10
Barbie laptop gamer

J'ai créé un en ligne Favicon Generator avec lequel vous pouvez créer des favicons à partir de Font Awesome Icons . Vous pouvez prévisualiser le favicon créé en direct dans le navigateur.

enter image description here

Si vous souhaitez des fonctionnalités supplémentaires, n'hésitez pas à soumettre un problème ou une demande d'extraction ici :).

9
eclipse

Il y a beaucoup de solutions compliquées ci-dessus. Pour moi? J'ai utilisé GIMP pour enregistrer une copie du fichier PNG d'origine après avoir modifié la taille de l'image en 32 x 32 pixels.

Assurez-vous simplement de l’enregistrer en tant que fichier * .ico et d’utiliser le

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

énumérés ci-dessus

4
beep_check

Je vous recommande d'essayer http://faviconer.com pour convertir votre fichier .PNG ou .GIF en fichier .ICO.

Vous pouvez créer à la fois 16x16 et 32x32 (pour un nouvel affichage de la rétine) dans un fichier .ICO.

Aucun problème avec IE et Firefox

4
Dmitri A

Pour que Chrome affiche l'icône de la page (favicon), vous devez vérifier votre site Web à partir d'un serveur d'hébergement ou utiliser l'hôte local lors du développement et du test de votre site Web sur votre PC.

2
Miloud Eloumri
<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

Si je peux ajouter plus de clarté à ceux d’entre vous qui sont encore confus. Le fichier .ico a tendance à offrir plus de transparence que le fichier .png, c'est pourquoi je vous recommande de convertir votre image ici, comme indiqué ci-dessus: http://www.favicomatic.com/done également, à l'intérieur du href n’est que l’emplacement de l’image, il peut s’agir de n’importe quel emplacement sur le serveur, pensez à ajouter le http: // devant, sinon cela ne fonctionnera pas.

1
DIZAD