How to create a favicon.ico for your web site Comment créer un favicon.ico pour votre site Web

by Ross McKillop on May 2, 2007 par Ross sur McKillop Mai 2, 2007

Web Design & Dev

This brief tutorial will show you how to create a unique favicon.ico (that icon in your address bar - ex. Simplehelp’s favicon.ico is Ce bref tutoriel va vous montrer comment créer un unique favicon.ico (cette icône dans votre barre d'adresse - ex. Simplehelp est la favicon.ico ) for your own site. ) Pour votre propre site.

A favicon (short for Favorites Icon) is a great way to give your site a memorable and unique icon that will display in the browser address bar. Une icône de favori (diminutif de favoris Icon) est une belle façon de montrer à votre site un mémorable et unique icône qui s'affichera dans la barre d'adresses de votre navigateur. In addition, favicon’s show up next to ‘your site’ when people bookmark it, and since most folks have a very messy bookmark list, a graphical reminder of your site beside the bookmark name it is a good way let them find it again. En outre, l'icône de favori apparaissent à côté de "votre site" lorsque les gens dans vos favoris, et que la plupart des gens ont une très salissante liste de vos favoris, un rappel graphique de votre site à côté du nom de favori, il est un bon moyen de les laisser trouver à nouveau .

  1. First, select the image you want to use as a favicon. Tout d'abord, sélectionnez l'image que vous souhaitez utiliser comme une icône de favori. Something that blends in with your sites look, colour scheme and general “feel” is best. Quelque chose qui mélange avec vos sites regarder, de couleur et général "sentir" est la meilleure. Since favicons are quite small, it’sa good idea not to try and get too complicated. Depuis favicons sont très petites, c'est une bonne idée de ne pas essayer de faire trop compliqué. The image you choose should be a square (64×64, 32×32 etc), and can be a jpg, gif, png, bmp etc. L'image que vous choisissez doit être un carré (64 × 64, 32 × 32, etc) et peut être un jpg, gif, png, bmp etc
  2. Next, visit Ensuite, visite FavIcon from Pics Photos de Favicon - an absolutely brilliant (and free!) online tool that can generate a favicon from a picture, logo or other graphic -- Un absolument brillant (et gratuitement!) En ligne outil qui peut générer une icône de favori d'une image, un logo ou d'autres graphiques
  3. Upload your picture and click the magic Generate Favicon.ico button. Envoyez votre image et cliquez sur Générer la magie favicon.ico bouton. You’ll be given a preview of your favicon, and if you’re happy with it, click the Download Favicon button. Vous aurez un aperçu de votre icône de favori, et si vous êtes satisfait, cliquez sur le bouton Télécharger Favicon. Favicon from Pics will prompt you to save a .zip file - save it to your desktop or wherever you prefer to save files. Favicon de Photos vous invite à mettre un. Fichier zip - l'enregistrer sur votre ordinateur de bureau ou partout où vous le souhaitez enregistrer les fichiers. Unzip it. Décompressez.
  4. Fire up your favorite FTP program (or whatever tool you use to upload files to your web site) and upload the favicon.ico file to the root of your site*. Lancez votre programme FTP préféré (ou quel que soit l'outil que vous utilisez pour transférer des fichiers sur votre site Web) et télécharger le fichier favicon.ico à la racine de votre site *. You’ll want the file to be located at www.your-site.com/favicon.ico. Vous voulez que le fichier soit situé à www.your-site.com/favicon.ico.
  5. Visit your web site to check out your new favicon! Rendez visite à votre site Web pour vérifier votre nouvelle icône de favori! If it doesn’t appear, you may need to clear your browsers cache and then reload. Si elle ne figure pas, vous mai nécessaire d'effacer le cache de votre navigateur, puis recharger.
  6. * = if you don’t have access to the root of your site, add the following line of code somewhere in the <head> of your html: * = Si vous n'avez pas accès à la racine de votre site, ajoutez la ligne suivante de code quelque part dans le <head> de votre code HTML:

    <link rel=”shortcut icon” href=”http://www.your-site.com/path/to/favicon.ico”> <link rel="shortcut icon" href="http://www.your-site.com/path/to/favicon.ico">

Related Posts: Postes connexes:
  • How to revert to the “old” Google favicon Comment revenir à la "vieille" favicon Google
  • Simplehelp Recap: May 2007 - wow, and thank you! Simplehelp Rappel: Mai 2007 - wow, et merci!
  • How to create a custom iPhone and iPod touch icon for your web site Comment créer un iPhone et iPod toucher icône de votre site Web
  • Welcome! Bienvenue!
  • How to insert a Google Map into your website using iWeb Comment insérer une carte de Google dans votre site Web à l'aide d'iWeb
  • { 4 trackbacks } (4) trackback

    20 Free RSS Readers Reviewed - Simplehelp 20 lecteurs RSS gratuits révision - Simplehelp
    05.06.07 at 6:40 pm 05.06.07 à 6:40 pm
    WordPress: The Complete Post-Install Checklist, Redux - Simplehelp WordPress: The Complete Post-Installation Checklist, Redux - Simplehelp
    05.26.07 at 2:15 pm 05.26.07 à 2:15 pm
    How to revert to the “old” Google favicon - Simplehelp Comment revenir à la "vieille" favicon Google - Simplehelp
    05.30.08 at 9:12 pm 05.30.08 à 9:12 pm
    Favicon Design : ..:.:.. Favicon Design: ..:.:.. Todd And = Marketing + Media ..:.:.. Et Todd = Media + Marketing ..:.:..
    07.22.08 at 4:59 pm 07.22.08 à 4:59 pm

    { 1 comment… read it below or (1 commentaire… lire ci-dessous ou add one ajouter un } )

    1 1 LGR LGR 05.30.07 at 9:55 am 05.30.07 à 9:55 am

    Good post. Bonne poste. I have used that favicon generator in the past and it works well. J'ai utilisé ce générateur de favicon dans le passé et il fonctionne bien. Sometimes I don’t have the time or creativity to make my own and have found some great free favicons here: Parfois, je n'ai pas le temps ou la créativité pour faire en sorte que mon propre et ont trouvé des grands projets libres favicons ici: http://www.freefavicon.com/

    Leave a Comment Laissez un commentaire

    You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> Vous pouvez utiliser ces balises HTML et les attributs: <a href="" title="fete_christel <abbr title="fete_christel <acronym title="fete_christel <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>