Статьи

Comment créer un favicon pour le site: astuces et services utiles

  1. Comment créer un favicon
  2. Comment faire un favicon dans Photoshop
  3. Comment sauvegarder un favicon
  4. Comment insérer un site favicon
  5. Comment remplacer favicon
  6. Comment créer des favicons plus complexes

Il est difficile de deviner ce qu'est un favicon lorsque vous entendez ce mot pour la première fois. Il s’agit d’une icône miniature qui s’affiche sur les onglets des navigateurs, dans les lignes d’adresses et dans d’autres zones, en fonction du système d’exploitation utilisé et du navigateur Internet. On peut l'appeler en toute sécurité l'un des éléments les plus complexes et capricieux de la conception de sites Web.

Créer un bon favicon est assez difficile, car l'icône est petite, elle doit être claire et afficher quelque chose en rapport avec votre site
Créer un bon favicon est assez difficile, car l'icône est petite, elle doit être claire et afficher quelque chose en rapport avec votre site. La création d'un favicon compatible avec tous les navigateurs populaires peut également s'avérer une tâche ardue. Dans cet article, nous traiterons de tous les aspects complexes de sa création. Si vous avez également besoin d'un logo, alors nous avons un article comment le faire

Comment créer un favicon

Commençons par la conception du favicon. Un bon design, malgré sa compacité, doit refléter l'essence de votre site et faire partie intégrante de l'identité de l'entreprise. En règle générale, l'icône est un signe graphique (icône) d'une entreprise et non un logo entier (icône, texte et slogan).

En tant que favicon, ces sites Web utilisent leurs icônes (ou leurs images proches) En tant que favicon, ces sites Web utilisent leurs icônes (ou leurs images proches).

Le texte dans la favicon ne doit pas être utilisé, car ce texte sera illisible en raison de la petite taille de l'image. Les seules exceptions à cette règle sont les caractères de texte de renommée mondiale qui sont automatiquement associés à une marque spécifique. Par exemple, la ressource en ligne Wikipedia a laissé sur la favicon sa lettre majuscule «W» et Facebook - la lettre «F».

Sur ces favicons, il y a des lettres qui sont fortement associées à une marque particulière
Sur ces favicons, il y a des lettres qui sont fortement associées à une marque particulière. Par exemple, Facebook utilise son signe graphique. Notez également que les pixels sont visibles sur l'image Disney. En effet, la capture d'écran a été prise sur un écran Retina, compatible avec les icônes 16 × 16, alors que les sites Web utilisent 32 × 32 icônes.

Les favicons étant de petites images, chaque pixel joue un rôle important. Parfois, après la réduction du logo, des pixels individuels deviennent visibles, à la suite de quoi l'image devient «floue». Pour plus de clarté, vous devez éditer l’icône au niveau des pixels.

Pour éviter cela, vous devez redimensionner le logo à l'aide d'éditeurs spéciaux tels que Photoshop ou GIMP
Pour éviter cela, vous devez redimensionner le logo à l'aide d'éditeurs spéciaux tels que Photoshop ou GIMP. Vous devez d’abord réduire la taille de l’image à 64x64 pixels (il s’agit du favicon dont la taille est la plus grande). Ensuite, vous devez éditer chaque pixel à l'aide de l'outil Crayon jusqu'à ce que l'image soit nette. C'est un processus laborieux, mais le résultat en vaut la peine. Lorsque le favicon 64x64 est prêt, vous devez effectuer le même travail avec une image de 16 × 16, 24 × 24 et 32 ​​× 32 pixels. Autant de tailles dont vous avez besoin pour que l'image soit correctement affichée dans tous les navigateurs et gadgets:

  • 64x64 - Signets du navigateur Safari;
  • 32x32 - écrans haute résolution (Retina);
  • 24x24 - signets Internet Explorer et MicroSoft Edge;
  • 16x16 - Google Chrome et autres navigateurs.

Comment faire un favicon dans Photoshop

Vous devez d’abord créer quelques toiles ayant les dimensions ci-dessus.

Ensuite, vous devez ajouter une icône, une lettre ou une autre image à la toile
Ensuite, vous devez ajouter une icône, une lettre ou une autre image à la toile.

Ensuite, vous devez ajouter une icône, une lettre ou une autre image à la toile

Comment sauvegarder un favicon

Après avoir créé des icônes de différentes tailles, enregistrez-les sous forme de fichier PNG transparent (24 bits). Dans Photoshop, vous pouvez utiliser la fonction Enregistrer pour le Web disponible dans le menu Fichier. Ensuite, vous devez fusionner tous les fichiers PNG dans un fichier ICO. Vous pouvez utiliser à la fois des fichiers PNG et des fichiers ICO, mais souvent même Safari et Chrome préfèrent uniquement le format ICO. À mon avis, il est plus facile de créer un fichier ICO. Le format ICO n’est pas très courant, mais heureusement, il existe un certain nombre d’outils qui peuvent vous aider à convertir vos fichiers dans ce format. Pour cela, je préfère utiliser X-Icon Editor . Il s'agit d'un service en ligne gratuit qui convertit instantanément les images téléchargées en un seul fichier ICO, après quoi vous pouvez le télécharger. Ce n'est rien de compliqué, il suffit de suivre les instructions sur le site. Si vous vous considérez comme une personne désespérée, vous pouvez expérimenter avec l'éditeur de pixels de ce service et dessiner vous-même un favicon. (Bien que je préfère éditer des favicons dans un éditeur plus professionnel, par exemple dans Photoshop).

En téléchargeant vos images PNG dans X-Icon Editor, vous obtiendrez un fichier ICO à la sortie
En téléchargeant vos images PNG dans X-Icon Editor, vous obtiendrez un fichier ICO à la sortie.

Comment insérer un site favicon

Donc, vous avez déjà un fichier ICO. Maintenant, vous devez l'ajouter au site Web. Renommez le fichier en favicon.ico et placez-le dans le dossier racine de votre site Web (où sont stockés le fichier index.html et d'autres fichiers standard). Après l'ajout réussi, vous pouvez le voir sur votre site web .com / favicon.ico. Presque tous les navigateurs recherchent le fichier favicon.ico dans le dossier racine. Par conséquent, il est important que vous téléchargiez le favicon dans ce dossier. Pour assurer la compatibilité avec différents navigateurs, il est préférable de ne pas ajouter d’éléments HTML ni de liens indiquant son emplacement. Cette astuce fonctionne pour tous les navigateurs, jusqu'à IE6. De plus, si vous avez un site WordPress, vous pouvez ajouter un favicon dans les paramètres du thème dans de nombreux thèmes. Cette méthode peut également être utilisée.

Comment remplacer favicon

Pour une raison inexplicable, les navigateurs l'ajoutent au cache. Par conséquent, lorsque vous téléchargez un nouveau fichier ICO, le navigateur peut continuer à afficher votre ancien favicon. Que faire dans ce cas? Vous pouvez ajouter un fichier HTML temporaire indiquant l'emplacement de votre nouveau favicon. Également à la fin de l'URL, vous devez ajouter une chaîne de requête courte:

<link rel = "icône de raccourci" href = "votre site Web .com / favicon.ico? v = 2" />

Le navigateur pensera qu'il s'agit d'une URL unique et sera donc obligé d'afficher une nouvelle icône. Après avoir mis à jour le favicon, ce code HTML peut être complètement supprimé. Si vous devez modifier le favicon, utilisez la même technique, en augmentant chaque fois le nombre après le «v» dans la chaîne de requête. Ainsi, le navigateur percevra à chaque fois cette URL comme étant unique et affichera sa nouvelle version. Et n'oubliez pas de supprimer le code HTML après une mise à jour réussie.

Comment créer des favicons plus complexes

Dans cet article, je voulais décrire un moyen universel et facile de créer des favicons qui fonctionneront sur pratiquement toutes les plateformes. Mais dans la conception et le développement Web, il n'y a pas de limite à la perfection. Si vous souhaitez apprendre à créer des icônes plus complexes, vous pouvez utiliser le service. favico.js . Il vous permet de créer des images dynamiques avec des nombres variables. Grâce à cette icône, vous pouvez voir le nombre de messages non lus, même lorsque l'onglet correspondant n'est pas actif. Si vous souhaitez créer des favicons animés en ligne, vous pouvez utiliser un générateur de favicon. favicon.cc .

Plus de générateurs en ligne, vous pouvez trouver ici .

Si vous souhaitez partager vos conseils sur la création de favicons ou poser une question, je vous attends dans les commentaires!

Que faire dans ce cas?
Ico?
2011.11.19
Карта