Je suis occupé sur un site WordPress et suis venu sur la scène pour ajouter la touche finale, étant le favicon. Je suis avant tout un développeur, donc les graphiques et les icônes ne sont pas mon point fort.
Quelles sont les meilleures pratiques lors de la création d'un favicon (en termes de tailles, etc., j'ai déjà le design)? J'aimerais pouvoir prendre en charge tous les appareils possibles, qu'il s'agisse d'un téléphone portable, de tablettes, d'écrans rétiniens, etc. De plus, je ne veux pas que l'image soit floue, alors j'ai besoin de savoir quelle densité de pixels utiliser et tout le reste.
S'il existe des applications Mac ou des outils en ligne qui le feront pour vous (et le feront correctement), ce serait également très bien. Sinon, je sais me débrouiller dans Illustrator et Photoshop.
la source
Réponses:
Les bases de Favicons - Meilleure pratique pour 2013 :
Et une feuille de triche "extrêmement pénible" sur les tailles / types de favicon sur GitHub.
Toujours à lire: http://www.jonathantneal.com/blog/understand-the-favicon/
la source
Que faut-il inclure?
Le minimum
Pour les obsessionnels
favicon.ico
favicon.ico est le plus ancien des favicons, il a fonctionné depuis avant que beaucoup de lecteurs du livre soient nés et fonctionnent encore parfaitement de nos jours.
Microsoft recommande l' inclusion d'images de format 16x16, 32x32 et 48x48.
Le moyen standard pour définir votre favicon:
Les navigateurs vont rechercher le répertoire racine de votre site Web
favicon.ico
afin que vous puissiez omettre le lien. Certains navigateurs plus anciens utiliseront la valeur déclarée par défaut,favicon.ico
même s'il existe une déclaration PNG de taille plus appropriée. Il peut donc être judicieux de laisser l'ICO non déclaré à la racine et de déclarer des PNG de tailles différentes.favicon.png
HTML5 a introduit l'
sizes
attribut pour aider à déclarer plusieurs icônes de taille. L'utilisation de fichiers PNG spécifiques vous permet de mieux contrôler les tailles utilisées et signifie que seule l'image correcte est chargée.Les tailles que vous déclarez dépendent des appareils que vous souhaitez prendre en charge. Quelques tailles communes et peu communes:
Icône Apple Touch
Les icônes de clips Web iOS sont disponibles dans un certain nombre de tailles pour différents appareils et résolutions. Vous pouvez spécifier une ou plusieurs icônes de taille. Si aucune icône de la taille voulue n’est trouvée, l’icône générique sans taille déclarée sera utilisée.
Si aucune icône n'est spécifiée à l'aide d'un élément de lien, iOS recherchera dans le répertoire racine les icônes avec le
apple-touch-icon
préfixe. Les appareils iOS ne sont pas (assez étrangement) les seuls appareils à utiliser ces icônes (Android Chrome, par exemple), donc leur déclaration est l'option la plus sûre.Directives d'interface utilisateur iOS - Tailles des icônes
Bibliothèque de développement iOS - Spécification d'une icône de page Web pour Web Clip
Tuiles Windows
Les vignettes sont utilisées lorsque vous épinglez un site Web sur l'écran de démarrage de Windows ou de Windows Phone et que vous disposez de plusieurs tailles.
Les tailles d'image recommandées sont plus grandes que ne le suggèrent les noms de ces images. Voici les tailles recommandées sur microsoft.com
Couleur et titre du carreau
Le comportement par défaut des mosaïques consiste à extraire le titre de la mosaïque de la
<title>
balise et à respecter toute transparence des images de mosaïque, en indiquant la couleur d'arrière-plan. Vous pouvez personnaliser la couleur et le titre en utilisant ces balises méta:browserconfig.xml
Toutes les
msapplication
balises méta peuvent être supprimées et remplacées par un fichier XML dans le dossier racine appelébrowserconfig.xml
. Le fichier XML devrait ressembler à ceci:Autres lectures et ressources
Aide-mémoire Favicon
Favicons, icônes tactiles, icônes de mosaïque, etc. De quoi avez-vous besoin? - Écrit sous forme de questionnaire mais contenant de nombreuses informations utiles (et vous pouvez simplement le lire sous forme d'article, oubliez que c'est un questionnaire)
Le manuel d'icônes
ImageMagick - Outil de ligne de commande utile pour convertir des images.
RealFaviconGenerator.net - Générateur de favicon complet.
FAVIC-O-MATIC - Générateur de favicon complet avec des formats de sortie facilement personnalisables.
la source
Cet outil est un super gain de temps. Essaye le! Il s'occupe de tout pour toi.
Téléchargez votre image à quelque chose autour de 800px x 800px afin que ce soit agréable et net.
http://realfavicongenerator.net/
Ajoutez également cette balise meta afin de pouvoir nommer votre icône si des sauvegardes sont effectuées sur votre appareil iOS.
<meta name="apple-mobile-web-app-title" content="Website Name">
J'espère que ça t'as aidé!
la source
Utilisez cette tâche GRUNT pour générer toutes les variantes possibles:
https://github.com/gleero/grunt-favicons
Génère tous les types et tailles connus d’icônes à partir d’images PNG. Utilise ImageMagick.
Entrée: logo carré en png. Vous pouvez également rester à proximité des fichiers source avec le préfixe de résolution, par exemple source.16x16.png.
Sortie:
Ajoute des modifications au fichier HTML.
la source
http://faviconit.com
créera environ 15 tailles d'icônes différentes pour tous les périphériques à partir d'un fichier PNG haute résolution.
la source
Moi aussi, je cherchais une solution favicon et je ne voulais pas faire appel à des services Web tiers. Je ne pouvais trouver aucune solution générique qui fonctionnerait comme une étape de construction simple, j'ai donc créé faviconbuild . Il s’appuie sur ImageMagick pour vous permettre de télécharger la dernière version de celle-ci pour votre système ou d’utiliser certaines versions fournies dans mes versions .
Je l'ai publié sous licence MIT pour que tout le monde soit libre de l'utiliser à des fins commerciales ou personnelles, ou tout simplement de s'en inspirer. Si vous trouvez des bugs ou souhaitez l'étendre, n'hésitez pas à vous impliquer .
Je mettrai à jour la page du projet avec des informations plus détaillées, mais elle dispose déjà d'un menu d'aide très pratique et standard et fonctionne sous Unix, Mac et Windows.
Vous exécutez simplement le script .bat ou .sh dans votre terminal.
ex pour Windows:
ou pour Unix / Mac (ou Windows si vous utilisez Cygwin):
Cela vous donnera les informations de version avec les options disponibles. Le script est conçu pour prendre une image d'entrée et générer toutes les différentes images requises, ainsi que le balisage HTML à inclure sur votre site Web.
Voici un exemple d'utilisation de ce logiciel dans l'un de mes projets:
J'ai simplement placé le dossier faviconbuild dans un dossier spécifique à un projet afin de ne pas avoir à toucher aux fichiers du projet lui-même et à côté de celui-ci, j'ai placé mon source.png. Le comportement par défaut du script consiste à tout placer dans un dossier de construction imbriqué gitignored afin qu'il ne soit pas en conflit avec le projet si vous utilisez git.
Si quelque chose me manque, veuillez soumettre une demande de fonctionnalité.
J'ai aussi un article de blog avec plus d'informations.
J'espère que vous trouvez ça utile.
la source
Il y a beaucoup d'informations utiles ici concernant les tailles et générateurs de favicon.
Je peux ajouter à la discussion en expliquant les besoins de conception des différentes tailles.
Oui, les tailles d'icône, de symbole et de logo peuvent être basées sur le même art, mais chacune doit être rendue spécifiquement à cette taille pour apparaître de la manière la plus précise (je dis que les générateurs automatiques ne gèrent pas bien le crénelage et les 16 pixels et l’image générée automatiquement ne sera pas optimisée pour la taille 128 px si vous avez commencé plus petit.
Dessinez votre art à 128 pixels ou dans n'importe quel format carré de grande taille, en utilisant toutes les astuces en 3D que vous souhaitez. Exportez les différentes icônes de taille, une à la fois, en examinant le résultat et en ajustant le masque pour fonctionner au mieux à cette taille.
Pour le format 16 x 16, je vais créer une grille de carrés 16 x 16 et les colorier individuellement pour avoir le plus grand contrôle de la sortie.
la source