Ajout d'un favicon à une page HTML statique

641

J'ai quelques pages statiques qui ne sont que du HTML pur, que nous affichons lorsque le serveur tombe en panne. Comment puis-je mettre un favicon que j'ai fait (c'est 16x16px et il se trouve dans le même répertoire que le fichier HTML; il s'appelle favicon.ico) comme icône "onglet" pour ainsi dire? J'ai lu sur Wikipedia et j'ai regardé quelques tutoriels et j'ai implémenté ce qui suit:

<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

Mais il ne veut toujours pas fonctionner. J'utilise Chrome pour tester les sites. Selon Wikipedia .ico est le meilleur format d'image qui fonctionne sur tous les types de navigateur.

Mise à jour

Je n'ai pas pu faire fonctionner cela localement bien que le code vérifie que cela ne fonctionnera vraiment correctement qu'une fois que le serveur a commencé à servir le site. Essayez simplement de le pousser vers le serveur et actualisez votre cache et cela devrait fonctionner correctement.

html static favicon La légende
la source
qui ne dites-vous à aucun de vos amis de le vérifier pour vous sur un autre système, le même problème est avec l'un de mes clients mon système se présente bien et il se plaint que le favicon ne se présente pas, j'utilise principalement le premier de vous et c'est correct. bonne chance.
mt
3
Copie possible de Comment ajouter une icône d'onglet de navigateur (favicon) pour un site Web?
Michał Perłakowski
Votre exemple fonctionne maintenant sur Chrome.
Damjan Pavlica
Intéressant, le site Web en direct a très bien servi le favicon, mais lors de la visualisation du fichier localement, et sans le servir via un serveur local (b / c c'est un simple site statique - oui!), Le favicon ne s'affichait pas. Avec le recul, cela a du sens, les serveurs le servent automatiquement. L'ajout <link rel="icon" type="image/x-icon" href="favicon.ico">de head(à côté des variantes de favicon 32, 16 et 180 link) a résolu le problème localement. Comme j'avais inclus des links pour les plus grandes tailles d'icônes et le manifeste, je n'ai pas réfléchi à deux fois pourquoi favicon.icone se présentait pas! :-)
SherylHohman

Réponses:

934

Vous pouvez créer une image .png, puis utiliser l'un des extraits <head>de code suivants entre les balises de vos documents HTML statiques:

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>
Hazy McGee
la source
3
avez-vous essayé de mettre "icône de raccourci" dans le rel = pour vos liens ico et de mettre un / avant favicon.ico sur les deux juste pour indiquer qu'il est dans le répertoire webroot?
Hazy McGee
1
yip a essayé ça aussi .. homme lol je note que je vais tout redémarrer et ensuite essayer de démarrer et voir si peut-être que son encaissement est mauvais ou quelque chose ..
TheLegend
5
Je jure - j'ai eu les mêmes problèmes après avoir ajouté le code - il a fallu peut-être un jour au navigateur pour afficher l'icône au lieu de la boîte grise qu'il a habituellement - essayez de vider l'historique du cache de votre navigateur, etc. Et si vous avez copié mon code, assurez-vous que changer example.com en ur domaine lol
Hazy McGee
2
Il y a un argument redondant / dans la ligne supérieure href. Une fois que je l'ai retiré, cela fonctionne comme un charme. Doit être: <link rel = "shortcut icon" href = "favicon.png" type = "image / png">
drpawelo
4
w3.org/2005/10/howto-favicon dit d'inclure un profileattribut dans la headbalise ... est-ce nécessaire?
Rakib
228

La plupart des navigateurs reprendront à favicon.icopartir du répertoire racine du site sans avoir besoin d'être averti; mais ils ne le mettent pas toujours à jour immédiatement avec un nouveau.

Cependant, je vais généralement pour le deuxième de vos exemples:

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
Codecraft
la source
faut-il être befoer les métadonnées ou les balises de script ?? ou pas un problème
TheLegend
2
Tant qu'il est dans la section <head>, cela ne devrait pas avoir d'importance - car il ne dépend pas d'autre chose pour fonctionner.
Codecraft
127

En fait, pour que votre favicon fonctionne dans tous les navigateurs, vous devez avoir plus de 10 images aux tailles et formats corrects.

J'ai créé une application ( faviconit.com ) pour que les gens n'aient pas à créer toutes ces images et les bons tags à la main.

J'espère que vous aimez.

Eduardo Russo
la source
6
J'ai adoré l'application, pas de bs - directement, et l'image peut être modifiée avant de créer toutes les favicons +1 pour vous pour me faire gagner beaucoup de temps :)
SidOfc
1
D'accord, c'est une excellente application. Bien que je ne pense pas que toutes ces tailles d'image semblent tout à fait nécessaires, j'aime le fait qu'elles les génèrent et le balisage requis, etc. Merci!
andrhamm
Indeead une grande application: +1 :. Beaucoup aidé /
Renato Gomes
1
Mais c'est propriétaire.
ctrl-alt-delor
Cela ne fonctionne pas, donneWhoops, looks like something went wrong.
daka
68

Ce qui suit fonctionne pour moi ...

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Jet Blue
la source
40

Convertissez votre fichier image en chaîne Base64 avec un outil comme celui-ci , puis remplacez l' YourBase64StringHereespace réservé dans l'extrait de code ci-dessous par votre chaîne et mettez la ligne dans votre section HTML head:

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

Cela fonctionnera à 100% dans les navigateurs.

Farshid
la source
3
J'ai trouvé un autre outil qui effectue la conversion en JavaScript sans transférer de données vers le serveur: jpillora.com/base64-encoder De plus, il gère plusieurs fichiers par glisser-déposer. Enregistrez la page pour l'utiliser localement.
gérer
1
à mon humble avis, la meilleure solution, car elle respecte la page "statique html" et est complètement autonome dans le document.
Buffalo Rabor
1
Meilleure solution. Fonctionne également avec les fichiers png. <link href = "data: image / png; base64, YourBase64StringHere" rel = "icon" type = "image / png" />
Rolf of Saxony
1
Cela entraînera l'ajout d'une longue chaîne à chaque page. Utilisez la base64 en ligne pour les petites images rarement envoyées à l'utilisateur.
frodeborli
De cette façon, votre favicon n'est jamais mis en cache, vous envoyez la chaîne entière au client à chaque fois, IHMHO utilisant une URL et donc le cache du navigateur semble plus `` propre / meilleur ''
Michiel
34

Syntaxe Usage: .ico, .gif, .png,.svg

Ce tableau montre comment utiliser le favicondans les principaux navigateurs. L'implémentation standard utilise un élément de lien avec un attribut rel dans la section du document pour spécifier le format de fichier ainsi que le nom et l'emplacement du fichier.

Notez que la plupart des navigateurs donneront la priorité à un favicon.icofichier situé à la racine du site Web ( ignorant ainsi les balises de lien d'icône).

                                           Edge   Firefox   Chrome   I.E.   Opera   Safari  
 ---------------------------------------- ------ --------- -------- ------ ------- -------- 
  <link rel="shortcut icon"                Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/myicon.ico">                                                    

  <link rel="icon"                         Yes    Yes       Yes      9      Yes     Yes     
   type="image/vnd.microsoft.icon"                                                          
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/x-icon"     Yes    Yes       Yes      9      Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon"                         Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/gif"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.gif">                                                     

  <link rel="icon" type="image/png"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.png">                                                     

  <link rel="icon" type="image/svg+xml"    Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/image.svg">

Prise en charge du format de fichier

Le tableau suivant illustre la prise en charge du format de fichier image pour favicon:

                                         Animated                                
  Browser             ICO   PNG    GIF    GIF's   JPEG   APNG   SVG   
 ------------------- ----- ------ ------ ------- ------ ------ ------ 
  Edge                Yes   Yes    Yes    No      ?      ?      ?     
  Firefox             1.0   1.0    1.0    Yes     Yes    3.0    41.0  
  Google Chrome       Yes   Yes    4      No      4      No     No    
  Internet Explorer   5.0   11.0   11.0   No      No     No     No    
  Safari              Yes   4      4      No      4      No     No    
  Opera               7.0   7.0    7.0    7.0     7.0    9.5    44.0

Implémentation du navigateur

Le tableau ci-dessous illustre les différentes zones du navigateur où les favicon sont affichés:

                      Address     Address bar 'Links'                       Drag to  
  Browser             Bar         drop-down     bar       Bookmarks   Tabs   desktop  
 ------------------- ------------ ----------- --------- ----------- ------ --------- 
  Edge                No            Yes         Yes       Yes         Yes    Yes      
  Firefox             until v12     Yes         Yes       Yes         Yes    Yes      
  Google Chrome       No            No          Yes       Yes         1.0    No       
  Internet Explorer   7.0           No          5.0       5.0         7.0    5.0      
  Safari              Yes           Yes         No        Yes         12     No       
  Opera               v7–12: Yes    No          7.0       7.0         7.0    7.0      
                      > v14: No

Les fichiers d'icônes peuvent être de 16 × 16 , 32 × 32 , 48 × 48 ou 64 × 64 pixels et 8 bits une profondeur de couleur de , 24 bits ou 32 bits .

Bien que les informations ci-dessus soient généralement correctes, il existe certaines variations / exceptions dans certaines situations.

img Voir l'article complet sur la source sur Wikipédia.

Mise à jour: ("plus d'infos")

ashleedawg
la source
15

Si le favicon est une image de type png, cela ne fonctionnera pas dans les anciennes versions de Chrome. Cependant, cela fonctionnera très bien dans FireFox. N'oubliez pas non plus de vider le cache de votre navigateur lorsque vous travaillez sur de telles choses. Plusieurs fois, le code est très bien, mais le cache est le vrai coupable.

Tanveer Shaikh
la source
1
C'est très bien; il est très difficile d'installer / conserver une ancienne version de Chrome de toute façon
Ben Leggiero
14

Comme recommandé par W3.org , vous pouvez utiliser lerel attribut pour y parvenir.

Exemple:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...
Rahul Desai
la source
8 
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
shilovk
la source
7 
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

Cela a fonctionné pour moi

Anand Dwivedi
la source
4
Bien que cela puisse fonctionner, vous ne pouvez pas utiliser image / png comme type MIME - car il est incorrect étant donné que vous utilisez .ico
zanderwar
5

Je connais son ancien poste mais je poste toujours pour quelqu'un comme moi. Cela a fonctionné pour moi

<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />

mettez votre icône favicon sur le répertoire racine ..

Cyclotron3x3
la source
4

comme une note supplémentaire qui pourrait aider quelqu'un un jour.

Vous ne pouvez rien faire écho à la page avant:

Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

ne chargera pas ico

<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

fonctionne bien

bart2puck
la source
3
En effet, il est censé se trouver dans la section d'en-tête d'un document HTML et est ignoré par la plupart des navigateurs s'il ne l'est pas.
Eric Sebasta
Oui, je voulais juste mettre ça ici au cas où quelqu'un rencontrerait un problème. Mon problème était que le "bonjour" était un code de débogage et m'a fait un peu perplexe.
bart2puck
3

J'ai utilisé convert -resize 16x16 img.png favicon.ico(sur linux konsole) pour convertir mon image, et l'ajouter <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">à mon en-tête et tout fonctionne parfaitement.

dmx
la source
2

Notez que si votre site fonctionne en tant que subfolderc'est-à-dire:

http://localhost/MySite/

Vous devrez en tenir compte. Si vous le faites à partir d'une ASP.NETapplication, il vous suffit d'ajouter un ~au début de l'URL:

<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
Serj Sagan
la source
2

Selon la mise à jour de l'OP, il ne s'affichait pas localement, mais selon la mise à jour de l'OP, une fois que je l'ai téléchargé sur le serveur, ça allait.

Comme il s'agit d'un site Web html simple et statique, j'ai le luxe de travailler dessus sans exécuter de serveur Web local.
Un serveur Web servira généralement automatiquement le favicon, s'il y en a un, par défaut.

Mais lorsqu'il n'exécute pas de serveur Web, le navigateur lui-même ne lira pas simplement le répertoire à la recherche de fichiers supplémentaires, par exemple un favicon.ico, sauf s'il est répertorié dans le document html.

Donc, alors que j'avais les éléments suivants dans la headbalise: 

    <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">

Je n'ai pas non plus inclus de référence pour plain 'ol favicon.ico.
Même si le favicon.icofichier était inclus, en plus des images répertoriées ci-dessus.

Une fois que j'ai ajouté la ligne suivante: 

    <link rel="icon" type="image/x-icon" href="favicon.ico">

Il est également apparu dans mon navigateur, lorsque je visualise le fichier local , même lorsqu'il ne le sert pas via un serveur local.

L'icône s'est donc bien affichée lorsqu'elle a fonctionné sur le serveur en direct, mais pas localement.

Je le mentionne explicitement parce que le générateur de favicon que j'ai utilisé a gentiment fourni le code, les icônes, le manifeste et les instructions. Cependant, même s'il incluait l' favicon.icoimage, il n'incluait pas <link>de fichier dans ce code dans le code à ajouter au htmldocument.
Je suppose que le service présume favicon.icosera automatiquement servi et utilisé par tous les navigateurs par défaut, donc seules les versions "alternatives" devaient être explicitement ajoutées à la balise head.
Évidemment, ils ne considèrent pas que lors de la visualisation de fichiers localement (c'est-à-dire ne pas les servir localement), nous ne sommes pas intéressés à voir le favicon?

SherylHohman
la source
0

Notez que FF ne parvient pas à charger une icône avec une //URL redondante comme /img//favicon.png. Testé sur FF 53. Chrome est OK.

Étienne Bersac
la source
Ce n'est pas vraiment une réponse autant qu'un commentaire . (Voir « Comment répondre ».)
ashleedawg
0

Essayez d'utiliser le <link rel="icon" type="image/ico" href="images/favi.ico"/>

subindas pm
la source
-2

Je viens d'utiliser un png. Assurez-vous de supprimer tout fond blanc. fait pour une meilleure icône

À M
la source