Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Configuration for icons is not honoured #68

Closed
mirague opened this issue Mar 31, 2017 · 4 comments
Closed

Configuration for icons is not honoured #68

mirague opened this issue Mar 31, 2017 · 4 comments

Comments

@mirague
Copy link

mirague commented Mar 31, 2017 •
edited
Loading

I'm trying to limit the amount of icons generated and included in the HTML by passing in the favicon.config.icons option as listed over at haydenbleaser/favicons.

My configuration

  var app = new EmberApp(defaults, {
    ...
    favicon: {
      config: {
        appName: 'MyApp',
        icons: {
          android: true,              // Create Android homescreen icon. `boolean`
          appleIcon: true,            // Create Apple touch icons. `boolean` or `{ offset: offsetInPercentage }`
          appleStartup: false,        // Create Apple startup images. `boolean`
          coast: false,               // Create Opera Coast icon with offset 25%. `boolean` or `{ offset: offsetInPercentage }`
          favicons: true,             // Create regular favicons. `boolean`
          firefox: false,             // Create Firefox OS icons. `boolean` or `{ offset: offsetInPercentage }`
          windows: false,             // Create Windows 8 tile icons. `boolean`
          yandex: false               // Create Yandex browser icon. `boolean`
        }
      }
    },
    ...
  });

Generated files in dist folder

-rw-r--r--   1 melvin  staff    7951 Mar 31 11:19 android-chrome-144x144.png
-rw-r--r--   1 melvin  staff   10975 Mar 31 11:19 android-chrome-192x192.png
-rw-r--r--   1 melvin  staff   14635 Mar 31 11:19 android-chrome-256x256.png
-rw-r--r--   1 melvin  staff    1303 Mar 31 11:19 android-chrome-36x36.png
-rw-r--r--   1 melvin  staff   29090 Mar 31 11:19 android-chrome-384x384.png
-rw-r--r--   1 melvin  staff    2006 Mar 31 11:19 android-chrome-48x48.png
-rw-r--r--   1 melvin  staff   47302 Mar 31 11:19 android-chrome-512x512.png
-rw-r--r--   1 melvin  staff    3514 Mar 31 11:19 android-chrome-72x72.png
-rw-r--r--   1 melvin  staff    5093 Mar 31 11:19 android-chrome-96x96.png
-rw-r--r--   1 melvin  staff    6061 Mar 31 11:19 apple-touch-icon-114x114.png
-rw-r--r--   1 melvin  staff    6347 Mar 31 11:19 apple-touch-icon-120x120.png
-rw-r--r--   1 melvin  staff    7789 Mar 31 11:19 apple-touch-icon-144x144.png
-rw-r--r--   1 melvin  staff    8347 Mar 31 11:19 apple-touch-icon-152x152.png
-rw-r--r--   1 melvin  staff    9149 Mar 31 11:19 apple-touch-icon-167x167.png
-rw-r--r--   1 melvin  staff    9988 Mar 31 11:19 apple-touch-icon-180x180.png
-rw-r--r--   1 melvin  staff    2501 Mar 31 11:19 apple-touch-icon-57x57.png
-rw-r--r--   1 melvin  staff    2667 Mar 31 11:19 apple-touch-icon-60x60.png
-rw-r--r--   1 melvin  staff    3456 Mar 31 11:19 apple-touch-icon-72x72.png
-rw-r--r--   1 melvin  staff    3720 Mar 31 11:19 apple-touch-icon-76x76.png
-rw-r--r--   1 melvin  staff    9988 Mar 31 11:19 apple-touch-icon-precomposed.png
-rw-r--r--   1 melvin  staff    9988 Mar 31 11:19 apple-touch-icon.png
-rw-r--r--   1 melvin  staff   81505 Mar 31 11:19 apple-touch-startup-image-1182x2208.png
-rw-r--r--   1 melvin  staff  122147 Mar 31 11:19 apple-touch-startup-image-1242x2148.png
-rw-r--r--   1 melvin  staff  131590 Mar 31 11:19 apple-touch-startup-image-1496x2048.png
-rw-r--r--   1 melvin  staff  170681 Mar 31 11:19 apple-touch-startup-image-1536x2008.png
-rw-r--r--   1 melvin  staff   20287 Mar 31 11:19 apple-touch-startup-image-320x460.png
-rw-r--r--   1 melvin  staff   59500 Mar 31 11:19 apple-touch-startup-image-640x1096.png
-rw-r--r--   1 melvin  staff   58327 Mar 31 11:19 apple-touch-startup-image-640x920.png
-rw-r--r--   1 melvin  staff   61257 Mar 31 11:19 apple-touch-startup-image-748x1024.png
-rw-r--r--   1 melvin  staff   70583 Mar 31 11:19 apple-touch-startup-image-750x1294.png
-rw-r--r--   1 melvin  staff   70036 Mar 31 11:19 apple-touch-startup-image-768x1004.png
drwxr-xr-x  16 melvin  staff     544 Mar 31 11:19 assets
-rw-r--r--   1 melvin  staff   12924 Mar 31 11:19 coast-228x228.png
-rw-r--r--   1 melvin  staff     585 Mar 31 11:19 crossdomain.xml
drwxr-xr-x   6 melvin  staff     204 Mar 31 11:19 fastboot
-rw-r--r--   1 melvin  staff     406 Mar 31 11:19 favicon-16x16.png
-rw-r--r--   1 melvin  staff   13437 Mar 31 11:19 favicon-230x230.png
-rw-r--r--   1 melvin  staff    1083 Mar 31 11:19 favicon-32x32.png
-rw-r--r--   1 melvin  staff    5093 Mar 31 11:19 favicon-96x96.png
-rw-r--r--   1 melvin  staff   33310 Mar 31 11:19 favicon.ico
-rw-r--r--   1 melvin  staff   41200 Mar 31 11:19 favicon.png
-rw-r--r--   1 melvin  staff    7102 Mar 31 11:19 firefox_app_128x128.png
-rw-r--r--   1 melvin  staff   48951 Mar 31 11:19 firefox_app_512x512.png
-rw-r--r--   1 melvin  staff    2785 Mar 31 11:19 firefox_app_60x60.png
drwxr-xr-x  14 melvin  staff     476 Mar 30 15:40 fonts
drwxr-xr-x  11 melvin  staff     374 Mar 31 11:19 images
-rw-r--r--   1 melvin  staff    4850 Mar 31 11:19 index.html
-rw-r--r--   1 melvin  staff    7951 Mar 31 11:19 mstile-144x144.png
-rw-r--r--   1 melvin  staff   16202 Mar 31 11:19 mstile-150x150.png
-rw-r--r--   1 melvin  staff   17475 Mar 31 11:19 mstile-310x150.png
-rw-r--r--   1 melvin  staff   49075 Mar 31 11:19 mstile-310x310.png
-rw-r--r--   1 melvin  staff    6841 Mar 31 11:19 mstile-70x70.png
-rw-r--r--   1 melvin  staff    1015 Mar 31 11:19 package.json
-rw-r--r--   1 melvin  staff      51 Mar 31 11:19 robots.txt
-rw-r--r--   1 melvin  staff     681 Mar 31 11:19 testem.js
drwxr-xr-x   3 melvin  staff     102 Mar 31 11:19 tests
-rw-r--r--   1 melvin  staff    2129 Mar 31 11:19 yandex-browser-50x50.png

Generated HTML

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title">
<link rel="icon" type="image/png" sizes="228x228" href="/coast-228x228.png">
<link rel="manifest" href="/manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#fff">
<meta name="application-name">
<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json">
<meta name="msapplication-TileColor" content="#fff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/apple-touch-startup-image-320x460.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/apple-touch-startup-image-640x920.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/apple-touch-startup-image-640x1096.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple-touch-startup-image-750x1294.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/apple-touch-startup-image-1182x2208.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/apple-touch-startup-image-1242x2148.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/apple-touch-startup-image-748x1024.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/apple-touch-startup-image-768x1004.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/apple-touch-startup-image-1496x2048.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/apple-touch-startup-image-1536x2008.png">

Issues

Based on my config:

  • I'd expect no yandex-browser-manifest.json reference in the HTML, however this file is not generated.
  • I'd expect no apple-touch-startup-image references in the HTML, nor should they be generated.
  • I'd expect no coast-228x228.png references in the HTML, nor should it be generated.
  • I'd expect no firefox references in the HTML, nor should the files be generated.
@mirague
Copy link
Author

mirague commented Mar 31, 2017

Any clue what I could be doing wrong? @davewasmer

@mirague
Copy link
Author

mirague commented Mar 31, 2017

I just realised the README.md is wrong in that it lists:

    favicon: {    <-- notice non-plural
      config: {  
         ...
      }
    }

but broccoli-favicon expects:

    favicons: {                <-- plural 
      faviconsConfig: {   <-- verbose
         ...
      }
    }

We either need to update this plugin to convert favicon.config to favicons.faviconsConfig before its passed into Broccoli, or we need to update the README.md to reflect the above requirement.

@mirague mirague mentioned this issue Mar 31, 2017
Merged
@davewasmer
Copy link
Owner

Closing since this seems fixed

@KyuubiKeith
Copy link

hey...im new to ember and am starting to get the hang of things, so...I installed ember-cli-title and im not sure what happenned but favicons are not being rendered any more, after uninstalling the title package everything goes back to normal but I dont understand what breaks it, I really want to use them side by side. Any help on this would be appreciated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mirague @davewasmer @KyuubiKeith