Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Comment créer un favicon pour son site

Un favicon est une petite icône personnalisée qui apparaît à côté de l'URL d'un site Web dans la barre d'adresse d'un navigateur Web. 

Exemple favicon dans navigateur

aperçu favicon internet explorer

aperçu favicon firefox

 

Ils apparaissent également dans vos sites favoris, sur les onglets dans les navigateurs à onglets, et comme l'icône de raccourcis Internet, sur votre bureau ou d'autres dossiers dans Windows. Et quand je dis petit, je veux dire 16 pixels par 16 pixels. Donc, si vous aimez les défis de bonne conception essayer votre main de créer celui-ci. Tout ce que vous devez ajouter comme favicon à votre site est une icône de Windows (. ico) généralement appelée favicon.ico que vous téléchargez dans le répertoire principal de votre site web. Aujourd'hui, la plupart des navigateurs web, peuvent utiliser une image GIF (y compris ceux d'animation) ou PNG (y compris la transparence complète) à la place. Mais puisque tous les navigateurs, y compris IE comprennent le format. Ico, et parce qu'il a beaucoup de fonctionnalités intéressantes que les GIF et PNG n'ont pas, lisez la suite pour savoir comment en faire un. 

Créer un favicon avec Photofiltre

Photofiltre est un logiciel gratuit de retouche d'image ( téléchargez une version portable si vous voulez juste s'en servir pour créer un favicon ici) dont vous pouvez vous servir pour créer aisément un favicon pour votre site.

D'abord, l'image avec laquelle vous voulez créer votre favicon. Puis redimensionnez-la en 16x16 en ayant soin de décocher la case "Conserver les proportions". Cliquez sur OK.

Redimensionner image avec Photofiltre

Vous avez une image en 16x16 qui va vou sparraître très petite. Maintenant, il ne reste plus qu'à l'exporter et à l'enregistrer sous: favicon.ico dans le dossier de votre site ou sur votre bureau Windows.

Exporter une image en icône Exportation en icône

Une fois cliqué sur "Exporter", vous serez amené à une fenêtre pour l'enregistrement du fichier. Vous devez l'enregistrer sous: "favicon" et Photofiltre va ajouter l'extension: .ico:

Enregistrer favicon.ico

Créer un favicon avec Photoshop

 

Téléchargez le plugin Photoshop dont vous aurez besoin pour exporter sous le format . ico. Vous pouvez télécharger le plug-in à partir Telegraphics . Le plugin lit et écrit les fichiers ICO en 1, 4 et 8-bit et 24-bit modes RGB , et peut également lire et écrire en 32-bits «XP» (icônes avec 8-bit de canal alpha). Assurez-vous d'installer le plugin avant de commencer ce tutoriel.

Commençons! Parce que 16 x 16 est une zone petite, il peut être très difficile d'être créatif. Donc, au lieu de commencer votre projet avec une toile fixée à 64 x 64, utilisez des fichiers plus grands puis redimensionnez-les avant de les exporter en format .ico. Pour cela, sélectionnez Fichier> Nouveau, et choisissez une dimension de 64 x 64 pixels. Pour la conception,  si vous avez déjà un logo, vous devez le réduire à la taille de 16 x 16 pour voir si elle tient la route. Si elle ne semble pas bon à cette taille, travaillez avec la taille 64 x 64 et essayer de créer un design simple qui incorpore les couleurs de la palette de votre site Web. Lorsque vous êtes prêt à tester la conception d'imagesélectionnez Options> menu Taille d'image et saisissez 16 x 16. Cliquez sur l'image Redimensionner et choisissez "Sharper bicubique" dans le menu déroulant (CS uniquement pour cette étape). C'est le meilleur réglage pour faire en sorte que l'image ne devienne pas floue car il est en cours de redimensionnement. Si elle n'est toujours pas assez nette, revenir en arrière etsursaturer et / ou augmenter le contraste de l'image originale, puis la redimensionner à nouveau. Si vous vous sentez que l'icône n'est pas tout à fait ce que vous voulez, simplement garder peaufiner jusqu'à ce qu'il soit parfait. À cette taille minuscule, il peut prendre quelques essais avant que vous obteniez la bonne. 

Sauver l'icône personnalisée Allez dans Fichier> Enregistrer sous et assurez-vous de nommer le fichier favicon.ico. Sous le format .ico, vous devez le choisir dans le menu déroulant. Ce format ne sera disponible que dans Photoshop après avoir télécharger et installer le plugin. Dans la prochaine étape, vous devrez télécharger ce nouveau fichier que vous avez créé dans le dossier racine de votre site web, c'est donc une bonne idée de naviguer et de l'enregistrer à cet emplacement sur votre disque dur maintenant. 

Téléchargement du fichier favicon.ico Connectez-vous à votre serveur et téléversez votre fichier favicon.ico dans le même répertoire que votre page d'accueil (l'index), et laissez-le en vrac, en veillant à ne pas le mettre dans un répertoire d'images ou un autre dossier. L'emplacement standard est le dossier "racine" de votre site, qui est le même répertoire que votre page d'accueil (l'index), pas à l'intérieur d'un répertoire d'images ou un autre dossier. Si vous le mettez là (avec le nom qu'il a favicon.ico), la plupart des navigateurs le trouveront automatiquement. Certains navigateurs vont chercher un lien direct dans le code source HTML de votre site. Vous pouvez aider ces navigateurs en ajoutant ce lien dans la section head de chaque page sur laquelle vous voulez que le Favicon.ico parraisse. Voici le code du lien pour à y mettre (remplacez: www.dreamer.weboptime.com par l'adresse de votre site):

<link href="http://www.dreamer.weboptime.com/favicon.ico" rel="shortcut icon" />

 Une fois que vous auriez ajouté ce code, téléchargez l'ensemble de vos pages modifiées. (Certaines personnes suggèrent que le code suivant est en fait suffisant:

<link rel = "icon" href = "/ favicon.ico" type = "image / x -icône ">

Si vous voulez utiliser une image GIF ou PNG au lieu de .ico, utiliser ce format sa place (il faut se rappeler que cela ne fonctionnera pas dans IE): 

<link rel = "icon" href = "/ favicon.png" type = "image / png">

ou

 <link rel="icon" href="/favicon.gif" type="image/gif"> 

Testez!  si votre nouveau Favicon n'apparaaît pas tout de suite, essayez de rafraîchir la page ou de vider votre cache - ou de mettre un "?" à la fin de l'url, qui saura dire un navigateur que la page est nouvelle et non mise en cache. 

Dépannage des problèmes de navigateur : Microsoft IE 6 pour Windows ne peut pas afficher le favicon jusqu'à ce que l'URL ait été ajoutée aux favoris. Ou essayez cette astuce: aller jusqu'à la barre d'adresse, cliquez sur l'existant (habituellement la valeur par défaut IE) favicon, puis "trémousser" un peu pour la laisser aller. Cela va recharger la page et doit obtenir le favicon nouveau. Safari pour MAC ne saura pas afficher un favicon à jour jusqu'à ce que le cache du navigateur ait été effacée. Même en choisissant "vider le cache" 'dans le menu ne sera pas utile parce que les favicons dans Safari sont enregistrés dans un cache séparé. Allez dans Edition Safari> Réinitialiser, et cochez la case "Supprimer toutes les icônes du site". Si vous ne trouvez pas cela, vous devez vider le cache d'icône vous-même. Cherchez-le dans de l'utilisateur> Bibliothèque> Safari> Icônes. Sur la version Windows de Safari, allez à C: \ Documents and Settings \ NomUtilisateur \ Local Settings Application Data \ Apple Computer \ Safari \ WebpageIcons.db. Quittez Safari, supprimez le fichier, redémarrez Safari. (Parfois, vous devez redémarrer l'ordinateur aussi.) sur Firefox, effacez le cache et redémarrez le navigateur. Sur Opéra, la mise à jour des raccourcis de sites est le plus obligeant.. Cette astuce de www.vistax64.com/tutorials : 1. Cliquez-droit sur le bureau. 2.Sélectionnez Personnaliser et sélectionnez Paramètres d'affichage (ou tout simplement des paramètres sur XP). 3. Changer la couleur de 32 bits à 16 bits et cliquez sur Appliquer. 4.Changer la couleur à 32 bits et cliquez sur Appliquer. 

Format de fichier non disponible: le format de fichier Windows L'icône (ICO) ne sera pas disponible jusqu'à ce que vous ayez téléchargé et installé le plugin, puis quittez et redémarré Photoshop. 

Dépannage Mise à jour Une personne qui avait des problèmes avec Internet Explorer 7 nous a envoyé une petite astuce: j'ai eu quelques problèmes avec IE 7 -, mais l'ajout de ces 2 lignes de code a résolu le problème: 

<link REL="SHORTCUT icon" href="favicon.ico"> < link rel = "icon" type = "image / ico" href = "favicon.ico"> 

 Donc, si vous avez parvenu jusque-là, vous pouvez déjà voir votre favicon dans la barre d'adresse de votre navigateur, et il semble probablement grande. 

 

Si on veut aller plus loin, dans Windows en particulier, les favicons apparaissent un peu partout. Par exemple, si vous placez un raccourci vers un site Web sur votre bureau, Windows utilise souvent le favicon du site comme l'icône de raccourci. Mais sur le bureau, Windows utilise une icône de taille beaucoup plus grande, généralement 48x48 pixels. Lorsque cela se produit, Windows redimensionne votre favicon et il aura probablement l'air flou et pas si grand en plus. Vous pouvez résoudre ce problème. Une des choses intéressantes sur les fichiers ICO, C'est qu'ils peuvent contenir plusieurs versions de l'icône, dans différentes tailles et profondeurs de couleurs (un peu comme une image GIF animée contient plusieurs images). Quand ils le font, Windows utilise selon la profondeur la taille et la couleur la plus appropriée. Pour les tailles, les pixels 16x16, 24x24, 32x32 & 48x48 sont les plus communs, et tous peuvent être regroupeés dans un seul fichier .Ico. La création d'une icône multi-résolution n'est pas beaucoup plus difficile que ce que vous avez fait pour créer votre favicon 16x16. Dans, Telegraphics, au même endroit où vous avez téléchargé le premier plugin, a aussi un autre plugin http://www.telegraphics.com.au/sw/info/icobundle.html  qui vous permet de regrouper plusieurs icônes ensemble dans un seul fichier .ico. Ce n'est pas vraiment un plugin, mais un programme autonome pour Windows (utilisé à l'invite de commande) ou MacOS (drag and drop). Il y a également de nombreux outils autonomes qui permettront de créer une icône multi-résolution pour vous à partir d'une seule image de départ. Voici quelques uns qui sont libres d'essayer: www.sibcode.com / icône-studio et www.aha-soft.com/anytoicon . En ce qui concerne la profondeur de couleur, encore une fois, si vous êtes sous Windows, vous avez sans doute remarqué, que certaines icônes sur votre bureau ont des bords pas tout à fait en douceur, tandis que d'autres se fonde en douceur sur les bords. Le mélange lisse est obtenu parce que ces icônes contiennent une version avec une profondeur de couleur 32-bit, ce qui permet une véritable transparence, tout comme vos calques dans Photoshop. Vous pouvez créer une version 32-bit de votre icône, avec 24-bit (16 millions de couleurs, gif-comme la transparence), 16-bit (256 couleurs) ou même 8 -, 4 - ou 2 bits ... tous ce qui pourrait à nouveau être stocké dans un fichier. ico! Donc, si vous voulez vous assurer que votre favicon est superbe à voir, essayez de créer quelques versions de votre fichier favicon.ico. Par exemple: 16x16, 16 bits (256) couleurs 16x16, couleurs 32-bit couleurs 32x32, 16-bit (256) 32x32, 32-bit couleurs 48x48, couleurs 16-bit (256) 48x48, 32-bit couleurs Mais nexagérez pas, parce que chaque variation rend votre favicon un peu plus grand, ce qui signifie qu'il faudra plus de temps à le charger.

Dreamweaver® est une marque déposée d'Adobe® Systems Incorporated. Les logos et les noms de marques cités dans ce site sont les propriétés respectives de leurs développeurs.

 

Création de sites web

hit counter