search

quasarframework / icongenie

CLI tool to generate all the icons and splashscreens for your Quasar Apps
https://quasar.dev/icongenie/introduction
MIT License
182 stars 17 forks source link

Favicon.ico is glitchy #76

Closed TatiFKNavarro closed 5 years ago

TatiFKNavarro commented 5 years ago

After running quasar dev to run the spa (on windows), the favicon.ico generated is this one image While this is our icon image No error message is shown on terminal, and all the other images generated are normal.

nothingismagick commented 5 years ago

That sounds like something I repaired a while ago. Can you please post your quasar info

TatiFKNavarro commented 5 years ago

Here it is

Operating System - Windows_NT(10.0.18362) - win32/x64
NodeJs - 11.10.1

Global packages
  NPM - 6.7.0
  yarn - 1.16.0
  @quasar/cli - 1.0.0-rc.2  cordova - 9.0.0

Important local packages
  quasar - 1.0.0-rc.5 -- High performance, Material Design 2, full front end stack with Vue.js -- build SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
  @quasar/app - 1.0.0-rc.7 -- Quasar Framework App CLI
  @quasar/extras - 1.1.3 -- Quasar Framework fonts, icons and animations
  vue - 2.6.10 -- Reactive, component-oriented view layer for modern web interfaces.
  vue-router - 3.0.6 -- Official router for Vue.js 2
  vuex - 3.1.1 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.4.5 -- Babel compiler core.
  webpack - 4.34.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 3.7.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 4.3.1 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.6.2 -- Script for registering service worker, with hooks

Quasar App Extensions
  @quasar/quasar-app-extension-qcalendar - 1.0.0-alpha.13 -- QCalendar Quasar app extension
  quasar-app-extension-qdatetimepicker - 1.0.0-beta.2 -- QDatetimePicker for Quasar
  @quasar/quasar-app-extension-icon-genie - 1.0.0 -- A Quasar CLI Extension for Making All Your Icons

Networking
  Host - TATINAVARRO
  vEthernet (DockerNAT) - 10.0.75.1
  VirtualBox Host-Only Network - 192.168.56.1
  Ethernet - 192.168.0.28
  vEthernet (Default Switch) - 172.17.103.17
nothingismagick commented 5 years ago

Hmm. That all looks good. Can you also paste the contents of your quasar.extensions.json?

Thanks for reporting!

TatiFKNavarro commented 5 years ago

Thank you for looking into it!

{
  "@quasar/qcalendar": {},
  "qdatetimepicker": {},
  "@quasar/icon-genie": {
    "minify_dev": "optipng",
    "minify_build": "optipng",
    "cordova": {
      "background_color": "#000000",
      "splashscreen_type": "generate"
    },
    "build_always": true,
    "__internal": {
      "dev": {
        "spa": {
          "iconHash": "5db2f0e756f31caed723c69c7799a441"
        }
      },
      "build": {}
    }
  }
}
nothingismagick commented 5 years ago

Can you please zip the png source file and the favicon it made. Then attach to a new comment ? I really hope this isn't a color depth issue. I'll look at it first thing tomorrow morning.

Are you on our discord server? If so it'd be good to have you around so I can verify that the fix is working properly.

TatiFKNavarro commented 5 years ago

icon.zip

I am not there right now, but I can enter when you need it

nothingismagick commented 5 years ago

So, using your icon I could confirm that the favicon.ico which is created by icon-genie is mangled.

My hunch: It's the color space and GIMP being shady.

Workaround until we get this figured out: Run quasar dev -m electron

and copy /src-electron/icons/icon.ico to your /src/statics/icons/favicon.ico

I can confirm that the icon.ico works on Mac chrome, but before I can actually demote the offending function, I need to be certain it works everywhere. Be sure to force refresh your browser to make sure the favicon is being shown.

I have never seen this specific behaviour before, so it is a bit troubling. However, I never put it past Gimp to mess stuff up. What png profile did you use to save your icon?

Here is some research that may help us (I removed your XMP sidecar fingerprints from the results)

$ exiftool your-broken/app-icon.png
ExifTool Version Number         : 11.11
File Name                       : app-icon.png
Directory                       : your-broken
File Size                       : 139 kB
File Modification Date/Time     : 2019:06:18 15:08:52+02:00
File Access Date/Time           : 2019:06:18 15:08:52+02:00
File Inode Change Date/Time     : 2019:06:28 09:56:37+02:00
File Permissions                : rwxr-xr-x
File Type                       : PNG
File Type Extension             : png
MIME Type                       : image/png
Image Width                     : 1240
Image Height                    : 1240
Bit Depth                       : 8
Color Type                      : RGB
Compression                     : Deflate/Inflate
Filter                          : Adaptive
Interlace                       : Noninterlaced
Exif Byte Order                 : Little-endian (Intel, II)
Bits Per Sample                 : 8 8 8
Orientation                     : Horizontal (normal)
X Resolution                    : 72
Y Resolution                    : 72
Resolution Unit                 : inches
Software                        : GIMP 2.10.8
Color Space                     : Uncalibrated
Exif Image Width                : 1024
Exif Image Height               : 1024
Photometric Interpretation      : YCbCr
Samples Per Pixel               : 3
Thumbnail Offset                : 338
Thumbnail Length                : 8993
XMP Toolkit                     : XMP Core 4.4.0-Exiv2
Api                             : 2.0
Platform                        : Windows
Time Stamp                      : 1560881330981028
Version                         : 2.10.8
Format                          : image/png
Color Mode                      : RGB
Create Date                     : 2019:06:13 13:21:35-03:00
Creator Tool                    : GIMP 2.10
Metadata Date                   : 2019:06:13 13:21:35-03:00
Location Created                :
Location Shown                  :
Artwork Or Object               :
Registry ID                     :
History Action                  : created, saved, saved
History Software Agent          : Adobe Photoshop CS6 (Windows), Adobe Photoshop CS6 (Windows), Gimp 2.10 (Windows)
History When                    : 2019:06:13 13:21:35-03:00, 2019:06:13 13:21:35-03:00, 2019:06:18 15:08:50
History Changed                 : /, /
Image Supplier                  :
Image Creator                   :
Copyright Owner                 :
Licensor                        :
Pixels Per Unit X               : 2835
Pixels Per Unit Y               : 2835
Pixel Units                     : meters
Modify Date                     : 2019:06:18 18:08:50
Image Size                      : 1240x1240
Megapixels                      : 1.5
Thumbnail Image                 : (Binary data 8993 bytes, use -b option to extract
$ exiftool our-default/app-icon.png
ExifTool Version Number         : 11.11
File Name                       : app-icon.png
Directory                       : our-default
File Size                       : 12 kB
File Modification Date/Time     : 2019:05:11 19:24:55+02:00
File Access Date/Time           : 2019:06:28 10:00:56+02:00
File Inode Change Date/Time     : 2019:05:27 20:11:14+02:00
File Permissions                : rw-r--r--
File Type                       : PNG
File Type Extension             : png
MIME Type                       : image/png
Image Width                     : 1240
Image Height                    : 1240
Bit Depth                       : 2
Color Type                      : Palette
Compression                     : Deflate/Inflate
Filter                          : Adaptive
Interlace                       : Noninterlaced
Palette                         : (Binary data 12 bytes, use -b option to extract)
Transparency                    : 255 255 255 0
Pixels Per Unit X               : 2835
Pixels Per Unit Y               : 2835
Pixel Units                     : meters
Image Size                      : 1240x1240
Megapixels                      : 1.5
TatiFKNavarro commented 5 years ago

I used automatic pixelformat

gabrielslau commented 5 years ago

I'm also having this issue using the latest quasar on windows. For me, the icons (.icon) generated in both dev and build mode are glitchy. The other images (icons and splashscreen) are fine.

nothingismagick commented 5 years ago

Fix available in Icon Genie 1.0.1