Effets d'images

Créer son favicon perso animé ou pas

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Pouvoir se démarquer par un favicon, c'est possible !

1) Favicon.cc



Rendez vous sur Favicon.cc (En) le site est en anglais, donc pour les puristes du Français, voici la page en version traduite : Favicon.cc (Fr) (Merci Google).

Se site vous propose de créer votre propre favicon ! Ou alors d'importer une image et de le faire pour vous Ou encore, de choisir parmi ceux déjà créer !

Pas besoin de s'enregistrer !

2) FavIcon from Pics



Toujours en anglais, mais avec une autre variante d'animation du Favicon. Allez sur FavIcon from Pics (En). La page en version traduite : FavIcon from Pics (Fr) (Merci Google). Et testez donc ..

Voilà le favicon de CsN :

Vous voulez la même ? pas de problème ! Vous venez de choisir votre image et vous l'avez uploader,

Vous avez deux options :



Download FavIcon Package OR Customize



Cliquez sur Customize, et ce petit panel apparait :

Customize your favicon:
  • Add scrolling text and edit animation (Cliquez dessus) Et ajoutez votre texte.
  • Add iPhone and iPod Touch icon
  • Make image background transparent (corner colors)
  • Add a border around the image
  • Add animated favicon
  • Convert to grayscale / black and white
  • Add icon format: 16-16, 16-64K, 32-16, 32-256, 32-64K, 48-256 (view rare formats)



Pour enregistrer l'animation :



Juste en dessous du bloc ci-dessus, vous avez :

What else you can do:
  • Instantly preview your favicon in this browser
  • Validate your favicon, after installing
  • Add your site to the Favicon Gallery
  • Send your feedback...
  • Download only favicon.ico (1.12 K)
  • Download only animated_favicon1.gif (8.39 K) (Cliquez dessus) Et télécharger l'animation.



Placer le favicon:



Ajouter des tags HTML ci-dessous à votre page Web entre la balise <head>... </ head>:
Code HTML :
 
<link rel="shortcut icon" 
 
href="/wiki/favicon.ico">
<link rel="icon" type="image/gif" 
 
href="/wiki/animated_favicon1.gif">


Astuces:



La favicon n'est pas visible !
  • Il faut avoir Internet explorer 5 (ou +), FireFox, Opera
  • Quitter le site puis le relancer (ou actualiser ou ctrl+R ou F5)
  • Vider le cache du navigateur


Bonus



Voici quelques petits gifs sympa pour commencer vos essais.