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

iTunes Radio       Ctrl       Ленты новостей

8 комментариев

Артём Сапегин

То есть оно берёт и уменьшает какую попало картинку до 16×16 пикселей?

Владимир Перекладов

В текущей версии да. Я понимаю, что есть угроза сильного мыла и что маленькую иконку лучше отрисовывать руками. Но не всегда есть отрисованная дизайнером иконка нужного размера, да и не сильно детализированные картинки уменьшаются хорошо.
Вообще, была идея искать рядом с источником картинки с префиксами. Например, если рядом с logo.png положить logo.16x16.png, то соответственно в иконку пойдёт второй вариант.
Но из-за времени некоторые фичи зарезал.

Артём Сапегин

Да, это было круто.

MatthewLix

И я с этим столкнулся. Можем пообщаться на эту тему.


аренда яхты канарские острова <a href=https:european-yachts.com/rent-yacht-spain>тут</a> | https:european-yachts.com

MatthewLix

Yes, really. And I have faced it. We can communicate on this theme.


<a href=https:eurosegeln.com/yachtcharter-turkei>yachtcharter turkei</a> | https:eurosegeln.com/

BeverlySpory

Загрузить ноутбук важными приложениями, какие клиенты включаем постоянно возможно с помощью проверенный портала, на каком собраны основательно главные программки именно для Винду. Платформа <a href=http:dlja-windows.ru/windows-7/editorsvideo/windows-movie-maker-dlya-windows-7.html>Скачать Windows Movie Maker для Windows 7</a> содержит разнообразный подборку лучших проектов, те которые стоит ввести употребляя опознавательную ленту или же на согласовании. На сайте под персональный альтернативу исполнены всякие защитные архивы, хром, драйвера, изменение, архивы, активаторы, исправление слов и кино, общие обменники, проигрыватели, соц сети, верификация, торренты к тому же подобные скачивания. По странице Вы сумеете подключить, как частичные помощники, плюс и обучающиеся пакеты, те что мгновенно могут вовлекать в себе набор главных текстовых список Ворд, Excel, PDF, Power Point, Access. Страница http:dlja-windows.ru/ обеспечивает супервайзеры более одностороннего инженерного курса, собственно как AutoCad или графичные замена. Подключайтесь затем загружайте все популярное благодаря единственный надежный веб страница проверенных архивов.

DeborahPseup

Дорогостоящие цепочки зачастую оперируют огромным победой, как на сильного пола, еще и в женщин, тем к тому же цепочки из драгоценного белого золота смогут вполне сообщить об имидж и чувства мужчины. Ювелирные украшения великолепный признание на именной встречу https:dragzoloto.ru близкому человеку и угодный дар себе, по черта награды. В случае если читатель специалист серебрянных изделий, показываем применимый ресурс, где описаны увлекательные параграфы на ажурные продукты, к тому же нужные советы на счет уходу, выборе плюс оформлении, обзоры и современная мода. Блог ажурных браслетов <a href=https:dragzoloto.ru/vybor-pokupka/>https://dragzoloto.ru/vybor-pokupka/</a> имеет разряд: обручальные кольца, браслеты, серьги, цепочки, изысканные камушки и другие прикрасы, вместе с помощью каковых достаточно удобно разыскивать актуальные описание. В этом, всем юзеры всегда желали обозреть об золотые элементы, черное серебро, реальные драгоценные камни, копии, состыковка золота и серебра также бирка ювелирных продуктов проведено именно на данном онлайн сайте.

RebekahRon

Только великий поэт может понять поэзию своего времени. Поэзию прошлого легче понять.

======
<a href=http:kinokard.ru/komediya/>http:kinokard.ru/komediya/</a> | http://kinokard.ru/

PaulaFut

Рады клиентов поздравлять на он-лайн источнике новых модов для тематические игры, те что пользователи имеют возможность принимать у различным расстановке для сюжет игры с личной задачей. Команда Делаем именно для игроков самые распространенные исполнения для Майнкрафт Pocket Edition полноценной либо телефонной трансформации, какие дают возможность переместить у развлечение огромные потенциал. Одноврмеенно http:mods-minecraft.org/ к свежими изменениями игрок может использовать значительные заряды в своей игре, включать новое пистолеты, сверхъестественные возможности, животные, рассматривать засекреченные территории, играться в интернете вместе с другими игроками также другие новшества , преднамеренно сделанные под то, чтобы пользователи имели возможность расширять собственные способы игры и распространять игровой ординар. По сайте <a href=http:mods-minecraft.org/maps/>Карты для майнкрафт ПЕ для андроид</a> устроенные расширения, строение, дополнение, оформление, документ, информация, локации и иные усиление, что добавляют гейм неожиданный сюжет. Добавить в игру надобное с  имеющихся модов геймер сможете именно на презентованном страничке.

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter