Désormais, l'icône personnelle du site - Favicon - est une sorte de carte de visite de n'importe quelle ressource Web. Cette icône met en évidence le portail souhaité non seulement dans la liste des onglets du navigateur, mais également, par exemple, dans les résultats de recherche Yandex. En règle générale, Favicon ne remplit aucune autre fonction que d'augmenter la reconnaissance du site.
Créer une icône pour votre propre ressource est assez simple : vous trouvez une image appropriée ou la dessinez vous-même à l'aide d'un éditeur graphique, puis compressez l'image à la taille souhaitée - généralement 16 × 16 pixels. Enregistrez le résultat obtenu dans le fichier favicon.ico et placez-le dans le dossier racine du site. Cependant, cette procédure peut être grandement simplifiée en utilisant l'un des générateurs Favicon disponibles sur le réseau.
La plupart des éditeurs d'icônes Web offrent tous les outils dont vous avez besoin pour créer des icônes de favicon. Dans ce cas, il n'est pas nécessaire de dessiner une image à partir de zéro - vous pouvez utiliser une image toute faite.
Méthode 1 : Favicon.by
Générateur de favicons en ligne en russe : simple et intuitif. Vous permet de dessiner vous-même une icône à l'aide du canevas 16x16 intégré et d'une liste minimale d'outils tels qu'un crayon, une gomme, une pipette et un remplissage. Il existe une palette avec toutes les couleurs RVB et la prise en charge de la transparence.
Si vous le souhaitez, vous pouvez télécharger une image prête à l'emploi sur le générateur - à partir d'un ordinateur ou d'une ressource Web tierce. L'image importée sera également placée sur la toile et sera disponible pour l'édition.
En conséquence, vous obtenez un fichier graphique ICO avec le nom favicon et une résolution de 16 × 16 pixels. Cette icône est déjà prête à être utilisée comme icône pour votre site Web.
Méthode 2 : Éditeur X-Icon
Application de navigateur HTML5 qui vous permet de créer des icônes détaillées jusqu'à 64 × 64 pixels. Contrairement au service précédent, X-Icon Editor dispose de plus d'outils de dessin et chacun d'eux peut être configuré de manière flexible.
Comme dans Favicon.by, vous pouvez télécharger ici l'image finie sur le site et la convertir en favicon, en la modifiant correctement si nécessaire.
Si vous souhaitez conserver les détails de l'image que vous souhaitez transformer en favicon, l'éditeur X-Icon est idéal pour cela. C'est la possibilité de générer des icônes avec une résolution de 64 × 64 pixels qui est le principal avantage de ce service.
Bonjour à tous!
Dans cet article, je vais vous expliquer comment installer un favicon sur un site Web. Cela peut être fait en utilisant le répertoire racine du site ou en utilisant la fonctionnalité de modèle. Nous analyserons toutes les options et déterminerons laquelle sera la meilleure pour tel ou tel cas.
Mais avant cela, nous allons parler de la façon dont ce favicon peut être dessiné. Ensuite, déterminons quelle taille devrait avoir le logo, à la fin je vous dirai comment insérer l'icône créée dans le site.
Un favicon est une icône de site Web 16 x 16 (ou 32 x 32, mais pas plus grande). Il s'affiche dans l'onglet du navigateur. Cela ressemble à ceci :
De plus, l'icône est affichée dans les résultats de la recherche, et si votre site n'a pas son propre favicon, il est peu probable que les utilisateurs y prêtent attention. Surtout les plus expérimentés qui apprécient vraiment chaque petite chose.
Dans Yandex Webmaster, l'absence de favicon est classée comme une erreur qui doit être corrigée de toute urgence. Cela est dû non seulement au fait que les personnes dans un moteur de recherche peuvent ne pas faire confiance à un site sans icône, mais aussi avec certains algorithmes de recherche. Les robots voient de telles failles techniques et réduisent le plus souvent la ressource dans les résultats de recherche. Un triste phénomène qui peut affecter toute promotion SEO.
Résumons :
- Favicon affecte les facteurs comportementaux et les taux de clics.
- Les robots de recherche peuvent également prendre en compte la présence ou l'absence d'un favicon.
- Une telle faille technique peut entraîner une baisse du trafic.
En d'autres termes, si vous avez une question : ajoutez un favicon ou non, alors la réponse est évidente - assurez-vous de l'ajouter.
Voyons maintenant comment vous pouvez dessiner cette icône. Cela peut être fait en utilisant divers services en ligne, éditeurs.
Où télécharger la version finie
Loin d'être le meilleur choix, mais quelqu'un l'utilise. Vous pouvez télécharger un favicon prêt à l'emploi sur Internet et ne vous souciez pas trop de créer le vôtre. Tous sont présentés dans des formats et des tailles pratiques.
Entrez simplement la requête requise dans le moteur de recherche, quelque chose comme "Télécharger un favicon prêt à l'emploi", après quoi un grand nombre de variantes très différentes vous seront présentées.
Nous téléchargeons l'image sur notre PC, puis l'installons sur le site. C'est simple. Ils sont disponibles tout à fait gratuitement, personne ne vous grondera. Bien que si nous parlons d'une entreprise, même petite, alors lorsque le logo de quelqu'un d'autre est trouvé, des incidents désagréables peuvent survenir.
Vous pouvez rechercher des options toutes faites sur différents sites. En règle générale, il existe des collections entières de toutes sortes de logos thématiques que certains webmasters peuvent aimer.
Mais je répète encore une fois qu'il serait préférable de créer vous-même un favicon.
Créer un favicon
Services en ligne
Vous pouvez dessiner un favicon dans les services en ligne. Il suffit d'entrer la requête correspondante dans le moteur de recherche, après quoi votre attention sera présentée avec toute une liste de sites qui peuvent vous aider à réaliser vos projets.
Ce cours couvrira les caractéristiques les plus importantes de la création compétente de projets d'information, l'interaction avec une équipe et d'autres aspects utiles dont vous aurez certainement besoin lors du développement de votre entreprise.
Bonne journée, chers lecteurs. Parfois, une chose insignifiante peut jouer entre vos mains. Aujourd'hui, nous allons parler de ces gadgets presque invisibles qui apportent des avantages significatifs au site.
Dans cet article, vous apprendrez pourquoi les favicons sont nécessaires, où les trouver et comment créer une icône au format ico rapidement et facilement.
Un élément invisible qui se dépose dans le subconscient de chacun
Le favicon est une petite image. Dans Yandex, il apparaît à côté du nom du portail déjà dans la recherche, et est également nécessairement affiché dans le navigateur, dès que vous ouvrez la ressource.
Vous avez probablement prêté attention à eux. C'est à cela qu'ils servent. Les icônes contribuent à la mémorisation d'une ressource particulière, car les informations visuelles sont absorbées beaucoup plus rapidement et pénètrent dans le subconscient lui-même. Vous pouvez voir une personne une fois, discuter avec elle pendant trois heures et fouiller dans sa mémoire pendant très longtemps, cela vaut la peine de la rencontrer une deuxième fois. L'information visuelle (visage) est ancrée dans la mémoire beaucoup plus profondément que toute autre.
Si vous voyez l'icône deux ou trois fois, elle sera déposée à un niveau subconscient, vous ferez confiance au portail et la choisirez plus volontiers dans la masse générale.
Si vous recherchez des informations sur une demande spécifique et ouvrez plusieurs onglets, le premier vous inspectera les favicons qui vous sont familiers, et le reste sera très probablement fermé si vous êtes satisfait des informations reçues des premières sources.
Je vais vous raconter une histoire sur la façon dont l'icône du site m'a fait une blague cruelle. J'avais besoin de télécharger une sorte de livre. J'ai vu un favicon familier, et ce n'est pas la première fois que je vois le design. Super, je suis déjà venu ici ! J'ai cliqué sur télécharger presque sans hésiter. Avant de pouvoir l'enregistrer, le programme antivirus a commencé à crier sauvagement et l'ordinateur n'a pas pu être enregistré, j'ai dû réinstaller le système. Ce n'est qu'à ce moment-là que je me suis souvenu de la façon dont je connaissais ce site et que je m'en souviens bien. Exactement la même situation s'est produite il y a environ un an, sur la même ressource.
Comment créer un favicon en seulement 2 minutes
L'icône de votre site peut être au format png ou ico, d'une taille de 16 x 16 pixels.
Vous pouvez utiliser le convertisseur et créer un favicon à partir de n'importe quelle image. Par exemple, ici https://www.icoconverter.com/ ... Sélectionner un fichier.
Par exemple, j'ai déjà préparé un dessin. Il est préférable de choisir le format png, les bords seront alors transparents.
Sélection de 16 pixels. Certaines personnes préfèrent les images 8 bits (profondeur de bits). Ensuite, l'image se chargera plus rapidement. Il me semble que ce n'est plus particulièrement pertinent. Utilisez des articles beaux et de haute qualité. Ce sera beaucoup plus utile.
Donc, il semblerait que c'est ça. Cependant, j'obtiens une erreur. Le fait est que la taille de l'image dépasse les limites autorisées. L'image ne doit pas dépasser 3 mb.
Vous pouvez compresser et ou Paint, mais je vais vous montrer une autre option. Si vous avez téléchargé l'image dans Google, recherchez-la à nouveau, puis exécutez la "Recherche par image".
Sélectionnez maintenant "Petit".
Téléchargez la même photo, mais plus petite.
Convertir à nouveau.
Où trouver des icônes prêtes à l'emploi
Un moyen plus simple et plus honnête de trouver une icône est de la télécharger à partir d'un service en ligne https://www.iconsearch.ru/ ... L'utilisation de ces images est autorisée par l'administration et ne fait pas l'objet de poursuites. ... Entrez n'importe quel nom dans la zone de recherche et vous avez terminé.
Trouvez une image au format png et ico, téléchargez-la et installez-la sur le site.
Mais que faire si vous voulez le créer vous-même ? Ce n'est pas difficile.
Travail créatif pour les professionnels et ceux qui se ruent sur les spécialistes
Toute entreprise est bonne. C'est cool si vous êtes attiré par de nouvelles connaissances et que vous êtes prêt à faire toutes sortes de petites choses pour développer vos capacités. Si vous souhaitez proposer vous-même quelque chose d'intéressant pour le portail, vous aurez besoin d'un service gratuit : https://favicon.ru/ .
Choisir une couleur.
Nous piochons dans le champ offert pour cela.
Regardez le résultat en parallèle. Ensuite, téléchargez et vous avez terminé.
Peut-être serez-vous inspiré par l'utilisation de dessins prêts à l'emploi. Sélectionnez un fichier sur votre ordinateur.
Et votre photo se transformera en un favicon 8 bits. Utilisez la transparence pour vous débarrasser de l'arrière-plan.
C'est le résultat que vous obtenez. Je ne sais pas pour vous, mais, franchement, je ne l'aime pas particulièrement.
J'aimerais utiliser Photoshop () pour ce travail. Créerait une icône, l'enregistrerait au format png, puis la convertirait avec https://www.icoconverter.com ... Oui, il y a beaucoup plus de travail, mais le résultat sera plus intéressant et plus beau. Bien que cela dépende de vous.
Regardez une vidéo dans laquelle un gars crée une icône géniale en plus de 9 minutes.
Si vous avez aimé cette vidéo et que vous souhaitez approfondir Photoshop, je vous recommanderai le cours de Zinaida Lukyanenko ( Photoshop à partir de zéro au format vidéo VIP 3.0 ). En quelques semaines seulement, vous maîtriserez toutes les compétences dont vous avez besoin pour travailler avec ce programme.
Je ne me lasserai pas de répéter que le côté technique n'est pas un tel problème. Il est important de perfectionner vos compétences, d'apprendre à créer des projets sympas qui fonctionnent. Et cela ne peut se faire que dans la pratique. Après avoir acquis toutes les connaissances de base de la technologie.
L'expérience et la pratique suivent. Au début, cela prend plusieurs heures pour une image, et au fil du temps, il devient évident pour vous quelles couleurs sont combinées, les techniques qu'il est préférable d'appliquer dans tel ou tel cas. Il n'y a rien de plus agréable que de regarder travailler des designers professionnels. C'est vraiment incroyable.
Ne perdez pas de temps dans une compréhension insensée, développez votre propre talent. Vous ne devriez pas être comme un bûcheron d'un conte de fées qui, jusqu'à la fin de sa vie, a essayé de trouver le moyen le plus rapide de travailler avec une hache, mais a vécu jusqu'à un âge avancé et n'a pas coupé un seul arbre. Il consacre tout son temps aux conversations, raisonnements, livres et autres recherches de réponse à une question qui l'inquiète. À la fin de sa vie, il n'avait plus la force de tester si la meilleure option fonctionnait - il suffit de le faire.
Faites tout à temps. Vous découvrirez bientôt comment vous pouvez travailler plus facilement, plus rapidement et de la meilleure façon possible. À ce stade, terminez les tâches, au moins d'une manière ou d'une autre, et vous pourrez certainement atteindre la fin avec un incroyable bagage de connaissances.
Si vous avez aimé cet article, abonnez-vous à la newsletter. Vous pourrez ainsi recevoir des informations à jour qui vous aideront à vous retrouver sur Internet et à gagner beaucoup d'argent sur ce que vous aimez : conception, rédaction, mise en page et même gestion de tous ces processus. Chacun trouvera quelque chose pour lui-même.
Bonne chance dans vos efforts. Jusqu'à la prochaine fois.
Favicon - le terme littéralement traduit par "icône préférée" - est considéré comme l'un des éléments les plus difficiles de la conception Web moderne. Il s'agit d'une petite image qui apparaît dans un onglet de navigateur, une barre de recherche et d'autres endroits et joue un rôle important dans la personnalisation de votre site.
En raison du format non standard et de la petite taille, la création d'un favicon peut être difficile, à la fois d'un point de vue technique et design.
Assurer la compatibilité du favicon avec différents navigateurs est une tâche tout aussi difficile.
Dans cet article, vous apprendrez comment créer un favicon - nous donnerons des conseils de conception et des services pour créer un favicon, et comment ajouter un favicon à votre site.
Qu'est-ce qu'un favicon et pourquoi est-il nécessaire
Malgré le fait qu'un favicon soit un très petit objet graphique, il est extrêmement important dans la conception du site et en général.
Cliquez pour agrandir l'image.
d'abord, favicon rend votre site plus personnalisé et cohérent avec d'autres éléments graphiques tels qu'un logo.
en deuxième , le favicon permet à votre site de se démarquer des autres ressources Web dans la liste des résultats de recherche. Un site sans cette mini-icône aura l'air terne et perdra face à ses concurrents. En bref, un favicon est simplement un "must have" pour les sites.
Troisièmement Le favicon permet à l'utilisateur de trouver plus rapidement votre site dans le répertoire des signets ou autres icônes du bureau.
Création d'un design de favicon
Le favicon doit capturer l'essence et la marque dans un petit signe de la taille d'une émoticône. Une version simplifiée du logo de l'entreprise est une bonne solution, mais gardez à l'esprit qu'un logo à part entière avec du texte et des marques ne convient pas à cette fin.
Ces sites Web utilisent leur image de marque (ou au moins quelque chose de similaire).
N'utilisez pas de texte
Évitez d'utiliser du texte, car la petite taille du favicon rendra les inscriptions illisibles. Placez 1, maximum 2 lettres sur l'icône - par exemple, les premières du nom de votre entreprise ou de votre ressource Web ; dans ce cas, ils peuvent encore être distingués.
Pixeliser le favicon
Les favicons sont si petits que chaque pixel compte. Souvent, lorsque vous effectuez un zoom arrière sur un logo en taille réelle, l'image est floue.
Ceci est un extrait du logo Facebook en taille réelle après avoir été réduit à 32x32. Il est facile de voir que l'image "flotte" sur les bords. Pour éviter ce défaut, vous devez effectuer une édition au niveau des pixels.
Lorsque je travaille avec des icônes, je préfère utiliser des programmes d'édition bitmap (comme Photoshop ou Pixelmator). Tout d'abord, je réduis le logo en taille réelle à 64x64 pixels, car c'est le plus grand favicon dont j'aurai besoin. Le travail est très minutieux, cela peut prendre une heure, voire deux, mais le résultat est tout simplement excellent.
Si vous n'avez pas le temps et les compétences pour de telles opérations, il est préférable d'utiliser des services en ligne tels que Logotizer.ru
Taille des favoris
Avec une icône 64x64, je crée des pixels 32x32, 24x24 et 16x16 de la même manière. Chacun d'eux a son propre objectif :
- 64 × 64 - "Liste de lecture" dans Safari et Windows
- 24 × 24 - Sites épinglés dans IE9.
- 32 × 32 - Pour les écrans haute résolution.
- 16x16 - Généralement utilisé dans les navigateurs tels que IE, Safari, Chrome, etc.
Mais la création de favicons plus petits ne se limite pas à : une édition supplémentaire au niveau du pixel est souvent nécessaire. Vous pouvez également ajouter un canal alpha si bon vous semble. Si auparavant cela causait des difficultés, maintenant presque tous les navigateurs prennent en charge la transparence dans les favicons.
Formats d'icônes de favoris
Auparavant, lorsque seuls les fichiers Windows ICO étaient pris en charge, nous pouvions gagner du temps en enregistrant un favicon 16x16 au format GIF et en lui donnant l'extension .ico. Cette technique a parfaitement fonctionné ! Mais maintenant, cette méthode n'est plus nécessaire car les outils pour créer des fichiers ICO peuvent être trouvés facilement sur Internet. De plus, maintenant et sont utilisés pour les favicons, mais les plus courants ne sont toujours que les deux suivants.
ICO
La paume appartient au format ICO. Contrairement aux fichiers PNG, les fichiers ICO peuvent avoir différentes résolutions et profondeurs de bits (ce qui est idéal pour Windows). Internet Explorer utilise des favicons de différentes tailles (par exemple, des icônes de 32 pixels pour la barre des tâches de Windows 7), et le format ICO est donc la seule option dans ce cas.
Les fichiers PNG sont très pratiques car vous n'avez besoin d'aucun outil spécial pour les créer. Ce format prend en charge le canal alpha et vous permet de créer les fichiers les plus petits. Le seul inconvénient du format PNG est peut-être qu'il n'est pas pris en charge par Internet Explorer.
Il y a aussi d'autres options :
- Les formats GIF et GIF animés n'ont d'autre avantage que la compatibilité avec les très anciens navigateurs.
- Il est déconseillé d'utiliser le format JPG, même si l'image est sous forme de photographie. Ce format n'a pas la clarté du PNG, et le seul avantage est des transitions plus douces entre les couleurs - une nuance complètement invisible dans une très petite image.
- SVG pourrait être une excellente option si davantage de navigateurs supportaient les favicons de ce format. En attendant, il n'y a qu'une compatibilité avec Opera.
- Il existe également un PNG dit "sous-format" - APNG (PNG animé), qui est pris en charge dans Firefox et Opera. Cependant, la faisabilité de son utilisation reste discutable. Un favicon animé peut être distrayant et même ennuyeux pour l'utilisateur.
Créer un favicon en ligne - outils et services en ligne
Nous avons sélectionné pour vous les services les plus utiles qui vous aideront à créer un favicon en ligne.
Logotiseur
Logotizer est un nouveau service simple et pratique pour créer un favicon et un logo pour votre site Web.
Avec ce constructeur en ligne, vous pouvez créer un favicon à partir de zéro. Le service est destiné aux débutants, il ne sera donc pas difficile de développer un bon design.
Comment créer un favicon avec le générateur de logotiseur en ligne
La zone de travail principale est sur la gauche. Sur la droite, vous pouvez voir à quoi ressemblera le favicon sur différents supports - onglet du navigateur, barre des tâches de l'ordinateur ou écran du smartphone. Très pratique et intuitif.
Tout d'abord, vous devez choisir la forme du favicon. Il y en a beaucoup, plus de 50. Nous vous conseillons de choisir des formes simples et peu compliquées pour rendre le favicon facile à comprendre et à mémoriser.
A ce stade, vous définissez également la couleur de la forme, qui sert d'arrière-plan au favicon, et sélectionnez le cadre. Voyez quelle couleur domine votre logo (le cas échéant), quelles couleurs sont les principales sur votre site. C'est dans cette plage que nous vous recommandons de créer un design de favicon.
Sous le bloc « Forme » se trouve une collection de formes (symboles). Il n'y en a pas tellement, c'est dommage que vous ne puissiez pas télécharger vos options ; mais le choix reste assez intéressant.
Changez la couleur, la taille, la position des formes ! En un mot, expérimentez, heureusement, le service vous permet de le faire.
Une fois la forme sélectionnée, vous pouvez ajouter votre propre texte. Comme je l'ai écrit plus tôt, il vaut mieux utiliser 1 ou 2 lettres, pas plus.
Il existe une vaste sélection de polices. C'est certainement un plus. Comme pour les formes, vous pouvez modifier la couleur, la taille, la position du texte.
Si vous décidez qu'une couche de favicon interfère temporairement avec vous ou n'est pas du tout nécessaire, vous pouvez simplement la masquer.
Après avoir créé un favicon, le service vous proposera de l'enregistrer. Enregistrez un compte (en 2017, il n'y a aucun moyen de s'inscrire sans inscription), et après cela, vous pouvez télécharger des fichiers pour un petit paiement - 199 roubles.
Le site contient également une petite instruction sur la façon d'ajouter un favicon sur le site, vous ne devriez donc pas avoir de problèmes pour ajouter un favicon sur le site. Des recommandations similaires sont également fournies plus loin dans cet article.
Après paiement, l'utilisateur reçoit immédiatement 10 favicons de tailles différentes pour tous les appareils nécessaires aujourd'hui (icône Apple touch, icônes d'application Microsoft et autres).
Le fichier favicon.ico lui-même est de plusieurs tailles et contient des icônes de 4 tailles dans 1 fichier (16px, 24px, 32px, 64px). En conséquence, si vous ajoutez un site aux favoris de votre navigateur ou ouvrez un historique, vous pourrez voir des icônes de différentes tailles, mais elles s'afficheront clairement et sans flou.
Dans l'ensemble, le service est bon. Simple, pratique, rien de plus.
RealFaviconGenerator.net
Est un générateur de favicons plus simple qui vous permet de créer des favicons pour n'importe quelle plate-forme. De plus, vous pouvez tester le favicon sur la ressource. Entrez l'URL de votre site Web et vous verrez à quoi ressemble votre favicon dans chaque navigateur et chaque système d'exploitation. Real Favicon Generator vous montrera également comment corriger les défauts et améliorer encore votre favicon.
Favicon.by
Favicon.by Est un autre générateur de favicons gratuit et facile à utiliser qui convertit les fichiers PNG, JPG et GIF au format .ico. Téléchargez une image depuis votre ordinateur, sélectionnez une taille (16x16px ou 32x32px) et cliquez sur le bouton "Créer". Pour enregistrer le favicon résultant sur votre site, suivez les instructions.
Le service permet également de dessiner un logo pixel par pixel, mais, pour être honnête, tout le monde ne peut pas le faire. Par exemple, je ne pouvais pas. Ici, je suis tellement tordu :)
Comment ajouter un favicon à votre site
Vous pouvez ajouter un favicon à votre site en effectuant quelques modifications dans le code HTML de la page du site.
Étape 1 : Téléchargez le fichier « favicon.ico » sur votre serveur d'hébergement.
Pour cela, rendez-vous sur votre serveur FTP en utilisant ce lien :
ftp : // [email protégé]
Entrez votre nom d'utilisateur et votre mot de passe. Ils peuvent être obtenus à partir du panneau d'administration de votre société d'hébergement.
Téléchargez les fichiers favicon dans le répertoire racine. Le répertoire racine est généralement nommé « public_html » ou « www ».
Étape 2 : Ajoutez un favicon au HTML.
La fenêtre du serveur FTP étant ouverte, téléchargez le fichier « index.html » ou « header.php ».
Ensuite, vous devez télécharger le code. Le code téléchargeable dépend de votre site Web.
Si votre site est en HTML, recherchez la zone HEAD dans votre fichier index.html et collez le code suivant :
Si votre site est WordPress, recherchez la zone HEAD dans votre fichier header.php et collez le code suivant :
/favicon.ico ”/>
Les navigateurs peuvent utiliser ces codes pour trouver vos favicons.
Vous avez donc installé votre favicon !
Comment ajouter un favicon à WordPress et à d'autres plateformes
Si votre ressource est basée sur WordPress ou un autre CMS, alors ajouter un favicon à votre site est très simple. En général, l'algorithme d'ajout d'un favicon sera le même pour différentes plateformes.
1. Vous devez accéder à la console du site.
2. Recherchez la section « Design » ou « Apparence ».
3. Accédez à la section "Paramètres du thème" et recherchez-y "Favicon".
4. Téléchargez le favicon depuis votre ordinateur.
5. Enregistrez et actualisez la page.
Comment créer des favicons plus complexes
Cet article couvre des moyens simples et rapides de créer des favicons compatibles avec presque tous les navigateurs et systèmes d'exploitation. Mais en matière de conception et de développement Web, il n'y a pas de limite à la perfection. Si vous souhaitez apprendre à créer des favicons plus complexes, des icônes tactiles pour les écrans d'accueil iOS, des icônes pour l'interface Metro sous Windows, des icônes pour Google TV, etc., je vous recommande de vous familiariser avec ces supports : aide-mémoire favicon... Il contient des informations complètes sur le sujet et fournit de bonnes sources. C'est une excellente option pour les concepteurs et les développeurs (moi y compris) qui cherchent constamment à élargir leurs connaissances.
Avec Favico.js, vous pouvez créer des favicons numériques dynamiques.
Vous aurez peut-être également besoin d'un favicon dynamique doté d'une icône avec un numéro changeant. Pour créer de telles favicons, je vous conseille d'utiliser le service favico.js disponible sur Github. Alors que les favicons dynamiques ne sont pas compatibles avec tous les navigateurs. Mais pour les navigateurs qui les prennent en charge, ces icônes peuvent être un ajout intéressant et utile.
Si vous souhaitez mettre à jour cet article avec un autre conseil ou poser une question, laissez des commentaires ci-dessous !
Comment créer un favicon pour un site Web - conseils et services mis à jour : 7 février 2018 par : administrateur
Qu'est-ce qu'un favicon ?
Pour ceux qui ne savent pas ce qu'est un favicon, nous allons donner une petite aide qui vous permettra de prendre le dessus. Un favicon est une petite icône de 16x16 ou 32x32 pixels, contenant généralement un logo, la première lettre de la marque, ou une image caractéristique qui reflète le type d'entreprise ou la thématique du site.
Pourquoi le favicon est-il important ?
Le favicon remplit les fonctions suivantes :
L'image de marque.
Identification du site par l'utilisateur (utilisabilité).
Donne au site Web un aspect professionnel.
Attardons-nous plus en détail sur les principaux avantages de l'utilisation d'un favicon.
Reconnaissance de la marque
Favicon est comme une petite identité de site. Comme indiqué dans l'introduction, le favicon aide l'utilisateur à se souvenir de votre site parmi les nombreux sites qu'il a visités. Qu'il s'agisse de l'historique de navigation, des résultats de recherche Google ou de la liste des sites favoris dans votre navigateur, les favicons aident les utilisateurs à reconnaître et à visiter facilement votre site.
Confiance
Les utilisateurs ont tendance à juger les vendeurs de biens et de services sur Internet en fonction du professionnalisme de leur site Web. L'absence de favicon (les moteurs de recherche affichent un site sans favicon avec une icône de document vierge) peut facilement entraîner une perte de crédibilité, surtout lorsque les utilisateurs vous comparent à vos concurrents.
Visites répétées
On sait que les gens réagissent mieux aux images qu'au texte. Maintenant, supposons qu'un visiteur de votre site était pressé lorsqu'il l'a visité pour la première fois et a décidé de le mettre en signet pour y revenir plus tard. Disons que cette personne décide par la suite de visiter à nouveau votre site, pour lequel il se réfère à ses favoris. Vous avez de la chance si vous avez un favicon reconnaissable, comme la lettre G bien visible et unique de Google, et l'utilisateur vous trouvera. S'il n'y a pas de favicon, vous pouvez même être supprimé de la liste des signets.
Gain de temps pour l'utilisateur
Les favicons économisent le temps passé par l'utilisateur à identifier un site dans les signets, l'historique ou d'autres endroits où le navigateur place un favicon pour une identification rapide. Cela facilite simplement la vie du visiteur moyen de votre site.
Avantages SEO
Si votre site dispose d'un favicon, vous serez mieux visible dans les résultats de recherche que les sites qui n'en ont pas, et par conséquent, vous pourrez attirer plus de visiteurs.
Comment créer un favicon ?
Il existe de nombreux outils pour créer un favicon en quelques minutes. Si vous n'avez pas de compétences en conception ou ne savez pas comment faire, vous pouvez essayer de générer un favicon à l'aide de Logaster.
Pour ce faire, suivez les instructions étape par étape :
Étape 5. Créez un favicon
Maintenant que vous avez un logo, cliquez sur "Créer un favicon avec ce logo" sur la page du logo.
Étape 6. Sélectionnez le design de favicon souhaité
Comme pour le logo, Logaster générera des dizaines de favicons magnifiques et prêts à l'emploi. Choisissez le design que vous aimez. Un aperçu vous permettra de voir à quoi ressemblera votre favicon sur le site.
Si vous devez modifier le favicon, vous pouvez le faire en éditant le logo, car les favicons sont créés en fonction de la conception du logo. Par conséquent, si vous souhaitez, par exemple, une couleur de favicon différente, vous devez revenir à la page du logo, changer sa couleur, puis recréer le favicon.
Vous pouvez trouver l'inspiration pour un favicon sur les sites :
Étape 7. Téléchargez le favicon
Vous pouvez acheter le favicon séparément pour 9,99 $ ou acheter le Design Pack, qui comprend non seulement le favicon, mais également le logo, la carte de visite, l'enveloppe et le papier à en-tête. Vous pouvez découvrir comment acheter le Pack Design.
Après paiement, vous pouvez télécharger le favicon aux formats ico et png.
Où puis-je utiliser un favicon ?
Vous pouvez utiliser un favicon :
En ligne;
Appareils mobiles. L'utilisateur peut ajouter un favicon à l'écran d'accueil de son appareil (quelque chose comme un signet) - Android, IOS, Windows Phone, etc.
Programmes et applications pour PC/Mac.
Comment installer un favicon sur un site web ?
Après avoir reçu le favicon, son installation sur le serveur ne prendra pas plus de quelques minutes et s'effectue en deux étapes. Pour ce faire, vous aurez besoin d'un accès au répertoire racine de votre site et d'un éditeur de texte pour modifier le HTML du site.
Étape 1. Vous devez télécharger le fichier favicon.ico sur le serveur. Pour ce faire, vous devez télécharger et installer un client ftp tel que FileZilla. Saisissez ensuite votre nom d'utilisateur et votre mot de passe et téléchargez le fichier. Vous pouvez lire des instructions plus détaillées sur la façon de télécharger le fichier favicon.
Étape 2. Vous devez maintenant modifier la page HTML de votre site pour aider les navigateurs à trouver votre image favicon. Avec la fenêtre FTP ouverte, recherchez et téléchargez le fichier index.html ou header.php depuis le serveur.
Ouvrez le fichier index.html dans un éditeur de texte - Bloc-notes, Bloc-notes ++, Sublime Text.
Si votre site contient du HTML pur, collez le code personnalisé dans la zone HEAD du fichier index.html.
Le code peut être copié sur la page favicon du site Logaster.
Si vous utilisez WordPress, collez le code ci-dessous dans la zone HEAD de votre fichier header.php.
Une fois terminé, téléchargez le fichier là où vous l'avez obtenu. Fait! Rechargez la page de votre site pour voir le favicon.
La plupart des navigateurs modernes sont assez intelligents et peuvent trouver le fichier favicon même sans un tel code, mais seulement si le favicon a une image de 16x16 pixels, le nom favicon.ico et est enregistré dans le répertoire racine de votre site.
Nous espérons que cet article vous a donné des informations utiles pour vous aider à créer un favicon qui rendra votre site plus efficace et attrayant.
