Comment concevoir un favicon: le guide ultime
- Règles de conception Favicon
- Aide-mémoire de taille Favicon
- Favoris du navigateur de bureau
- Pomme
- Android, Chrome et Opera
- Safari
- Autres types de favicon
La conception de Favicon est plus importante que vous ne le pensez. La taille importe vraiment ici, car un logo bien conçu doit être reconnaissable quelle que soit sa taille. Il doit passer d'un écran massif à une icône pouvant être aussi petite que 16 x 16 pixels, connue sous le nom de favicon. Le logo Google est un excellent exemple de conception de favicon. Il fonctionne parfaitement pour les écrans plus grands 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 '' à quatre couleurs vu dans la barre d'adresse d'un 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 pièce. Pour voir les designs de favicon qui fonctionnent, consultez notre tour d'horizon des inspiration de conception de logo et découvrez cette superbe collection de Icônes d'application iOS qui le font juste.
Dans cet article, nous allons vous expliquer comment concevoir le 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 des 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.
Conception Favicon: Liens rapides- Règles de conception Favicon
- Aide-mémoire sur les tailles de favicon
- Favoris du navigateur de bureau
- Favoris Apple Touch
- Android, Chrome et Opera
- Onglet épinglé de Safari
- Vous recherchez un autre type d'icône? Consultez notre guide du meilleurs jeux d'icônes gratuits
Au début du Web, un favicon était simplement un fichier d'icône 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.
Nous allons donc commencer avec quelques conseils sur ce à quoi 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.
Règles de conception Favicon
01. Rendez-le reconnaissable
La première chose à considérer lors de la conception d'un favicon est ce qui doit être représenté dans le canevas. Rappelez-vous que votre favicon n'est affiché à l'utilisateur que lorsqu'il est déjà sur votre site Web ou l'avez ajouté à vos favoris. Il n'est donc pas nécessaire d'essayer d'attirer l'utilisateur avec votre favicon.
02. Utilisez votre logo
Considérez les favicons comme des panneaux de signalisation sobres qui aident les utilisateurs à reconnaître votre site Web lorsqu'ils parcourent leurs listes de signets et leurs écrans d'accueil. Par conséquent, vous souhaitez utiliser votre logo ou tout autre symbole permettant à l'utilisateur de reconnaître le plus facilement votre site Web. Si vous n'avez pas de logo qui correspond à la toile quadratique, utilisez la partie la plus reconnaissable de votre logo.
03. Restez clair
Il y a aussi quelques choses à éviter. N'utilisez pas le favicon comme un outil de marketing - cela signifie qu'il n'y a pas d'étiquettes de prix, de bannières «nouvelles» ou «mises à jour», etc. En fait, vous ne voulez pas du tout mettre de texte dans le favicon. Le texte ne s'adapte pas bien et il est probable qu'il soit de toute façon illisible. Enfin, n'utilisez pas de photo - elle sera boueuse et méconnaissable à la taille à laquelle elle apparaîtra.
04. Créez deux versions
Lorsque les favicons ont été introduits pour la première fois dans Internet Explorer 5, ils sont apparus 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 des listes de signets, des menus contextuels et même des écrans d'accueil mobiles et télévisés. Cela rend difficile de prédire comment votre favicon sera affiché à l'utilisateur final.
Pour vous assurer que votre favicon a l'air bien dans les nombreux contextes différents dans lesquels il va apparaître, vous devriez idéalement 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 apparaît à côté de l'URL ou du nom de votre site Web.
Logo sur remplissage uni
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 en contexte.
Aide-mémoire de taille Favicon
Comme mentionné précédemment, différents contextes nécessitent des favicons de tailles différentes. 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 fournies au format ICO. Aujourd'hui, vous pouvez fournir les fichiers au format PNG (à l'exception de l'icône Safari Pinned Tab qui devrait être fournie en SVG).
Si vous voulez un moyen simple de concevoir et d'exporter toutes les tailles de favicon, jetez un œil à la modèle de favicon sur Appliquer des pixels.
Examinons maintenant de plus près les exigences spécifiques des différents cas d'utilisation.
Favoris du navigateur de bureau
Comment créer un favicon de navigateur de bureau
Commençons par le favicon le plus simple que vous devrez 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 en Format PNG avec un arrière-plan transparent .
- 16 x 16
- 32 x 32
- 48 x 48
Pomme
Comment créer des favicons Apple Touch
IOS d'Apple utilise les icônes Apple Touch pour représenter les sites Web qui ont été enregistrés sur l'écran d'accueil iOS en tant que signets. Cela signifie que l'icône Apple Touch sera arrondie au écureuil masque des icônes de l'application iOS.
Il sera également affiché sur le fond que l'utilisateur a choisi pour son écran d'accueil. Dans cet esprit, votre Apple Touch Icon devrait avoir un fond de remplissage solide style.
Les favicons Apple doivent être fournis dans un Format PNG . Vous pouvez vous en sortir en fournissant un 180 x 180 Icône Apple Touch qui s'adapte automatiquement aux différentes tailles d'iPhone et d'iPad. Cela fonctionnera bien dans la plupart des cas.
Sinon, vous pouvez fournir des tailles supplémentaires pour les différents appareils Apple:
- 60 x 60
- 76 x 76
- 120 x 120
- 152 x 152
- 180 x 180
Android, Chrome et Opera
Comment créer un favicon pour Android, Chrome et Opera
Android, Chrome et Opera utilisent le android-chrome-192x192.png et android-chrome-512x512.png cette Google recommande .
Depuis l'introduction des icônes adaptatives dans Android, les sites Web ajoutés à l'écran d'accueil d'Android masqueront le design 192x192, de sorte que l'icône prend forme après le style de masquage préféré de l'utilisateur. Cela peut être un cercle, des ellipses, un rectangle, un rectangle arrondi ou une forme de larme.
Vous devez créer un PNG favicon avec fond solide , à 192 x 192 et 512 x 512 .
Implémentez ces favicons en ajoutant un manifest.json fichier vers votre site et un lien vers celui-ci dans les balises:
Voici le code du manifest.json déposer:
{ 'name': '', 'short_name': '', 'icons': [ { 'src': '/android-chrome- 192x192.png', 'sizes': '192x192', 'type': 'image/png' }, { 'src': '/android- chrome-512x512.png', 'sizes': '512x512', 'type': 'image/png' } ], 'theme_color': '#ffffff', 'background_color': '#ffffff', 'display': 'standalone' }Safari
Comment créer un favicon pour l'onglet épinglé de Safari
C'est le plus étrange, et c'est le seul favicon qui doit être fourni dans format vectoriel comme un Fichier SVG . Il s'affiche sous forme d'icône de vignette lorsqu'un utilisateur épingle un onglet à la fenêtre du navigateur Safari.
Ce favicon doit être un fichier SVG 100% noir avec un arrière-plan transparent . Le SVG ne peut être qu’un seul calque et safari nécessite le viewBox attribut du SVG à définir sur ' 0 0 16 16 ' .
Autres types de favicon
Certaines dimensions et formats de favicon ne sont pas inclus dans cet article, par exemple. Google TV, Chrome Web Store et icônes Apple Touch pré-iOS 7. Pourquoi? Parce qu'ils sont 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 aussi grande variété d'appareils et de systèmes d'exploitation que possible, mais parfois cela n'a tout simplement pas de sens. Mais, si vous voulez voir une liste plus complète d'images de favicon, assurez-vous de jeter un coup d'œil à ceci feuille de triche favicon sur GitHub.
Lire la suite:
