Comment avoir plusieurs tailles de favicon, tout en ne proposant qu'un 16x16 par défaut ?

Question

En général, il est considéré comme une bonne pratique de servir favicon.ico en plusieurs tailles, car de cette façon, il apparaît mieux lorsqu'un raccourci est effectué ou que le site est épinglé (IE9). Cependant, la taille d'un favicon est facilement décuplée en procédant ainsi, ce qui ralentit le chargement du site (dans mon cas, le favicon 16x16 fait 1ko, les 16, 32, 64=30ko).

Des sites comme Facebook et Yahoo proposent par défaut une favicon 16x16 qui fait <1kb, mais lorsque vous épinglez ces sites, l'image utilisée est de taille correcte. Je suppose que l'image plus grande n'est chargée qu'en cas de besoin, ce qui résout le dilemme. J'ai essayé sans succès de comprendre comment ces sites font cela. Quelqu'un le sait-il ?

Answer 1

Mise à jour :

Ma réponse initiale se trouve ci-dessous, mais depuis que j'ai écrit ce billet, je pense qu'il existe peut-être une meilleure façon de gérer les favicons avec HTML 5. Je créerais un favicon 32x32 (uniquement de cette taille) pour Internet Explorer 9 et moins, mais j'utiliserais d'autres méthodes pour créer des favicons de plus haute résolution (type de fichier PNG) pour les autres navigateurs, y compris les appareils mobiles. Vous pouvez voir ma réponse ici pour de plus amples informations.

---

Réponse originale à la question :

Voici comment procéder :

1. Télécharger png2ico . Extraire vers c:\

2. Créez vos icônes dans votre programme préféré. Créez une icône 64x64, 32x32, 16x16 (Note : 64x64 n'est probablement pas nécessaire et augmentera la taille du fichier. Cependant, utilisez au moins 32x32 et 16x16) Sauvegardez comme icon-64.png (pour la taille 64x64) icon-32.png (32x32) et icon-16.png (16x16) dans le même dossier que png2ico. Gardez les couleurs au minimum.

3. Ouvrez l'invite de commande - Changez les répertoires pour le dossier png2ico. ( cd \png2ico )

4. Une fois dans le bon répertoire, exécutez cette commande :

   png2ico.exe favicon.ico --colors 16 icon-64.png icon-32.png icon-16.png

   Note : La différence de taille du fichier pour l'ajout d'une icône de taille 64x64 a augmenté le fichier de 2kb. Je me contenterais d'utiliser 32x32 et 16x16. (Exécutez le même code que ci-dessus en enlevant icon-64.png )

5. Récupérez le fichier favicon.ico dans le dossier png2ico. Téléchargez-le sur le serveur et ajoutez <link rel="shortcut icon" href="http://example.com/favicon.ico" /> à l'en-tête et vous êtes prêt à partir.

Pendant que vous y êtes, allez-y et créez des icônes pour l'iPad et l'iPhone. Vous trouverez plus d'informations sur les tailles recommandées ici et sur la manière de les mettre en œuvre sur votre site. .

Aussi plus d'informations générales sur les favicons peut être trouvée ici.

Note : Je ne sais pas si c'est ainsi que Facebook ou Yahoo procèdent, mais cela répond à votre question sur la manière de procéder.

Answer 2

Le Facebook "favicon.ico" contient deux tailles : 16x16 et 32x32. Je suis sûr que vous savez comment combiner deux images ico en une seule, mais le "truc" est qu'ils utilisent deux images extrêmement optimisées.

J'ai découvert que Photoshop crée des fichiers PNG et des fichiers ICO gonflés. (Note : Photoshop nécessite un plugin pour créer des fichiers ICO).

Le meilleur moyen que j'ai trouvé pour créer des fichiers ICO minuscules et optimisés est d'utiliser un éditeur d'images gratuit bien connu appelé "Gimp". En bref, il suffit de suivre ce tutoriel pour créer des fichiers ICO :
https://www.catalyst.net.nz/news/creating-multi-resolution-favicon-including-transparency-gimp
Conseil important : Lorsque vous arrivez à l'étape d'enregistrement de votre image .ico et que vous pouvez spécifier le nombre de bits par pixel (bpp), passez à 4bpp ou quelque chose de similaire (vous devrez expérimenter pour voir jusqu'où vous pouvez aller sans dégrader la qualité de l'image).

En utilisant les instructions ci-dessus, j'ai pu créer une favicon de 1kb qui contient des images de 16x16 et 32x32. À titre de comparaison, la taille minimale que j'ai pu obtenir pour la même favicon en utilisant Photoshop, des plugins et divers autres outils était de 5 kb.

Answer 3

Vous pouvez aussi vous connecter à n'importe quelle machine linux sur laquelle ImageMagick est installé, renommer votre image source (avec une résolution d'au moins 256x256 pixels et un fichier au format PNG) en 'favicon.png', et exécuter la commande suivante :

convert favicon.png -bordercolor white -border 0 \
      \( -clone 0 -resize 16x16 \) \
      \( -clone 0 -resize 32x32 \) \
      \( -clone 0 -resize 48x48 \) \
      \( -clone 0 -resize 57x57 \) \
      \( -clone 0 -resize 64x64 \) \
      \( -clone 0 -resize 72x72 \) \
      \( -clone 0 -resize 110x110 \) \
      \( -clone 0 -resize 114x114 \) \
      \( -clone 0 -resize 120x120 \) \
      \( -clone 0 -resize 128x128 \) \
      \( -clone 0 -resize 144x144 \) \
      \( -clone 0 -resize 152x152 \) \
      \( -clone 0 -resize 180x180 \) \
      \( -clone 0 -resize 228x228 \) \
      -delete 0 -alpha off -colors 256 favicon.ico

Et vous aurez votre favicon.ico avec les formats les plus connus dans un seul fichier.

N'oubliez pas non plus de consulter l'aide-mémoire sur le favicon @ https://github.com/audreyr/favicon-cheat-sheet pour plus d'informations sur les favicons.

Answer 4

Fichier batch Windows, qui crée des fichiers .PNG de taille multiple et les fusionne en un seul fichier .ICO :

@echo off

set inkScape="C:\SOFTWARE\GRAPHIC\INKSCAPE\inkscape.exe"
set imageMagick="C:\SOFTWARE\DEVELOPER\IMAGEMAGICK\magick.exe"
set fileName=favicon
set importType=svg
set exportType=png
set exportDpi=300
set imageSizes=(16 24 32 48 57 60 64 70 72 76 96 114 120 128 144 150 152 180 192 196 256 300 320 400 450 460 480 512 600)

for %%s in %imageSizes% do (
 %inkScape% -z -f %~dp0%fileName%.%importType% -w %%s -h %%s -e %~dp0%fileName%-%%sx%%s.%exportType% -d %exportDpi%
 echo CREATED: %fileName%-%%sx%%s.%exportType%
 set e=%fileName%-%%sx%%s.%exportType%
 call :concat (e)
)

%imageMagick% %exportFileNames%"%~dp0%fileName%.ico"
echo MERGED IN: %fileName%.ico

pause goto :eof

:concat (e) (
 set exportFileNames=%exportFileNames%"%~dp0%e%" 
)

Si vous n'avez pas besoin des fichiers .PNG, vous pouvez les supprimer (ou les enlever) en del FILE ou vous enregistrez tous les PNGs dans un répertoire que vous pouvez supprimer (après %imageMagick% %exportFileNames%"%~dp0%fileName%.ico" ).

J'espère que cela aidera quelqu'un :)

Answer 5

Si vous aimez les scripts, j'en ai écrit un pour convertir n'importe quelle image en favicon multi-résolution en utilisant ImageMagick.

http://blog.lavoie.sl/2012/11/multi-resolution-favicon-using-imagemagick.html

Pour votre question sur la raison pour laquelle Facebook et Yahoo sont en mesure d'avoir des images haute résolution "épinglées", c'est parce qu'ils ont également icône apple-touch et og:image .