La conception Favicon est plus important que vous pourriez penser,. La taille a vraiment de l’importance ici car un logo bien conçu doit être reconnaissable quelle que soit la taille à laquelle il est vu. Il doit évoluer à partir d’écrans massifs jusqu’à une icône pouvant être aussi petite que 16 x 16 pixels, connue sous le nom de favicon. Un excellent exemple de conception favicon est le logo Google. Il fonctionne parfaitement pour les grands écrans avec son grand » G » et son texte distinctif en quatre couleurs., Et il est toujours aussi reconnaissable lorsqu’il est réduit au minuscule » G » quadrichromie vu dans une barre d’adresse de navigateur web.
Le favicon peut également être vu comme une icône de raccourci, une icône d’onglet ou une icône de signet, il doit donc regarder la partie. Pour voir les conceptions de favicon qui fonctionnent, consultez notre tour d’horizon de l’inspiration de conception de logo et découvrez cette superbe collection d’icônes d’Applications iOS qui l’obtiennent juste.
dans cet article, nous allons parcourir le processus de conception du favicon parfait., Nous inclurons des conseils spécifiques pour créer un favicon pour les appareils Apple, Android, Chrome, Opera et Safari. Plus un guide pratique pour les différentes tailles et formats de favicon que vous devez connaître. Utilisez les liens rapides (à droite) pour accéder directement à la section souhaitée.
- la Recherche d’une autre sorte d’icône? Voir notre guide des meilleurs jeux d’icônes gratuits
Au début du web, un favicon était simplement un fichier d’icônes 16x16px, mais de nos jours, c’est un peu plus compliqué., Il existe différentes tailles et processus de favicon pour différents contextes. Créer un favicon approprié est une science.
donc, nous allons commencer avec quelques conseils pour ce que votre favicon devrait ressembler, puis passer à des conseils spécifiques sur la façon de créer un favicon pour différents contextes. Nous utiliserons le modèle disponible sur Apply Pixels pour générer facilement les différentes tailles de favicon requises, et le favicon de Apply Pixels à titre d’exemple.,
les règles de conception des Favicons
le rendent reconnaissable
la première chose à considérer lors de la conception d’un favicon est ce qui doit être représenté dans le canevas. N’oubliez pas que votre favicon n’est affiché à l’utilisateur que lorsqu’il est déjà sur votre site web ou l’a mis en signet. Il n’est donc pas nécessaire d’essayer d’attirer l’utilisateur avec votre favicon.
utilisez votre logo
considérez les favicons comme des panneaux de signalisation sobres qui aident les utilisateurs à reconnaître votre site Web lors de la navigation dans leurs listes de favoris et leurs écrans d’accueil., Par conséquent, vous souhaitez utiliser votre logo, ou le symbole qui permet le plus facilement à l’utilisateur de reconnaître votre site web. Si vous n’avez pas de logo qui correspond à la toile quadratique, utilisez la partie la plus reconnaissable de votre logo.
gardez-le clair
Il y a aussi quelques choses que vous devriez éviter. N’utilisez pas le favicon comme outil de marketing – cela signifie pas d’étiquettes de prix, de bannières « nouvelles » ou « mises à jour », etc. En fait, vous ne voulez pas du tout mettre du texte dans le favicon. Le texte ne s’adapte pas bien, et il y a de fortes chances qu’il soit illisible de toute façon., Enfin, n’utilisez pas de photo – elle sera boueuse et méconnaissable à la taille à laquelle elle apparaîtra.
créer deux versions
lorsque les favicons ont été introduits dans Internet Explorer 5, ils apparaissaient dans la barre D’URL et dans la liste des signets. Aujourd’hui, les favicons sont affichés dans de nombreux autres contextes, y compris les listes de signets, les menus contextuels et même les écrans d’accueil mobiles et TV., Il est difficile de prédire comment votre favicon sera affiché à l’utilisateur final.
pour vous assurer que votre favicon semble bien dans les nombreux contextes différents dans lesquels il va apparaître, idéalement, vous devriez fournir deux styles de favicon:
Logo sur fond transparent
Cette version est affichée dans la barre D’URL, les listes de signets et d’autres endroits où le favicon,
Logo sur remplissage solide
cette version est utilisée dans les signets en forme de grille et les menus contextuels où le navigateur ou l’appareil masque l’arrière-plan, pour obtenir un aspect uniforme dans le contexte.
Favicon taille triche
Comme mentionné précédemment, les différents contextes nécessitent différentes tailles d’icônes. Vous trouverez ci-dessous un guide rapide des différents formats et dimensions que vous devrez fournir pour couvrir tous les principaux cas d’utilisation.
auparavant, les favicons devaient être fournis au format ICO., Aujourd’hui, il est acceptable de fournir les fichiers au format PNG (à l’exception de L’icône de L’onglet épinglé Safari qui doit être fournie en SVG).
Si vous voulez un moyen facile de concevoir et d’exporter toutes les tailles de favicon, jetez un oeil au modèle de favicon sur Appliquer des Pixels.
Maintenant, nous allons regarder de plus près les exigences spécifiques des différents cas d’utilisation.,
favicons de navigateur de bureau
comment créer un favicon de navigateur de bureau
commençons par le favicon le plus simple que vous aurez besoin de créer: un favicon classique pour les navigateurs de bureau classiques. Ce type de favicon fonctionne mieux sur les arrière-plans transparents, car il apparaîtra souvent dans la barre D’URL et dans les listes de signets.,
vous devrez fournir ce type de favicon en trois tailles, le tout au format PNG avec un fond transparent.,
- 16×16
- 32×32
- 48×48
Apple
Comment faire pour créer de la Touche Apple favicons
l’iOS d’Apple utilise des Icônes Tactiles d’Apple pour représenter les sites web qui ont été enregistrées à l’iOS de l’écran d’accueil sous forme de signets. Cela signifie que L’icône Apple Touch sera arrondie au masque squircle des icônes d’Applications iOS.
il sera également affiché sur l’arrière-plan choisi par l’utilisateur pour son écran d’accueil. Dans cet esprit, votre icône Apple Touch doit avoir un style d’arrière-plan de remplissage solide.,
Les favicons Apple doivent être fournis au format PNG. Vous pouvez vous en sortir avec une icône Apple Touch 180×180 qui évoluera automatiquement pour les différentes tailles d’iPhone et d’iPad. Cela fonctionnera bien dans la plupart des cas.,
Si non, vous pouvez fournir d’autres tailles pour les différents appareils Apple:
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180
Android, Chrome et Opera
Comment créer un favicon pour Android, Chrome et Opera
Android, Chrome et Opera utiliser android-chrome-192×192.png et android-chrome-512×512.png que Google recommande.,
Depuis L’introduction des icônes adaptatives dans Android, les sites Web ajoutés à L’écran D’accueil Android masqueront le design 192×192, de sorte que l’icône prend forme après le style de masquage préféré de l’utilisateur. Cela peut être un squircle, une ellipse, un rectangle, un rectangle arrondi ou une forme de larme.
Vous devez créer un favicon PNG avec un arrière-plan solide, à 192×192 et 512×512.,
implémentez ces favicons en ajoutant un manifeste.fichier json de votre site et un lien vers elle dans les balises:
<link rel="manifest" href="/manifest.json">Voici le code pour le manifeste.fichier json:
Safari
comment créer un favicon pour L’onglet épinglé de Safari
c’est le seul favicon qui doit être fourni au format vectoriel en tant que fichier SVG. Il s’affiche sous forme d’icône miniature lorsqu’un utilisateur épingle un onglet dans la fenêtre du navigateur Safari.,
Ce favicon doit être un fichier SVG 100% noir avec un fond transparent. Le SVG ne peut être qu’une seule couche, et safari nécessite que l’attribut viewBox du SVG soit défini sur « 0 0 16 16 ».
<link rel="mask-icon" href="your_icon.svg">Autres types de favicon
Il y a quelques favicon dimensions et de formats qui n’ont pas été inclus dans cet article par exemple., Google TV, Chrome Web Store et pré-iOS 7 Apple Touch icônes. Pourquoi? Parce qu’ils ont été obsolètes ou parce qu’ils sont rarement pertinents pour le développeur web Moyen.
en général, les développeurs et les concepteurs doivent s’efforcer de prendre en charge une variété aussi large que possible de périphériques et de systèmes d’exploitation, mais parfois cela n’a tout simplement pas de sens. Mais, si vous voulez voir une liste plus complète des images favicon, assurez-vous de jeter un oeil à cette feuille de triche favicon sur GitHub.,
- Le design haut de tendances à l’horizon 2020
- 15 professionnels de polices pour les concepteurs
- 27 meilleurs jeux d’icônes gratuites
