Création d'une favicon. Comment ajouter une favicon sur WordPress et d'autres plateformes. Fonctionnalités WordPress intégrées

Une nouvelle leçon de style atelier et cette fois on apprend les secrets du favicon. Icône de favori - une petite icône qui apparaît dans les favoris et la barre du navigateur. Si vous avez votre propre site Web et que vous souhaitez vous démarquer des autres même dans de petites choses - icône de favori nécessaire. Bien sûr, il semble le plus avantageux parmi les signets, sur fond d'une liste d'adresses fanée sans aucune identification graphique. Cependant, notre leçon ne porte pas tant sur la façon d'attacher un favicon à la barre du navigateur, mais sur la façon de dessiner votre propre favicon dans Photoshop.

Dans quel format dois-je enregistrer le favicon ?

Tout dépend du navigateur. Pour Explorateur Microsoft format d'icône approprié OIC. Nous avons déjà rencontré ce format lors de la création du curseur. Pour les autres navigateurs de Google Chromeà Safari aux pommes régulier fera l'affaire GIF ou PNG. Icône de favori peut être translucide. Pour ce faire, vous devez l'enregistrer dans un format translucide PNG, puis convertissez-le au format OIC. Cela peut être fait dans un bon programme IcoFX. Cependant, il existe de nombreux sites tiers permettant de générer des favicons, et le plus évident d'entre eux est www.favicon.ru.

Comment placer une favicon sur un site internet ?

Comment être sûr que icône de favori est-ce que ça marchera ? 4 conditions doivent être remplies.

• Le fichier doit être appelé - icône de favori.
• Taille du favicon 16 sur 16px
• L'emplacement optimal pour un favicon est le dossier racine du site.
• Écrivez l'adresse de l'icône dans les balises méta heder dans l'index du site.

Dans une expression HTML, cela ressemble à ceci :

Vous pouvez créer plusieurs icônes pour différents navigateurs, par exemple une au format OIC, et l'autre dans PNG et indiquez tout cela à travers le tag lien . Les navigateurs modernes recherchent le plus souvent un fichier à la racine du site appelé icône de favori, cependant, bien sûr, cela ne fait pas de mal d’indiquer les liens exacts.

Créer une favicon dans Photoshop

Créer icône de favori très simple. Voulez-vous en faire un comme celui-ci ? icône de favori comme VKontakte ou Odnoklassniki ? Bien icône de favori Cela ne peut pas être fait en réduisant les grandes images dans toutes sortes de « générateurs » de favicon, qui en regorgent sur Internet. Le favicon est très petit. En fait, nous sommes un peu pixel art, qui a ses propres caractéristiques. Vous ne pouvez pas écrire une lettre et la réduire à 16px .

Comme icône de favori sera flou et peu clair, car les bords de la lettre se chevaucheront de plusieurs pixels lors du redimensionnement. Cela se révélera en quelque sorte anti-alias, ce qui est généralement une bonne chose, mais dans le cas du pixel art, de telles transitions ne sont tout simplement pas nécessaires. Il faudra en revanche éviter de trop « déchirer » sur la rondeur, sinon vous vous retrouverez avec des gifs bonjour 1999.

Créer un fichier de taille 16 X 16px . Nous allons créer un translucide très simple icône de favori s sous forme de lettre, avec un peu de profondeur. La profondeur sera créée par l'ombre et le dégradé.

Dessiner l'arrière-plan

Pourquoi dans l'intro de cette leçon voyez-vous un énorme lisse et léché icône de favori? Parce que je l'ai agrandi pour l'intro de la leçon. Comment ai-je réussi à agrandir qualitativement l’image ? 16px? Très simplement, je travaille toujours en vectoriel si c'est possible de l'utiliser et si cela a du sens. Et le vecteur supporte facilement toute transformation et ne perd pas en qualité.

Sélectionnez un outil Outil Rectangle Arrondi. Dans le panneau des paramètres, sélectionnez le mode qui vous permettra de dessiner en vecteur. Dans le menu déroulant du panneau, il y a une coche - Accrocher aux pixels. Ceci est nécessaire pour que les chemins vectoriels soient alignés sur les pixels et ne soient pas dessinés « entre » eux.

Nous avons une surface icône de favori, et les bords translucides créeront une rondeur douce. Il est maintenant temps de se débarrasser du fond blanc, ce n'est pas nécessaire. Désactivez sa visibilité. Ou double-cliquez sur le calque pour le transformer en calque normal, puis supprimez-le.

Dans la leçon d'aujourd'hui, je vais vous parler Icônes de favoris (icône de favori). je vais te montrer comment créer favicon.ico pour un site Web(ou pour un blog, peu importe) et je vais vous montrer comment c'est possible insérer une favicon.

Sûrement, beaucoup ne savent toujours pas de quel « miracle » je parle. En termes simples, une Favicon est une image (icône) qui apparaît dans le navigateur avant l'adresse du site. Je vais vous montrer le Favicon de mon blog :

Cette icône est une sorte de logo pour votre blog. Par conséquent, la création d’un favicon doit être prise en toute responsabilité. N'oubliez pas que cela peut permettre à votre blog de se démarquer des autres.

Plan de cours:

1. Créer un Favicon à partir de zéro.
2. Création d'un favicon à partir d'une image finie.
3. Services avec des icônes prêtes à l'emploi pour le site.
4. Attacher l'icône résultante au site.

Comment créer un Favicon à partir de zéro

Il existe un service très pratique. Il a l’adresse favicon.cc. Ce service de création de favicon ressemble à ceci :

À dessiner une icône de favori Tout ce que vous avez à faire est de choisir une couleur et de peindre. Si vous avez dessiné quelque chose, quelque part mal, pour supprimer un fragment du dessin, sélectionnez l'outil transparent (cochez la case) et « piquez » sur les pixels (« carrés ») qui doivent être supprimés :

J'ai dessiné le favicon suivant :

Ce que j'ai le plus apprécié chez favicon.cc, c'est que vous pouvez voir instantanément le résultat de votre travail dans sa taille originale. Pour cela, il faut descendre un peu dans la section Previw :

Ou vous pouvez voir le résultat du travail directement dans votre navigateur (Opera, Firefox, Internet Explorer, etc.) :

Créer un favicon à partir d'une image finie

Disons que vous ne souhaitez pas créer une icône pour votre site Web à partir de zéro, mais que vous souhaitez la créer à partir d'une image prête à l'emploi. Dans ce cas, le service de création d'un favicon favicon.ru vous conviendra.

Le service est en russe, vous ne devriez donc pas avoir de problèmes. Indiquez simplement l'image que vous souhaitez voir comme icône de votre site (le bouton « Parcourir »), puis cliquez sur « Créer un favicon.ico", et puis " Télécharger favicon.ico”.

Le Favicon fait partie intégrante des sites Web modernes, qui vous permet d'identifier rapidement une ressource particulière dans la liste des onglets du navigateur. Il est également difficile d’imaginer un programme informatique sans sa propre étiquette. Dans le même temps, les sites et les logiciels dans ce cas sont unis par un détail pas tout à fait évident : tous deux utilisent des icônes au format ICO.

Ces petites images peuvent être créées à l'aide de programmes spéciaux ou de services en ligne. À propos, ce sont ces dernières qui sont beaucoup plus populaires à ces fins, et nous examinerons un certain nombre de ces ressources dans cet article.

Travailler avec des graphiques n'est pas la catégorie de services Web la plus populaire, mais lorsqu'il s'agit de générer des icônes, il y a certainement beaucoup de choix. Sur la base du principe de fonctionnement, ces ressources peuvent être divisées en celles dans lesquelles vous dessinez vous-même l'image et en sites qui vous permettent de convertir une image prête à l'emploi en ICO. Mais fondamentalement, tous les générateurs d’icônes proposent les deux.

Méthode 1 : éditeur X-Icon

Ce service est la solution la plus fonctionnelle pour créer des images ICO. L'application Web vous permet de dessiner l'icône en détail manuellement ou d'utiliser une image prête à l'emploi. Le principal avantage de l'outil est la possibilité d'exporter des images avec une résolution allant jusqu'à 64x64.

Ainsi, si vous avez besoin de créer tout un ensemble d’icônes identiques de différentes tailles, vous ne trouverez rien de mieux que X-Icon Editor à ces fins.

Méthode 2 : Favicon.ru

Si vous devez générer une icône favicon avec une résolution de 16x16 pour un site Web, le service en ligne en russe Favicon.ru peut également constituer un excellent outil. Comme avec la solution précédente, vous pouvez ici soit dessiner vous-même une icône, en colorant chaque pixel séparément, soit créer un favicon à partir d'une image finie.

En conséquence, un fichier avec l'extension ICO est enregistré sur votre PC, qui est une image de 16 x 16 pixels. Le service est parfait pour ceux qui ont seulement besoin de convertir une image en une petite icône. Cependant, montrer votre imagination sur Favicon.ru n'est pas du tout interdit.

Méthode 3 : Favicon.cc

Semblable au précédent tant par le nom que par le principe de fonctionnement, mais un générateur d'icônes encore plus avancé. En plus de créer des images 16x16 régulières, le service vous permet de dessiner facilement un favicon.ico animé pour votre site Web. De plus, la ressource contient des milliers d'icônes personnalisées disponibles en téléchargement gratuit.

Si l'interface en anglais ne vous dérange pas, alors il n'y a absolument aucun argument en faveur de travailler avec le service précédent. En plus du fait que Favicon.cc peut générer des icônes animées, la ressource reconnaît également correctement la transparence des images importées, ce qui manque malheureusement à son homologue en langue russe.

Méthode 4 : Favicon.by

Une autre option pour un générateur de favicon pour les sites Web. Il est possible de créer une icône à partir de zéro ou à partir d'une image spécifique. Parmi les différences, on peut souligner la fonction d'importation d'images à partir de ressources Web tierces et une interface plutôt élégante et laconique.

En général, il n'y a aucune différence dans le travail avec les services déjà évoqués dans cet article, cependant, la ressource Favicon.by gère bien mieux la conversion d'images en ICO, et cela est assez facile à remarquer.

Méthode 5 : Conversion en ligne

Il est probable que vous connaissiez déjà ce site en tant que convertisseur de fichiers en ligne pratiquement omnivore. Mais tout le monde ne sait pas qu’il s’agit de l’un des meilleurs outils pour convertir n’importe quelle image en ICO. En conséquence, vous pouvez obtenir des icônes avec une résolution allant jusqu'à 256x256 pixels.

Comme vous pouvez le constater, créer une icône ICO à l'aide du site Web Online-Convert n'est pas du tout difficile et peut être réalisé en quelques clics de souris.

Salut tout le monde!

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 un cas particulier.

Mais avant cela, nous parlerons de la façon dont ce favicon peut être dessiné. Ensuite, nous déterminerons quelle doit être la taille du logo et, à la fin, je vous expliquerai comment insérer l'icône créée sur le site.

Favicon est une icône de site Web mesurant 16 x 16 (ou 32 x 32, mais pas plus). Il apparaît dans l'onglet du navigateur. Cela ressemble à ceci :

L'icône est également affichée dans les résultats de recherche, et si votre site ne dispose pas de 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 petit détail.

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 utilisateurs d'un moteur de recherche peuvent ne pas faire confiance à un site sans icône, mais également à certains algorithmes de recherche. Les robots constatent de telles lacunes techniques et réduisent le plus souvent la ressource dans les résultats de recherche. Un triste phénomène qui peut affecter toute la promotion SEO.

Résumons :

• Favicon influence les facteurs comportementaux et les taux de clics dans les résultats de recherche.
• Les robots de recherche peuvent également prendre en compte la présence ou l'absence d'un favicon.
• Un tel défaut technique peut entraîner une baisse du trafic.

En d'autres termes, si vous avez une question : ajoutez ou non une favicon, alors la réponse est évidente : assurez-vous de l'ajouter.

Voyons maintenant comment dessiner cette même icône. Cela peut être fait à l'aide de divers services et éditeurs en ligne.

Où télécharger la version finale

Ce n'est pas le meilleur choix, mais quelqu'un l'utilise. Vous pouvez télécharger un favicon prêt à l'emploi sur Internet sans trop vous soucier de créer le vôtre. Tous sont présentés dans des formats pratiques et dans les bonnes tailles.

Entrez simplement la requête souhaitée 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 différentes vous seront présentées.

Nous téléchargeons l'image sur notre PC, puis l'installons sur le site Web. C'est simple. Ils sont disponibles absolument gratuitement, personne ne vous grondera. Bien que si nous parlons d’une entreprise, même petite, si le logo de quelqu’un d’autre est découvert, des incidents désagréables peuvent survenir.

Vous pouvez rechercher des options prêtes à l'emploi sur différents sites Web. En règle générale, il existe des collections entières de logos thématiques variés qui peuvent plaire à certains webmasters.

Mais je répète encore une fois qu'il vaudrait mieux créer soi-même un favicon.

Créer une favicon

Services en ligne

Vous pouvez dessiner une favicon dans les services en ligne. Il vous suffit de saisir la requête correspondante dans le moteur de recherche, après quoi votre attention se verra présenter 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, de l'interaction avec une équipe et d'autres aspects utiles dont vous aurez certainement besoin lors du développement de votre entreprise.

», je parlerai de divers services en ligne avec lesquels vous pouvez créer une image unique ou générer un favicon à partir d'une image prête à l'emploi.

Et bien sûr, comme toujours, je décrirai en détail le processus, qui en principe n'est pas compliqué. installer un favicon sur le site.

Qu'est-ce qu'une favicon et pourquoi est-elle nécessaire ? favicon en anglais s'écrit Favicon et se traduit littéralement par « Icône préférée », mais Wikopedia donne une autre traduction - « Icône des favoris ». Un favicon peut être comparé à un logo, réduit plusieurs fois et possédant une extension .icône.

Le favicon est affiché avant l'URL du site dans la barre d'adresse de n'importe quel navigateur, ainsi que dans la barre de favoris et dans les résultats de recherche à côté des titres.

Il est impératif d'installer un favicon sur le site, car cela contribue à accroître la reconnaissance et donne une certaine respectabilité au projet, ce qui affectera certainement la confiance des utilisateurs.

Les favicons se présentent sous la forme d'une image régulière ou animée, ainsi que sous la forme d'une image 3D, ceci est déjà réalisé avec Photoshop.

Favicons sous la forme d'une image régulière

Je tiens à dire tout de suite qu'il est conseillé d'utiliser une image unique avec des proportions égales pour créer un favicon, et toutes les images ne conviennent pas aux favicons, car réduire leur taille à 16x16 ou 32x32 pixels rend illisibles les petits éléments de l'image.

Regardons cet exemple. Je souhaite donc créer un site internet sur le sujet - "Tourisme et voyages", alors quel type d'image puis-je choisir pour le favicon. Je serai guidé par deux règles que je connais déjà.

Règle n°1.

L'image ne doit comporter qu'un seul grand élément avec des limites claires de l'image.

Règle n°2.

L'image doit être carrée et ne pas peser plus de 150 Ko.

Après une courte recherche, j'ai trouvé une photo apparemment appropriée d'une montgolfière qui respecte les règles ci-dessus :

Je dois maintenant le convertir au format .icon et le réduire à 32x32 pixels.

Il existe des serveurs spéciaux pour convertir des images en favicons, et j'en utiliserai un - tools.dynamicdrive.com.

Sélectionnez simplement une image et téléchargez-la sur le serveur, puis sélectionnez le format et appuyez sur le bouton - "Grande icône":

Et après traitement, nous obtenons deux images 32x32 et 16x16. Une image est une icône pour le bureau et la seconde pour la barre d'adresse, les signets et les moteurs de recherche.

Si sur une photo 32x32 on distingue encore la silhouette d'un ballon, alors sur une photo 16x16 il est difficile de comprendre s'il s'agit d'une sorte d'oignon ou d'une poire inversée :)

Il en découle. qu'il y a une exigence supplémentaire pour l'image du favicon.

Règle n°3..

L’objet sur l’image devrait être de petite taille dans le monde réel. Les images d'avions, de navires, de ballons, etc. ne conviennent pas aux favicons.

Alors je me suis laissé tomber un peu au sol et j'ai trouvé une autre image. Essayons :

Super, voyons ce qui se passe après le traitement :

Eh bien, c'est une tout autre affaire. Téléchargez le favicon sur votre ordinateur en cliquant sur - "Télécharger FavIcon".

Pour ceux qui souhaitent créer un favicon pour un site Web à partir de leur propre photo, vous devez savoir : pour obtenir au moins un visage humain reconnaissable, l'image doit mesurer au moins 48 x 48 pixels.

Comment créer un favicon animé

Les favicons animés sont tout simplement géniaux ! Malheureusement, tous les navigateurs ne prennent pas en charge les animations dans la barre d'adresse et les favoris, mais ils attirent néanmoins certainement l'attention de l'utilisateur et contribuent ainsi à au moins une légère augmentation du trafic. Il existe un bon service en ligne pour créer des favicons animés. Le service est bourgeois, mais la page peut être traduite en russe à l'aide des fonctions du navigateur et elle s'avérera assez lisible :

On ne fait pas du tout attention au panneau de gauche ; en principe, le service est déjà prêt à l'emploi et il ne reste plus qu'à choisir la ou les couleurs du futur design. Par exemple, je vais dessiner un panoramique :) A l'aide du bouton gauche de la souris maintenu enfoncé, on se déplace sur les carrés et ils sont peints de la couleur souhaitée, et s'il faut effacer l'excédent, alors cliquez sur le carré avec le droit bouton de la souris. A titre d'exemple, je vais vous montrer une animation simple composée de seulement 2 images. Première image :

Une fois le dessin prêt, cliquez sur - "Utiliser l'animation" et un panneau avec les fonctions suivantes apparaîtra :

Choisir - "Ajout de nouveaux cadres" et déjà sur un champ ouvert on dessine deuxième partie animations :

Ci-dessous, vous pouvez regarder le résultat et télécharger le fichier terminé :

A quoi ressemble mon « chef-d’œuvre » ? 🙂

Bien sûr, c'est l'exemple d'animation le plus simple, et il existe des favicons animés composés de 6 épisodes, mais ce sont déjà des sortes de « dessins animés ».

Comment créer un favicon dans Photoshop

Vous n'avez probablement pas le format dans Photoshop. icône, mais ce n'est pas grave, nous allons résoudre ce problème maintenant. Téléchargez l'archive du plugin ICOFormat pour Adobe Photoshop et décompressez-la dans un dossier - C:\Program Files\Adobe\Adobe Photoshop\Plug-ins\File Formats. Lancez Photoshop, chargez n'importe quelle image et essayez de l'enregistrer au format .icon

Quiconque sait utiliser Photoshop n'aura aucune difficulté à dessiner ou à créer un magnifique favicon pour son site Web à partir d'une image finie.

Comment installer une favicon sur un site Web

L’installation d’un favicon ne prend que quelques minutes et il n’y a même pas grand-chose à décrire. Cela signifie que nous avons déjà un fichier mesurant 32x32 pixels et qu'il nous suffit de le télécharger à la racine du site à l'aide d'un client FTP, où se trouvent les dossiers wp-admin, wp-content et wp-includes. À propos, il n'est pas du tout nécessaire de placer le fichier à la racine du blog, vous pouvez le télécharger ailleurs, mais vous devez ensuite spécifier correctement le chemin d'accès dans le fichier header.php.

Si on a quand même placé un fichier avec un favicon à la racine du site, alors dans le fichier header.php avant la balise de fermeture vous devez saisir ce qui suit :

C'est essentiellement tout favicon sur le site installé!

Services de favicon prêts à l'emploi

Ceux qui sont trop paresseux pour se déranger ont la possibilité de sélectionner et de télécharger un favicon prêt à l'emploi à partir des services suivants :

À bientôt!

Sincèrement, Vitali Kirillov