web-dev-qa-db-fra.com

Comment avoir plusieurs tailles de favicon, mais ne servir qu'un 16x16 par défaut?

En règle générale, il est considéré comme une bonne pratique de servir favicon.ico en plusieurs tailles, car de cette façon, cela semble mieux lorsqu'un raccourci est créé ou que le site est épinglé (IE9). Cependant, la taille d'un favicon décuple facilement, ce qui entraîne un chargement de site plus lent (dans mon cas, le favicon 16x16 est de 1 Ko, le 16, 32, 64 = 30 Ko).

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

favicon
30
user1190803

Mise à jour:

Ma réponse d'origine est ci-dessous, cependant, depuis la rédaction de ce message, je pense qu'il peut y avoir 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 ci-dessous, mais utiliser d'autres méthodes pour créer favicons de résolution plus élevée (type de fichier PNG) pour d'autres navigateurs, y compris les appareils mobiles. Vous pouvez voir ma réponse ici pour plus d'informations.

Réponse originale à la question:

Voici comment cela peut être fait:

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

  2. Créez vos icônes dans votre programme préféré. Créez un 64x64, 32x32, 16x16. (Remarque: 64x64 n'est probablement pas nécessaire et augmentera la taille du fichier. Cependant, utilisez au moins 32x32 et 16x16) Enregistrer sous 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 commandes - Modifiez les répertoires dans 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

    Remarque: La différence de taille de fichier pour l'ajout d'une icône de taille 64 x 64 a augmenté le fichier de 2 Ko. Je voudrais simplement utiliser 32x32 et 16x16. (Exécutez le même code que ci-dessus en supprimant icon-64.png)

  5. Récupérez le fichier favicon.ico dans le dossier png2ico. Téléchargez-le sur le serveur, 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 iPad et iPhone. Vous pouvez trouver plus d'informations sur les tailles recommandées ici et comment les implémenter dans votre site .

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

Remarque: je ne sais pas si c'est ainsi que Facebook ou Yahoo font le leur, mais cela répond à votre question de savoir comment cela peut être fait.

36
L84

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, cependant, le "truc" est qu'ils utilisent deux images extrêmement optimisées.

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

La meilleure façon que j'ai trouvée pour créer de minuscules fichiers ICO optimisés est d'utiliser un éditeur d'images gratuit bien connu appelé "Gimp". En bref, suivez simplement ce tutoriel pour créer des fichiers ICO:
http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp
. jusqu'où vous pouvez aller sans dégrader la qualité de l'image).

En utilisant les instructions ci-dessus, j'ai pu créer un favicon de 1 Ko contenant des images 16x16 et 32x32. En comparaison, le plus petit que j'ai pu obtenir le même favicon en utilisant Photoshop, les plugins et divers autres outils était de 5 Ko.

19
Doug S

Ou vous pouvez simplement vous connecter à n'importe quelle boîte Linux avec ImageMagick 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.

Assurez-vous également de consulter la feuille de triche du favicon @ https://github.com/audreyr/favicon-cheat-sheet pour plus d'informations sur le favicon.

5
Henry van Megen

Si vous aimez les scripts, j'en ai écrit un pour convertir n'importe quelle image en un 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 peuvent avoir des images "épinglées" haute résolution, c'est parce qu'elles ont également Apple-touch-icon et og: image .

0
sebastien

Fichier de commandes Windows, qui crée des fichiers .PNG de plusieurs tailles 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 supprimer) en del FILE ou vous enregistrez tous les fichiers PNG dans un répertoire que vous pouvez supprimer (après %imageMagick% %exportFileNames%"%~dp0%fileName%.ico").

J'espère que ça aide quelqu'un. :)

0
Froschkoenig84