Quel est actuellement le meilleur moyen pour obtenir un favicon à afficher dans tous les navigateurs qui prennent en charge les Icônes favorites?

Ce qui est actuellement le meilleur moyen d'obtenir un favicon à afficher dans tous les navigateurs qui supportent actuellement il?

Veuillez inclure:

  1. Qui formats d'image sont pris en charge par les navigateurs.

  2. Dont les lignes sont nécessaires dans quelles places pour les différents navigateurs.

  • Il pourrait également être utile notamment les "icônes" pour l'iPhone ici aussi, c'est si l'utilisateur choisit d'ajouter votre site à leur écran d'accueil. Le code utilisé dans ce cas est la suivante: <link href="contact.png" /> Les dimensions doivent être 57x57 pixels. Sinon, vous pouvez omettre la balise de lien et il suffit de mettre un fichier appelé " apple-touch-icon.png' dans le répertoire racine de votre site web.
  • Pendant que vous y êtes, lisez ceci: mathiasbynens.être/notes/tactile icônes
  • Notez que vous aurez besoin de grandes icônes pour iPad et retina de l'iPhone affiche. Voir Apple: developer.apple.com/library/IOs/#documentation/...
InformationsquelleAutor Fred | 2008-08-31
  1. 104

    - Je aller pour une ceinture et bretelles approche ici.

    - Je créer un 32x32 icon dans les deux .ico et .png formats appelé favicon.ico et favicon.png. Le nom de l'icône n'a pas vraiment d'importance sauf si vous travaillez avec des navigateurs plus anciens.

    1. Place favicon.ico à la racine de votre site afin de soutenir les anciens navigateurs (en option et uniquement pour les navigateurs plus anciens.
    2. Place favicon.png dans mes images sous-répertoire (juste pour garder les choses en ordre).
    3. Ajouter le code HTML suivant à l'intérieur de la <head> élément.
    <link  href="/images/favicon.png" type="image/png" /> 
<link  href="/favicon.ico" />

    Veuillez noter que:

    • Le type MIME pour .ico fichiers a été enregistrée en tant qu'image/vnd.microsoft.icône par le IANA.
    • Internet Explorer ignore la type de l'attribut de l'icône de raccourci de la relation et c'est le seul navigateur à l'appui de cette relation, il n'a pas besoin d'être approvisionnés.

    Référence

    • OK, je vais avoir un " Microsoft est d'obtenir sur mes nerfs journée. Je ne peux pas obtenir que cela fonctionne dans Internet Explorer, malgré le fait qu'il montre le favicon pour le site stackoverflow. Existe-il d'autres paramètres qui influent sur cela, comme le doctype?
    • FYI - j'ai trouvé la réponse. Si vous vous reportez au site via localhost:8080/index.html , il ne fonctionne pas si vous utilisez le nom de la machine (machineName:8080/index.html) tout fonctionne comme vous le souhaitez. Je ne peux même pas commencer à comprendre ce comportement - ce soin à personne d'essayer?
    • Mise à jour - le comportement est causé par la mise en cache du navigateur de l'icône. Compensation les fichiers internet temporaires remédier à cela, si vous vous sentez heureux de perdre votre cache.
    • Il serait plus propre de mettre la version de IE du lien dans IE commentaire conditionnel?
    • 32x32?? N'est-ce pas 16x16 la norme?
    • Si quelqu'un a de la difficulté avec cela sur leurs systèmes de test s'assurer que le chemin d'accès "/images/favicon.png) est correcte, n'oubliez pas le "/" au début en fait la racine du domaine, donc si votre fichier est en cours d' "http:/ /testpc/site1/default.htm" et l'image "http:/ /testpc/site1/images/favicon.png" supprimer ce premier "/" 😉
    • en effet, mais le hic, c'est que les commentaires conditionnels sont spécifiques à la version : lourds à mettre, et difficile à maintenir.

    InformationsquelleAutor Brian Matthews
  2. 10

    Que j'utilise .ico format et de mettre les deux lignes suivantes dans le <head> élément:

    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    InformationsquelleAutor John Topley
  3. 6

    À soutenir également des icônes tactiles de tablettes et les smartphones, je préfère l'approche de HTML5Boilerplate

    Plus d'informations sur les icônes peuvent être trouvés dans cet article.

    Avec l'état actuel de votre soutien, vous n'avez même pas à ajouter la balise HTML pour la favicon de votre document. Les navigateurs de recherche automatiquement une liste de fichiers, voir cet exemple pour iOS:

    Si aucune icône n'est spécifié dans le code HTML, iOS Safari de la recherche
    site de répertoire racine pour les icônes avec le apple-touch-icon ou
    apple-touch-icon-précomposé préfixe. Par exemple, si l'
    la taille de l'icône de l'appareil est de 57 × 57 pixels, iOS recherches pour les noms de fichiers
    dans l'ordre suivant:

    1. apple-touch-icon-57x57-précomposé.png
    2. apple-touch-icon-57x57.png
    3. apple-touch-icon-précomposé.png
    4. apple-touch-icon.png

    Mon conseil est de ne pas inclure un favicon dans votre document, mais ont une liste de fichiers prêts à la racine du site web:

    • apple-touch-icon-114x114-précomposé.png
    • apple-touch-icon-144x144-précomposé.png
    • apple-touch-icon-57x57-précomposé.png
    • apple-touch-icon-72x72-précomposé.png
    • apple-touch-icon-précomposé.png
    • apple-touch-icon.png (57px*57px)
    • favicon.ico HiDPI (32x32px)

    Lorsque vous téléchargez un modèle de html5boilerplate.com ce sont tous inclus, vous avez juste à les remplacer par vos propres icônes.

    InformationsquelleAutor Willem de Wit
  5. 4

    IE6 ne peut pas gérer le format Png correctement, être averti.

    InformationsquelleAutor nimish
  6. 3

    Favicon doit être un .fichier ico fonctionne correctement sur tous les navigateurs.

    Les navigateurs modernes également en charge le format PNG et GIF.

    J'ai trouvé qu'en général, la meilleure façon de créer l'une est d'utiliser librement disponible service web comme favicon.cc.

    • favicon.cc règles!
    InformationsquelleAutor Antti Kissaniemi
  7. 3

    Il existe également un site où vous pouvez vérifier le favicon de toute page est faite

    getfavicon.org

    Là, vous pouvez voir un tutoriel sur la fabrication d'icônes favorites, les types d'image et résolutions, c'est sympa!

    • N'est plus opérationnel.
    InformationsquelleAutor
  8. 2

    Avoir un favicon.* dans votre répertoire racine est automatiquement détecté par la plupart des navigateurs. Vous pouvez vous assurer que c'est détectée à l'aide de:

     <link rel="icon" type="image/png" href="/path/image.png" />

    Personnellement j'utilise .les images png, mais la plupart des formats de travail.

    InformationsquelleAutor Ross