Freshpixel

On l’oublie souvent, ce fameux favicon, que l’on rajoute à la va vite à la fin du projet, une fois le site en ligne, et biensur on ne se souviens jamais des formats.
Ca m’arrive souvent, et pour y remédier j’ai crée un fichier photoshop qui va créer tous vos favicons, pour votre projet web.
Je vous le partage donc ici.

Je me suis amusé à créer un fichier .psd qui permet de créer en une seule fois tous les formats de favicons actuellement utilisés, dont les versions pour iPhone, Android, et biensur les navigateurs web.
Vous créez un seul favicon qui sera ensuite dupliqué aux différents formats grâce aux objets dynamiques de Photoshop.
L’idée est que le code html est également déjà prévu, avec les bons noms de fichiers pré-renseignés.
En effet avec l’outil « tranches » de photoshop, il est possible de nommer les images dediés à être intégrés dans du html.

En clair, pour tous les favicons

Au final, il vous suffit donc de :

• 1. Créer un seul favicon dans le fichier photoshop,
• 2. Exporter les images (sans oublier de supprimer les images inutiles)
• 3. Copier-coller le code html dans le <header> de votre site.

Le code html à insérer pour vos favicons est celui-ci :

<!-- Favicons -->
<link rel="icon" type="image/png" href="/images/favicon/favicon.png" /> <!-- 16x16 png -->
<link rel="apple-touch-icon" href="/images/favicon/iphone-favicon.png"/> <!-- 57x57 png -->

<link rel="apple-touch-icon-precomposed" href="/images/favicon/apple-touch-icon-precomposed.png" /><!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/favicon/apple-touch-icon-72x72-precomposed.png" /><!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/favicon/apple-touch-icon-114x114-precomposed.png" /><!-- For iPhone 4 with high-resolution Retina display: -->

Télécharger « Favicon Duplicator »

En espérant que vous trouverez ça utile ;)

note personnelle : créer un favicon pour freshpixel….