Как иметь несколько размеров favicon, но по умолчанию обслуживать только 16x16? - PullRequest
Новая
       13

Как иметь несколько размеров favicon, но по умолчанию обслуживать только 16x16?

30 голосов
/ 05 февраля 2012

Как правило, рекомендуется использовать favicon.ico в нескольких размерах, потому что таким образом он выглядит лучше при создании ярлыка или закреплении сайта (IE9).Тем не менее, размер значка сайта легко увеличивается в десять раз, что приводит к более медленной загрузке сайта (в моем случае, значок 16x16 составляет 1 КБ, 16, 32, 64 = 30 КБ).по умолчанию используется значок 16x16, то есть <1 КБ, но при закреплении этих сайтов используемое изображение имеет правильный размер.Я предполагаю, что большая картина загружается только тогда, когда это необходимо, что устраняет дилемму.Я безуспешно пытался выяснить, как эти сайты делают это.Кто-нибудь знает это? </p>

Ответы [ 5 ]

36 голосов
/ 27 февраля 2012

Обновление:

Однако мой оригинальный ответ ниже, так как после написания этого поста я считаю, что может быть лучший способ обработки фавиконов с помощью HTML 5. Я бы создал значок 32x32(только такого размера) для Internet Explorer 9 и ниже, но используйте другие методы для создания значков с более высоким разрешением (тип файла PNG) для других браузеров, включая мобильные устройства.Вы можете посмотреть мой ответ здесь для получения дополнительной информации.

Оригинальный ответ на вопрос :

Вот как это можно сделать:

  1. Скачать png2ico .Извлеките в c: \

  2. Создайте свои иконки в вашей любимой программе.Создайте 64x64, 32x32, 16x16.(Примечание: 64x64, вероятно, не требуется и увеличит размер файла. Однако используйте как минимум 32x32 и 16x16). Сохранить как icon-64.png (для размера 64x64) icon-32.png (32x32) и icon-16.png (16x16) в той же папке, что и png2ico.Минимальное количество цветов:

  3. Открыть командную строку - Измените каталоги на папку png2ico.(cd \png2ico)

  4. После того, как в нужном каталоге выполните эту команду: 

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

    Примечание. Разница в размере файла для добавления значка размера 64x64увеличил файл на 2кб.Я бы просто использовал 32x32 и 16x16.(Запустите тот же код, что и выше, удалив icon-64.png)

  5. Получите файл favicon.ico из папки png2ico.Загрузите его на сервер, добавьте <link rel="shortcut icon" href="http://example.com/favicon.ico" /> в заголовок, и все готово.

Пока вы работаете над этим, создайте значки для iPad и iPhone. Вы можете найти больше информации о рекомендуемых размерах здесь и о том, как внедрить их на свой сайт .

Также более общую информацию о Favicons можно найти здесь.

Примечание: я не знаю, как это делают Facebook или Yahoo, но это отвечает на ваш вопрос, как это можно сделать.

19 голосов
/ 22 октября 2012

Facebook "favicon.ico" содержит два размера: 16x16 и 32x32.Я уверен, что вы знаете, как объединить два изображения ico в одно, однако «хитрость» заключается в том, что они используют два чрезвычайно оптимизированных изображения.

Я обнаружил, что Photoshop создает раздутые файлы PNG и раздутыеICO файлы.(Примечание. Для создания файлов ICO в Photoshop требуется плагин.)

Лучший способ создания крошечных оптимизированных файлов ICO - использовать известный бесплатный редактор изображений под названием «Gimp».Короче говоря, просто следуйте этому руководству для создания файлов ICO:
http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp
Важный совет: когда вы переходите к шагу для сохранения вашего изображения .ico и вы можете указать биты на пиксель (bpp),измените его на 4bpp или что-то похожее (вам придется поэкспериментировать, чтобы увидеть, как низко вы можете идти, не ухудшая качество изображения).

Используя приведенные выше инструкции, я смог создать значок 1 КБ, содержащий 16x16и 32x32 изображения.Для сравнения, наименьшее, что я мог получить такой же значок, используя Photoshop, плагины и различные другие инструменты, было 5kb.

5 голосов
/ 30 апреля 2014

Или вы можете просто войти в любой Linux-пакет с установленным ImageMagick, переименовать исходное изображение (с разрешением не менее 256x256 пикселей и файл формата PNG) в «favicon.png» и выполнить следующую команду: 

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

И вы получите ваш favicon.ico с большинством известных форматов, запеченный в одном файле.

Кроме того, обязательно ознакомьтесь со шпаргалкой favicon @ https://github.com/audreyr/favicon-cheat-sheet для получения дополнительной информации о favicon.

0 голосов
/ 07 июня 2019

Пакетный файл Windows, который создает несколько размеров .PNG и объединяет их в один файл .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%" 
)

Если вам не нужны файлы .PNG, вы можете удалить (или удалить) ихdel FILE или сохраните все PNG в каталоге, который вы можете удалить (после %imageMagick% %exportFileNames%"%~dp0%fileName%.ico").

Надеюсь, это кому-нибудь поможет.:)

0 голосов
/ 09 ноября 2013

Если вам нравятся сценарии, я написал один для преобразования любого изображения в значок с несколькими разрешениями, используя ImageMagick.

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

На ваш вопрос о том, почему Facebook и Yahoo могутимеют "закрепленные" изображения с высоким разрешением, потому что они также имеют apple-touch-icon и og: image .

...