1 заметка с тегом

Фавиконка

grunt-favicons

27 августа 2013, 2:16

Добавил ли фавиконку? Есть ли версия иконки для айфона? Есть ли иконки нужного размера? Какой программой быстро сделать мультиразмерную фавиконку?

На все эти вопросы приходилось отвечать перед завершением каждого проекта. Чеклист чеклистом, но ситуация требовала автоматизации. Была изучена матчасть по иконкам, их форматам и размерам, которая позже переросла в баш-скрипт. А потом и в плагин для гранта.

Итак, grunt-favicons.

Устанавливается как обычно:

npm install grunt-favicons --save-dev

Чтобы всё работало, требуется установить imagemagick.

На маке:
brew install imagemagick
на линуксе:
apt-get install imagemagick

Фичи

Пример таска с опциями по-умолчанию:

favicons: {
    production: {
        options: {
            html: 'deploy/index.html',
            HTMLPrefix: "/img/favicon/",
            trueColor: false,
            precomposed: true,
            appleTouchBackgroundColor: "auto", // none, auto, #color
            windowsTile: true,
            tileBlackWhite: true,
            tileColor: "auto" // none, auto, #color
        },
        src: 'site/img/favicon.png',
        dest: 'deploy/img/favicon'
    }
}

Плагин берет картинку «src» и помещает в «dest» результаты своих трудов:

  • 265-цветный favicon.ico с разрешениями 16x16, 32x32, 48x48;
  • favicon.png 64x64;
  • apple-touch-icon-xxx.png всех возможных разрешений включая 120x120 для iOS7;
  • windows-tile-144x144.png для тайла в Windows 8.

Опции

По порядку:

html

HTML-файл, в который необходимо добавить теги со ссылками на зоопарк иконок.

HTMLPrefix

Путь, который приписывать в HTML перед адресами всех файлов. Очень нехватает подобной опции во многих плагинах.

trueColor

Булевая опция. Если включена, то favicon.ico будет содержать полноцветные картинки с альфа-каналом. В противном случает будет 256 цветов. Полноцветная иконка будет весить более 15Кб против 7Кб обычной.

precomposed

Булевая опция. В iOS6 и ниже при сохранении иконки накладывались различные эффекты. Опция включена, то все эффекты выключаются и иконка выглядит как изначально задумано.

appleTouchBackgroundColor

Иконки в iOS непрозрачные и им нужен задний фон. Мой плагин заботливо определит доминирующий цвет, подкрутит контраст и выставит его фоном.
Фон также можно указать вручную или вообще не указывать — тогда iOS сделает его черным.

windowsTile

Нужно ли делать плитку для Виндоус 8?

tileBlackWhite

Сделать иконку для плитки монохромной.

tileColor

Задний фон для плитки. Значения аналогичны параметру appleTouchBackgroundColor, только немного отличается метод поиска цвета.


Форкай
@
Пуллреквесть
https://github.com/gleero/grunt-favicons