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

Как правило, считается хорошей практикой служить favicon.ico в нескольких размерах, потому что таким образом он выглядит лучше при создании ярлыка или привязке сайта (IE9). Размер значка легко увеличивается в десять раз, делая это, хотя это приводит к более медленной загрузке сайта (в моем случае 16-значный 16-значный символ - 1kb, 16, 32, 64 = 30kb).

Сайты, такие как Facebook и Yahoo, по умолчанию используют значки 16x16, равные < 1kb, но когда вы прикрепляете эти сайты, используемое изображение является правильным размером. Я предполагаю, что большая картинка загружается только тогда, когда это необходимо, что устраняет дилемму. Я безуспешно пытался понять, как эти сайты делают это. Кто-нибудь знает это?

Ответ 1

Update:

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

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

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

Загрузить png2ico. Выдержка из c:\
Создайте свои иконки в своей любимой программе. Создайте 64x64, 32x32, 16x16. (Примечание: 64x64, вероятно, не требуется и увеличит размер файла. Однако используйте как минимум 32x32 и 16x16). Сохраните как значок-64.png(для размера 64x64) значок-32.png(32x32) и значок-16.png( 16x16) в той же папке, что и png2ico. Сохраните цвета до минимума.
Откройте командную строку - смените каталоги на папку png2ico. (cd \png2ico)
Как только в правом каталоге запустите эту команду:
```
png2ico.exe favicon.ico --colors 16 icon-64.png icon-32.png icon-16.png
```
Примечание. Разница в размере файла для добавления значка размера 64x64 увеличила файл на 2kb. Я бы просто использовал 32x32 и 16x16. (Запустите тот же код, что и выше, удалив icon-64.png)
Возьмите файл favicon.ico из папки png2ico. Загрузите его на сервер, добавьте <link rel="shortcut icon" href="http://example.com/favicon.ico" /> в заголовок, и вы хорошо пойдете.

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

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

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

Ответ 2

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

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

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

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

Ответ 3

Или вы можете просто войти в любой 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 для получения дополнительной информации о значке.

Ответ 4

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

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

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

Ответ 5

Пакетный файл 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")

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