J'ai travaillé sur un site Web et j'aimerais ajouter une petite icône à l'onglet du navigateur.
Comment puis-je le faire en HTML et où dois-je le placer dans le code (par exemple en-tête)? J'ai un .pngfichier de logo que j'aimerais convertir en icône.
Connexes: l' image HTML définie dans l'onglet du navigateur .
Réponses:
Il existe en fait deux façons d'ajouter un favicon à un site Web.
<link rel="icon">Ajoutez simplement le code suivant à l'
<head>élément:Les favicons PNG sont pris en charge par la plupart des navigateurs, sauf IE <= 10 . Pour une compatibilité ascendante, vous pouvez utiliser des favicons ICO.
Notez que vous ne devez pas précéder
icondans l'relattribut avecshortcutplus. À partir des types de liens MDN :favicon.icodans le répertoire racineÀ partir d' une autre réponse SO (par @mercator ):
Il ne vous reste donc plus qu'à faire la
/favicon.icodemande à votre site internet de retourner votre favicon. Cette option ne vous permet malheureusement pas d'utiliser une icône PNG.Voir aussi favicon.png vs favicon.ico - pourquoi devrais-je utiliser PNG au lieu d'ICO?
la source
<link relroute. MAIS, l'adresse de mon site n'est pas répertoriée de manière fiable dans DNS, donc je ne peux pas compter surhref="http://example.com"pour la récupérer. Je suis donc arrivé à cette solution dans monindex.htmdossier:<link rel="icon" href="favicon.ico">Placez l'adresse ico dans le
headavec unlink-tag:la source
Le meilleur que j'ai trouvé est http://www.favicomatic.com/ Je dis mieux car il m'a donné le favicon le plus net et n'a nécessité aucune modification après leur transformation. Il générera des favicons en 16x16 et 32x32 et pour les citer "Toutes les foutues tailles, monsieur!" De plus, 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.
J'ai regardé les 20 premiers résultats de google, et c'était de loin le meilleur.
la source
Il existe un certain nombre d'icônes différentes et même des écrans de démarrage que vous pouvez définir pour différents appareils. Cette réponse passe par la façon de 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é dès la sortie de l'emballage (y compris des exemples de fichiers d'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.
Mon fichier Browserconfig.xml. Explication complète ci-dessus.
Mon fichier manifest.json. Explication complète ci-dessus.
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 META ci-dessus):
Frais généraux
Si vous supprimez les commentaires, cela représente 3 Ko de code HTML supplémentaire, si vous ne supportez pas les écrans de démarrage, c'est 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 surcharge par demande pour prendre en charge toutes les plateformes 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 c'est votre choix, je ne fais que donner les options!
Note latérale sur la situation actuelle de l'icône Web / de l'écran de démarrage / 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 des icônes épinglées est ridicule. Dans un monde parfait, nous utiliserions tous un fichier favicon.svg qui pourrait bien paraître à n'importe quelle taille et pourrait être placé à la racine de la page. Seul FireFox prend en charge cela 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 (indiqués ci-dessus), mais un fichier favicon.svg couvrirait la plupart des cas d'utilisation.
Mise à jour
Mise à jour pour inclure la nouvelle version Android / Chrome M39 + favicon / options de thème. Fait intéressant, ils ont opté pour une approche similaire à Microsoft, mais utilisent un fichier JSON au lieu de XML.
la source
J'ai créé un générateur de favicon en ligne avec lequel vous pouvez créer des favicons à partir d' icônes géniales de police . Vous pouvez prévisualiser le favicon créé en direct dans le navigateur.
Si vous souhaitez des fonctionnalités supplémentaires, n'hésitez pas à soumettre un problème ou une demande de pull ici :).
la source
J'ai réussi cela pour mon site Web.
La seule exception est que le navigateur SeaMonkey nécessite que du code HTML soit inséré dans votre
<head>; tandis que les autres navigateurs afficheront toujours le favicon.ico sans aucune insertion HTML. De plus, tout navigateur autre qu'IE peut utiliser d'autres types d'images, pas seulement le format .ico. J'espère que ça aide.la source
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 changé la taille de l'image en 32 x 32 pixels.
Veillez simplement à l'enregistrer en tant que fichier * .ico et à utiliser le
énumérés ci-dessus
la source
Je vous recommande d'essayer http://faviconer.com pour convertir votre .PNG ou .GIF en un fichier .ICO.
Vous pouvez créer les deux
16x16et32x32(pour un nouvel affichage de la rétine) dans un fichier .ICO.Aucun problème avec IE et Firefox
la source
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 vous pouvez utiliser un hôte local lors du développement et du test de votre site Web sur votre PC.
la source
Si je peux ajouter plus de clarté pour ceux d'entre vous qui sont encore confus. Le fichier .ico a tendance à fournir plus de transparence que le .png, c'est pourquoi je recommande de convertir votre image ici comme mentionné ci-dessus: http://www.favicomatic.com/done également, à l'intérieur du href se trouve juste l'emplacement de l'image , il peut s'agir de n'importe quel emplacement de serveur, n'oubliez pas d'ajouter le http: // devant, sinon cela ne fonctionnera pas.
la source
Je n'en ai pas utilisé d'autres, mais https://realfavicongenerator.net/ semble être un premier choix, et il n'a pas encore été mentionné ici.
Il prend en charge les SVG en tant qu'images source pour générer des favicons et fournit des options utiles pour remplacer les images pour différentes plates-formes. De plus, par défaut, il ne génère pas une tonne d'images pour être rétrocompatible avec toutes les plateformes obsolètes. Au lieu de cela, il vous donne des options pour vérifier si vous les souhaitez.
À partir d'un e-mail que le développeur m'a envoyé, ils ont également l'intention d'ajouter la prise en charge de la génération de favicons SVG, ainsi que la sensibilité au thème SVG , je pense, qui est une fonctionnalité totalement géniale.
la source
Veuillez utiliser le code ci-dessous dans la section d'en-tête de votre fichier d'index.
la source