How to make a favicon Comment faire un favicon

Posted on April 10, 2008 at 5:10 am Posté le 10 avril 2008 à 5h10

Looking for a way to create a FavIcon ? Vous cherchez un moyen de créer une FavIcon? If you browse the web regularly, you’ve probably noticed that a lot of sites have a small icon that appears in front of the website address in your browser or bookmarks. Si vous naviguez sur le Web régulièrement, vous avez probablement remarqué que beaucoup de sites ont une petite icône qui apparaît en face de l'adresse de site Web dans votre navigateur ou signets. Many websites use favicons (aka Favorite Icon) as a way to brand their website, so that when you see that icon, you automatically know which company or product it represents. De nombreux sites Web utilisent favicons (aka Favori Icon) comme un moyen de leur site de marque, de sorte que quand vous voyez cette icône, vous connaissez automatiquement quelle entreprise ou le produit qu'il représente.

For example, take a look at your address bar right now and you’ll notice that to the left of URL is a small icon that looks like a grid: Par exemple, jetez un coup d'oeil à votre barre d'adresse pour le moment et vous remarquerez que sur la gauche de l'URL est une petite icône qui ressemble à une grille:

Also, if I look at my Firefox Bookmarks or IE Favorites, I also see the same favicons next to any websites that are using them: Aussi, si je regarde mes signets Firefox ou IE Favorites, je vois aussi le même favicons à côté d'un des sites Web qui les utilisent:

Using a FavIcon for your site is a good practice as it helps visitors to quickly identify your site among large numbers of bookmarks, etc. So how do you go about creating a FavIcon for your site? Utilisation d'une FavIcon pour votre site est une bonne pratique dans la mesure où il permet d'identifier rapidement les visiteurs de votre site parmi un grand nombre de signets, etc Alors, comment vous faites pour créer une FavIcon pour votre site?

How to make a FavIcon Comment faire un FavIcon

The first step in creating a FavIcon is to actually find a picture or create a graphic that you want to use as your icon. La première étape dans la création d'une FavIcon est effectivement à trouver une photo ou créez un graphique que vous souhaitez utiliser comme icône. A FavIcon always has a 16×16 pixel dimension, so you should be very careful when choosing or creating your own picture. Un FavIcon a toujours un 16 × 16 pixels dimension, vous devrez donc faire très attention au moment de choisir ou de créer votre propre image.

Try to find an icon or graphic that has very little going on with it in terms of design. Essayez de trouver une icône ou un graphique qui a très peu à faire avec elle en matière de design. The simpler graphic you can find, the better your FavIcon will turn out. Le graphique simple, vous trouverez, plus votre FavIcon aillent. Also, make sure that the graphic is a square, so basically where the length and width are equal. Aussi, assurez-vous que le graphique est un carré, donc fondamentalement où la longueur et la largeur sont égales. If you have a portrait or landscape picture, it will be resized to 16×16 and therefore become either stretched or squished. Si vous avez une photo portrait ou paysage, il sera redimensionné à 16 × 16, et donc devenir soit étirée ou écrasée.

You can also create your own image using Microsoft Paint or similar photo editing software. Vous pouvez également créer votre propre image à l'aide de Microsoft Paint ou similaire logiciel d'édition de photos. When you are done, make sure you save the file into GIF, JPG, PNG, or BMP format. Lorsque vous avez terminé, assurez-vous de sauvegarder le fichier en GIF, JPG, PNG ou BMP.

Now that you have your image, go to Maintenant que vous avez votre image, allez à DynamicDrive DynamicDrive and let’s use their FavIcon generator to create our FavIcon from the picture. Et nous allons utiliser leur FavIcon générateur de créer notre FavIcon partir de l'image.

Go ahead and browse to the location of your image file and then choose Create Icon . Allez-y et recherchez l'emplacement de votre fichier image, puis choisissez Créer une Icône.

And really that’s it! Et vraiment, c'est tout! You’ll now get a preview of how your FavIcon would look in an actual browser and you can either proceed to download the FavIcon or you can simply choose another image. Vous pourrez désormais obtenir un aperçu de la façon dont votre FavIcon ressemblera à un véritable navigateur et vous pouvez soit passer à télécharger le FavIcon ou vous pouvez simplement choisir une autre image.

What I like about this site is that it also gives you instructions on how to install a FavIcon to your website, which is a little bit harder than actually creating the FavIcon itself. Ce que j'aime à propos de ce site est qu'il vous donne également des instructions sur la façon d'installer un FavIcon à votre site Web, qui est un peu plus difficile que la création effective de FavIcon lui-même. Here’s what you need to do: Voici ce que vous devez faire:

First, download the file and then upload the FavIcon, which by the way should be named “ FavIcon.ico ” to the ROOT directory of your site. Tout d'abord, téléchargez le fichier, puis téléchargez-le FavIcon, qui, par la manière dont doit être nommé "FavIcon.ico" pour le répertoire racine de votre site. It’s very important that the file be named favicon.ico and that it be located in the root directory on your web server. Il est très important que le fichier favicon.ico être nommé et qu'il soit situé dans le répertoire racine de votre serveur web. You can verify that you uploaded it correctly by typing Vous pouvez vérifier que vous avez téléchargé correctement en tapant

http://mysite.com/favicon.ico Http://mysite.com/favicon.ico

in the browser’s location, where “mysite.com” is your web site’s Internet address. Dans le navigateur de l'endroit, où "mysite.com" est un site web de l'adresse Internet. Now you need to insert one line of code into the <HEAD> section of your web sites pages. Maintenant, vous devez insérer une ligne de code dans la section <HEAD> de vos sites Web pages. Note that this code has to be on every page that you want the FavIcon to appear for. Notez que ce code doit être sur toutes les pages que vous voulez que le FavIcon de comparaître. This is easy if you have a site that uses templates and pulls in header, footer, and other files individually. Cela est facile si vous avez un site qui utilise des modèles et des pulls en-tête, pied de page, et d'autres fichiers individuellement.

If all of your pages are static and you do not use templates or includes, you’ll have to manually edit the HTML in each page. Si toutes vos pages sont statiques et que vous n'utilisez pas ou modèles comprend, vous devrez modifier manuellement le code HTML dans chaque page. The line of code you’re going to want to add is as follows: La ligne de code que vous allez souhaitez ajouter est la suivante:

<link rel=”shortcut icon” href=”/favicon.ico”> <link Rel="shortcut icon" href="/favicon.ico">

The icon may not show up immediately, so be patient. L'icône peut ne pas apparaître immédiatement, alors soyez patient. Also, sometimes it doesn’t appear at all, especially with IE as there is a browser bug. Aussi, parfois, il n'apparaît pas du tout, en particulier avec IE comme navigateur il ya un bug.

Hopefully with this short tutorial you have been able to create a FavIcon and get it up and working on your site. Je l'espère, avec ce petit tutoriel que vous avez su créer une FavIcon et get it up et de travailler sur votre site. If you have any questions, feel free to post a comment! Si vous avez des questions, n'hésitez pas à poster un commentaire! Enjoy!