Choix des lecteurs
Articles populaires
Générateur de favicon - vous aidera à convertir et à modifier n'importe quelle image, en la transformant en favicon pour le site. Aujourd'hui, nous vous présentons un article sur le meilleur générateur de favicon pour sites Web d'aujourd'hui.
De nos jours, il est difficile d’imaginer un site Web sans favicon. Un favicon est une icône qui se trouve dans la barre d'adresse du navigateur ou dans le titre de la fenêtre (selon le navigateur), et qui distingue le site/onglet ouvert de beaucoup d'autres. Initialement, ces icônes ont été développées dans IE afin de mettre en évidence un site dans la liste des favoris du navigateur (dans IE, ces signets étaient appelés Favoris), d'où le nom Favicon - icône des favoris.
Mais créer un favicon de vos propres mains n'est pas si simple. Il doit avoir un format ICO, ce qui nécessite un logiciel spécial pour faire quelque chose d'utile et des compétences considérables. Par conséquent, pour vous faciliter la vie, il est préférable d’utiliser un générateur de favicon en ligne.
Il existe de nombreux services qui vous permettent de générer des favicons à partir d'images (il peut s'agir d'un logo ou d'une illustration spécialement conçue). Mais la plupart d’entre eux ont des problèmes de transparence.
Pour plus de clarté, nous présentons l'illustration « Comment différents générateurs de favicon traitent la transparence et la réduction de la taille de l'image ».
Dans cette comparaison, nous avons utilisé les résultats obtenus auprès des services favicon.cc et favicon-generator.org. Pour être honnête, jusqu'à récemment, nous utilisions nous-mêmes le service favicon.cc, mais récemment, un excellent substitut a été trouvé - le générateur de favicon n°1.
Comme favicon.cc, ce générateur de favicon possède son propre éditeur d'icônes en ligne intégré, mais son avantage réside dans son excellent travail en matière de transparence.
Il est bien évident qu'il existe une différence dans la qualité de la transparence (apparemment, la différence réside dans la qualité du changement de taille de l'image chargée).
De plus, xiconeditor.com présente un autre avantage : un excellent système de prévisualisation des favicon, qui vous permet de visualiser le résultat sous différentes formes sans télécharger le favicon généré. Leur aperçu est beaucoup plus informatif que favicon.cc.
Qu'est-ce qu'une favicon ?
Pour ceux qui ne savent pas ce qu’est un favicon, nous allons vous donner quelques informations qui vous aideront à vous mettre au courant. Un favicon est une petite icône mesurant 16x16 ou 32x32 pixels, contenant généralement un logo, la première lettre d'une marque ou une image caractéristique qui reflète le type d'activité ou le thème du site.
Pourquoi une favicon est-elle importante ?
Le favicon remplit les fonctions suivantes :
L'image de marque.
Identification du site par l'utilisateur (facilité d'utilisation).
Donne au site un aspect professionnel.
Examinons de plus près les principaux avantages de l'utilisation des favicons.
Reconnaissance de la marque
Favicon est comme une petite identité de site. Comme mentionné dans la partie introductive, un favicon aide l'utilisateur à se souvenir de votre site parmi les nombreux sites qu'il a consultés. Qu'il s'agisse de votre historique de navigation, des résultats de recherche Google ou de la liste des sites favoris de votre navigateur, les favicons aident les utilisateurs à reconnaître et à accéder facilement à votre site.
Confiance
Les utilisateurs ont tendance à juger les vendeurs de biens et de services en ligne en fonction du professionnalisme de leur site Web. Une négligence sous la forme d'un manque de favicon (les moteurs de recherche affichent un site sans favicon comme l'icône d'un document vierge) peut facilement conduire à une perte de confiance, 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. Supposons maintenant qu'un visiteur de votre site soit pressé lors de sa première visite et décide de le mettre dans ses favoris afin de pouvoir y revenir plus tard. Disons que cette personne décide par la suite de visiter à nouveau votre site et se tourne vers ses favoris. Vous avez de la chance si vous disposez d'un favicon reconnaissable, comme le G important et unique de Google, et les utilisateurs vous trouveront. Si vous n'avez pas de favicon, vous pourriez même être supprimé de votre liste de favoris.
Gain de temps pour l'utilisateur
Les favicons permettent à l'utilisateur de gagner du temps passé à identifier un site dans les favoris, l'historique ou à d'autres endroits où le navigateur place une favicon pour une identification rapide. Cela facilite simplement la vie du visiteur moyen de votre site.
Avantages du référencement
Si votre site dispose d’un favicon, vous serez plus visible dans les résultats de recherche que les sites qui n’en ont pas, et pourrez donc attirer plus de visiteurs.
Comment créer une favicon ?
Il existe de nombreux outils qui vous permettent de créer une favicon en quelques minutes. Si vous n'avez pas de compétences en conception ou si vous ne savez pas comment le 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 une 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 plusieurs dizaines de favicons magnifiques et prêts à l'emploi. Choisissez votre design préféré. L'aperçu vous permettra de voir à quoi ressemblera votre favicon sur le site.
Si vous devez modifier le favicon, vous pouvez le faire en modifiant le logo, tout comme les favicons sont créés sur la base du design du logo. Ainsi, si vous souhaitez, par exemple, une couleur de favicon différente, vous devez revenir à la page du logo, changer sa couleur, puis créer à nouveau le favicon.
Vous pouvez trouver de l'inspiration pour les favicons sur les sites suivants :
Étape 7. Téléchargez le favicon
Vous pouvez acheter le favicon séparément pour 9,99 $ ou acheter un pack de conception comprenant non seulement le favicon, mais également un logo, une carte de visite, une enveloppe et du papier à en-tête. Vous pouvez découvrir comment acheter un Design Pack.
Après le paiement, vous pouvez télécharger le favicon aux formats ico et png.
Où puis-je utiliser une favicon ?
Vous pouvez utiliser une favicon :
Sur le site;
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 une favicon sur un site internet ?
Une fois que vous avez reçu le favicon, son installation sur le serveur ne prendra pas plus de quelques minutes et se déroule en deux étapes. Pour ce faire, vous aurez besoin d'accéder au répertoire racine de votre site et d'un éditeur de texte pour modifier le code 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. Entrez 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 un 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 - Notepad, Notepad++, Sublime Text.
Si votre site contient du HTML pur, collez le code spécial dans la zone HEAD du fichier index.html.
Le code peut être copié sur la page favicon du site Web de Logaster.
Si vous utilisez WordPress, collez le code ci-dessous dans la zone HEAD de votre fichier header.php.
Une fois que vous avez fait cela, téléchargez le fichier là où vous l'avez obtenu. Prêt! Rechargez la page de votre site pour voir le favicon.
La plupart des navigateurs modernes sont suffisamment intelligents pour trouver le fichier favicon même sans un tel code, mais uniquement si le favicon a une image de 16 x 16 pixels, le nom favicon.ico, et est enregistré dans le répertoire racine de votre site.
Nous espérons que cet article vous a fourni des informations utiles pour vous aider à créer un favicon qui rendra votre site Web plus performant et plus attrayant.
Favicon – le terme se traduit littéralement par « icône préférée » – est considéré comme l'un des éléments les plus complexes de la conception Web moderne. Il s'agit d'une petite image qui se trouve dans l'onglet du navigateur, dans la barre de recherche et à d'autres endroits, et qui joue un rôle important dans la personnalisation du site.
En raison de son format non standard et de sa petite taille, créer un favicon peut s'avérer difficile, tant d'un point de vue technique que de conception.
Une tâche tout aussi difficile consiste à assurer la compatibilité des favicon avec différents navigateurs.
Dans cet article, vous apprendrez comment créer un favicon - nous vous donnerons des conseils de conception et vous parlerons des services de création d'un favicon et de la façon d'ajouter un favicon au site.
Malgré le fait qu'un favicon soit un très petit objet graphique, il est extrêmement important dans la conception de sites Web et en général.
Cliquez pour agrandir l'image.
Premièrement, Un favicon rend votre site plus personnalisé et cohérent avec d'autres éléments graphiques, comme un logo.
Deuxièmement , une favicon distingue votre site des autres ressources Web dans la liste des résultats de recherche. Un site sans cette mini-icône semblera terne et perdra face à ses concurrents. En un mot, un favicon est tout simplement un « must have » pour les sites Web.
Troisième , un favicon permet à l'utilisateur de retrouver rapidement votre site dans le répertoire des favoris ou autres icônes du bureau.
Le favicon doit refléter l’essence et la marque dans un petit signe de la taille d’un visage souriant. Une version simplifiée du logo de l'entreprise serait une bonne solution, mais gardez à l'esprit : un logo à part entière avec du texte et des marques ne convient pas à cet effet.
Ces sites Web utilisent un graphique de leur marque (ou du moins quelque chose de similaire).
N'utilisez pas de texte
Vous devez éviter d'utiliser du texte, car en raison de la petite taille du favicon, les inscriptions seront 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.
Pixelisation des favicon
Les favicons sont si petits que chaque pixel compte. Souvent, lorsque vous réduisez la taille d’un logo, l’image apparaît floue.
Il s'agit d'un fragment du logo Facebook en taille réelle après sa réduction à la taille 32x32. Il est facile de remarquer que l’image « flotte » sur les bords. Pour éviter un tel défaut, l'édition doit être effectuée au niveau du pixel.
Lorsque je travaille avec des icônes, je préfère utiliser des programmes d'édition d'images raster (tels que Photoshop ou Pixelmator). Tout d’abord, je réduis le logo en taille réelle à 64 x 64 pixels, car c’est le plus grand favicon dont j’aurai besoin. Le travail est très minutieux, cela peut prendre une heure entière, 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
Ayant reçu une icône 64x64, je crée de la même manière des icônes de 32x32, 24x24 et 16x16 pixels. 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 s'arrête pas là : des modifications supplémentaires sont souvent nécessaires au niveau des pixels. Vous pouvez également ajouter un canal alpha si bon vous semble. Si cela posait auparavant des difficultés, presque tous les navigateurs prennent désormais en charge la transparence dans les favicons.
Auparavant, lorsque seuls les fichiers Windows ICO étaient pris en charge, nous pouvions gagner du temps en enregistrant le favicon 16x16 au format GIF et en lui attribuant l'extension .ico. Cette technique a parfaitement fonctionné ! Mais désormais, cette méthode n'est plus nécessaire car les outils permettant de créer des fichiers ICO peuvent être facilement trouvés sur Internet. De plus, et sont désormais utilisés pour les favicons, mais les plus courants ne sont encore que les deux suivants.
OIC
Le palmier appartient au format ICO. Contrairement aux fichiers PNG, les fichiers ICO peuvent être disponibles dans 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 barre des tâches de 32 pixels dans 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 un canal alpha et vous permet de créer de très petits fichiers. Le seul inconvénient du format PNG est peut-être qu'il n'est pas pris en charge dans le navigateur Internet Explorer.
Il existe d'autres options :
– Les formats GIF et GIF animés n’ont pas d’avantages autres que la compatibilité avec les très anciens navigateurs.
– Le format JPG n’est pas recommandé, même si l’image se présente sous forme de photographie. Ce format n'a pas la netteté du PNG et son seul avantage réside dans des transitions plus douces entre les couleurs - une nuance totalement imperceptible dans une très petite image.
– SVG pourrait être une excellente option si davantage de navigateurs prenaient en charge les favicons dans ce format. Pour l'instant, il n'y a qu'une compatibilité avec Opera.
– Il existe également un « sous-format » de PNG – 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.
Nous avons sélectionné pour vous les services les plus utiles qui vous aideront à créer un favicon en ligne.
Logotizer est un nouveau service simple et pratique permettant de créer un favicon et un logo pour votre site Web.
Avec ce créateur en ligne, vous pouvez créer un favicon à partir de zéro. Le service s'adresse aux débutants, il ne sera donc pas difficile de développer un bon design.
Comment créer un favicon à l'aide du générateur en ligne Logotizer
La zone de travail principale se trouve à gauche. Sur la droite, vous pouvez voir à quoi ressemblera le favicon sur différents supports : un onglet de navigateur, la barre des tâches d'un ordinateur ou l'écran d'un smartphone. Très pratique et clair.
Tout d’abord, vous devez choisir une forme pour le favicon. Il y en a beaucoup, plus de 50. Nous vous conseillons de choisir des formes simples et simples pour rendre le favicon facile à percevoir et à mémoriser.
A ce stade, vous déterminez également la couleur du formulaire, qui sert d'arrière-plan au favicon, et sélectionnez un cadre. Regardez quelle couleur domine votre logo (si vous en avez un) et quelles sont les couleurs principales de votre site Web. C'est dans cette plage que nous 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 beaucoup, c'est dommage que vous ne puissiez pas télécharger vos propres options ; mais le choix reste quand même assez intéressant.
Changez la couleur, la taille, l'emplacement des figurines ! En un mot, expérimentez, heureusement, le service vous permet de le faire.
Une fois la forme sélectionnée, vous pouvez ajouter votre 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 et l’emplacement du texte.
Si vous décidez qu'une couche de favicon vous dérange temporairement ou n'est pas du tout nécessaire, vous pouvez simplement la masquer.
Après avoir créé une favicon, le service proposera de la sauvegarder. Créez un compte (en 2017, il n'y a aucun moyen sans inscription), et vous pourrez ensuite télécharger des fichiers pour une somme modique - 199 roubles.
Le site contient également de petites instructions sur la façon d'ajouter une favicon au site, vous ne devriez donc avoir aucun problème à ajouter une favicon au site. Des recommandations similaires sont également fournies ci-dessous dans cet article.
Après paiement, l'utilisateur reçoit immédiatement 10 favicons de différentes tailles pour tous les appareils dont il a besoin aujourd'hui (icône tactile Apple, icônes d'application Microsoft et autres).
Le fichier favicon.ico lui-même est multi-tailles et contient des icônes de 4 tailles dans 1 fichier (16px, 24px, 32px, 64px). Ainsi, si vous ajoutez un site aux favoris de votre navigateur ou ouvrez votre 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 superflu.
est un générateur de favicon plus simple qui vous permet de créer des favicons pour n'importe quelle plateforme. De plus, vous pouvez tester le favicon sur la ressource. Entrez l'URL de votre site et vous verrez à quoi ressemble votre favicon sur chaque navigateur et système d'exploitation. Real Favicon Generator vous indiquera également comment corriger les défauts et rendre votre favicon encore meilleur.
Favicon.par est un autre générateur de favicon 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 obtenu sur votre site Web, 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. C'est à quel point je suis tordu :)
Vous pouvez ajouter un favicon à votre site en apportant plusieurs modifications au 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. Ceux-ci 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 appelé « public_html » ou « www ».
Étape 2 : Ajoutez une favicon au HTML.
En gardant la fenêtre du serveur FTP ouverte, téléchargez le fichier « index.html » ou « header.php ».
Ensuite, vous devez télécharger le code. Le code que vous téléchargez dépend de votre site Web.
Si votre site est HTML, recherchez la zone HEAD dans le fichier index.html et collez le code suivant :
Si votre site est sur WordPress, recherchez la zone HEAD dans le fichier header.php et collez le code suivant :
/favicon.ico" />
Grâce à ces codes, les navigateurs pourront trouver vos favicons.
Voilà, vous avez installé votre favicon !
Si votre ressource est basée sur WordPress ou un autre CMS, alors ajouter un favicon au site est très simple. En général, l'algorithme d'ajout d'un favicon pour différentes plateformes sera le même.
1. Vous devez accéder à la console du site.
2. Recherchez la section « Conception » 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.
Cet article explique des moyens simples et rapides de créer des favicons compatibles avec presque tous les navigateurs et systèmes d'exploitation. Mais lorsqu’il s’agit de conception et de développement Web, il n’y a aucune limite. 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 et bien plus encore, je vous recommande de consulter ces documents : aide-mémoire pour les 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 dynamiques avec des chiffres.
Vous aurez peut-être également besoin d'une favicon dynamique, comportant une icône avec un numéro changeant. Pour créer de tels favicons, je recommande d'utiliser le service favico.js, disponible sur Github. Les favicons dynamiques ne sont pas encore compatibles avec tous les navigateurs. Mais pour les navigateurs qui les prennent en charge, ces icônes peuvent constituer un ajout intéressant et utile.
Si vous souhaitez ajouter une autre astuce à cet article ou si vous avez une question, veuillez laisser un commentaire ci-dessous !
Structure: Un favicon est une petite icône utilisée pour identifier visuellement votre site dans les favoris, et c'est également ce que vous voyez à côté du nom de votre site ou de votre page dans les onglets du navigateur. Généralement, un favicon est un carré de 16 x 16 pixels au format favicon.ico. Dans cet article, nous expliquerons de quelle « base » vous avez besoin pour commencer, vous aiderons à créer un favicon à l'aide d'éditeurs graphiques et parlerons des moyens d'ajouter un favicon à votre site. De quoi avez-vous besoin pour commencer ?
Favicon - (de l'anglais FAVorites ICON, traduit par « icône des favoris ») - une icône de site Web de taille 16x16px ou 32x32px, qui est affichée par le navigateur dans la barre d'adresse ou à côté d'un signet enregistré. Traditionnellement, le nom et l'extension de l'icône sont favicon.ico.
Notre service est capable de convertir l'image de votre choix (jusqu'à 175 Ko) en une icône pour l'icône du site (taille 16x16px ou 32x32px). Après génération, il vous suffit de télécharger favicon.ico dans le répertoire d'hébergement du site souhaité.
L'absence d'icône est une erreur technique d'optimisation d'une ressource ; elle réduit la notoriété de la marque, réduit le CTR des extraits de recherche, aggrave la recherche d'une ressource Web à l'aide des favoris du navigateur, etc.
Yandex dispose d'un robot spécial qui indexe individuellement le favicon de tous les sites. La fréquence d'ajout de nouvelles icônes à la recherche varie d'environ deux semaines à un mois.
Pour afficher le favicon.ico que vous avez créé en tant qu'icône de site, vous devez le télécharger dans le répertoire racine du site (ou dans n'importe quel répertoire) et spécifier le chemin absolu ou relatif vers celui-ci dans le code du modèle de site (), exemple de code :
Lorsque vous utilisez une icône de site sur l'ensemble du site, si favicon.ico se trouve dans le dossier racine, vous n'avez pas besoin de spécifier le chemin d'accès - les navigateurs le trouveront eux-mêmes et l'afficheront sous forme d'icône de site. Les ressources volumineuses ou uniques utilisent différentes icônes de site pour chacune de leurs catégories. Pour ce faire, les chemins vers les différents favicon.ico sont précisés dans les modèles correspondants.
Articles Liés: | |
Comment supprimer les virus de votre ordinateur si l'antivirus ne les voit pas
Le problème de la sécurité des appareils mobiles est l’un des plus urgents... Comment choisir un nom d'utilisateur sur Twitter Nom Twitter pour les filles en anglais
Après votre inscription, il vous sera demandé de sélectionner plusieurs personnes écrivant... Présentation sur le thème "Éditeur graphique Paint"
Cette leçon est préparée pour ceux qui veulent se familiariser avec le travail de graphiste... |