search

twentyhq / favicon

100% free and open-source favicon provider
https://github.com/twentyhq/twenty
MIT License
238 stars 19 forks source link

Store the correct favicon #20

Closed gitstart-twenty closed 1 year ago

gitstart-twenty commented 1 year ago

Fixes #12

gitstart-twenty commented 1 year ago

The favicon files

{
  uniquefaviconFiles: [
    {
      width: 16,
      height: 16,
      format: 'png'
    },
    {
      width: 120,
      height: 120,
      format: 'png'
    },
    {
      width: 180,
      height: 180,
      format: 'png'
    },
    {
      width: 152,
      height: 152,
      format: 'png'
    },
    {
      width: 167,
      height: 167,
      format: 'png'
    }
  ]
}

The results

{ smallestLargerThanSize: null, targetSize: 192 }
{
  smallestLargerThanSize: {
    width: 180,
    height: 180,
    format: 'png'
  },
  targetSize: 180
}
{
  smallestLargerThanSize: {
    width: 152,
    height: 152,
    format: 'png'
  },
  targetSize: 128
}
{
  smallestLargerThanSize: {
    width: 120,
    height: 120,
    format: 'png'
  },
  targetSize: 64
}
{
  smallestLargerThanSize: {
    width: 120,
    height: 120,
    format: 'png'
  },
  targetSize: 32
}
{
  smallestLargerThanSize: {
    width: 120,
    height: 120,
    format: 'png'
  },
  targetSize: 16
}
gitstart-twenty commented 1 year ago

@charlesBochet Why would we opt to return the largest smaller than a given size and then resize it to match the size if a favicon with the same dimensions is already present. For example, with the example above, we already have a 16 x 16, but we instead resize the 120 x 120 to 16 x 16?

charlesBochet commented 1 year ago

@gitstart-twenty sorry if it wasn't clear in the ticket: find the smallest bigger or EQUAL to the target size. So your example is correct, except that for 16x16, we would like to return the 16x16

Your PR looks good, except that size comparaison should be not strict.

Have you tested with a few domaines like:

gitstart-twenty commented 1 year ago

Some manual tests

linkedin.com

[ 'https://static.licdn.com/aero-v1/sc/h/al2o9zrvru7aqj8e1x2rzsrca' ]
{ targetSize: 192, smallestLargerThanSize: null }
{ targetSize: 180, smallestLargerThanSize: null }
{ targetSize: 128, smallestLargerThanSize: null }
{
  targetSize: 64,
  smallestLargerThanSize: {
    url: 'https://static.licdn.com/aero-v1/sc/h/al2o9zrvru7aqj8e1x2rzsrca',
    width: 64,
    height: 64,
    format: 'png'
  }
}
{
  targetSize: 32,
  smallestLargerThanSize: {
    url: 'https://static.licdn.com/aero-v1/sc/h/al2o9zrvru7aqj8e1x2rzsrca',
    width: 64,
    height: 64,
    format: 'png'
  }
}
{
  targetSize: 16,
  smallestLargerThanSize: {
    url: 'https://static.licdn.com/aero-v1/sc/h/al2o9zrvru7aqj8e1x2rzsrca',
    width: 64,
    height: 64,
    format: 'png'
  }
}

microsoft.com

[ 'https://www.microsoft.com/favicon.ico?v2' ]
{ targetSize: 192, smallestLargerThanSize: null }
{ targetSize: 180, smallestLargerThanSize: null }
{
  targetSize: 128,
  smallestLargerThanSize: {
    url: 'https://www.microsoft.com/favicon.ico?v2',
    width: 128,
    height: 128,
    format: 'png'
  }
}
{
  targetSize: 64,
  smallestLargerThanSize: {
    url: 'https://www.microsoft.com/favicon.ico?v2',
    width: 128,
    height: 128,
    format: 'png'
  }
}
{
  targetSize: 32,
  smallestLargerThanSize: {
    url: 'https://www.microsoft.com/favicon.ico?v2',
    width: 128,
    height: 128,
    format: 'png'
  }
}
{
  targetSize: 16,
  smallestLargerThanSize: {
    url: 'https://www.microsoft.com/favicon.ico?v2',
    width: 128,
    height: 128,
    format: 'png'
  }
}

airbnb.fr

[
  'https://a0.muscache.com/airbnb/static/icons/apple-touch-icon-76x76-3b313d93b1b5823293524b9764352ac9.png'
]
{ targetSize: 192, smallestLargerThanSize: null }
{ targetSize: 180, smallestLargerThanSize: null }
{ targetSize: 128, smallestLargerThanSize: null }
{
  targetSize: 64,
  smallestLargerThanSize: {
    url: 'https://a0.muscache.com/airbnb/static/icons/apple-touch-icon-76x76-3b313d93b1b5823293524b9764352ac9.png',
    width: 76,
    height: 76,
    format: 'png'
  }
}
{
  targetSize: 32,
  smallestLargerThanSize: {
    url: 'https://a0.muscache.com/airbnb/static/icons/apple-touch-icon-76x76-3b313d93b1b5823293524b9764352ac9.png',
    width: 76,
    height: 76,
    format: 'png'
  }
}
{
  targetSize: 16,
  smallestLargerThanSize: {
    url: 'https://a0.muscache.com/airbnb/static/icons/apple-touch-icon-76x76-3b313d93b1b5823293524b9764352ac9.png',
    width: 76,
    height: 76,
    format: 'png'
  }
}

giphy.com

[
  'https://giphy.com/static/img/favicon.png',
  'https://giphy.com/static/img/icons/apple-touch-icon-120px.png',
  'https://giphy.com/static/img/icons/apple-touch-icon-180px.png',
  'https://giphy.com/static/img/icons/apple-touch-icon-152px.png',
  'https://giphy.com/static/img/icons/apple-touch-icon-167px.png',
  'https://giphy.com/favicon.ico',
  'https://giphy.com/static/img/icons/apple-touch-icon-120px.png'
]
{ targetSize: 192, smallestLargerThanSize: null }
{
  targetSize: 180,
  smallestLargerThanSize: {
    url: 'https://giphy.com/static/img/icons/apple-touch-icon-180px.png',
    width: 180,
    height: 180,
    format: 'png'
  }
}
{
  targetSize: 128,
  smallestLargerThanSize: {
    url: 'https://giphy.com/static/img/icons/apple-touch-icon-152px.png',
    width: 152,
    height: 152,
    format: 'png'
  }
}
{
  targetSize: 64,
  smallestLargerThanSize: {
    url: 'https://giphy.com/static/img/icons/apple-touch-icon-120px.png',
    width: 120,
    height: 120,
    format: 'png'
  }
}
{
  targetSize: 32,
  smallestLargerThanSize: {
    url: 'https://giphy.com/static/img/icons/apple-touch-icon-120px.png',
    width: 120,
    height: 120,
    format: 'png'
  }
}
{
  targetSize: 16,
  smallestLargerThanSize: {
    url: 'https://giphy.com/favicon.ico',
    width: 16,
    height: 16,
    format: 'png'
  }
}

janestreet.com

[
  'https://www.janestreet.com/assets/logo-icon-bg.png',
  'https://www.janestreet.com/favicon.ico',
  'https://www.janestreet.com/assets/logo-icon-bg.png'
]

{
  targetSize: 192,
  smallestLargerThanSize: {
    url: 'https://www.janestreet.com/assets/logo-icon-bg.png',
    width: 681,
    height: 681,
    format: 'png'
  }
}
{
  targetSize: 180,
  smallestLargerThanSize: {
    url: 'https://www.janestreet.com/assets/logo-icon-bg.png',
    width: 681,
    height: 681,
    format: 'png'
  }
}
{
  targetSize: 128,
  smallestLargerThanSize: {
    url: 'https://www.janestreet.com/assets/logo-icon-bg.png',
    width: 681,
    height: 681,
    format: 'png'
  }
}
{
  targetSize: 64,
  smallestLargerThanSize: {
    url: 'https://www.janestreet.com/assets/logo-icon-bg.png',
    width: 681,
    height: 681,
    format: 'png'
  }
}
{
  targetSize: 32,
  smallestLargerThanSize: {
    url: 'https://www.janestreet.com/assets/logo-icon-bg.png',
    width: 681,
    height: 681,
    format: 'png'
  }
}
{
  targetSize: 16,
  smallestLargerThanSize: {
    url: 'https://www.janestreet.com/assets/logo-icon-bg.png',
    width: 681,
    height: 681,
    format: 'png'
  }
}

github.com

[
  'https://github.githubassets.com/favicons/favicon.svg',
  'https://github.com/favicon.ico',
  'https://github.githubassets.com/favicons/favicon.svg'
]
{
  targetSize: 192,
  smallestLargerThanSize: {
    url: 'https://github.githubassets.com/favicons/favicon.svg',
    width: 32,
    height: 32,
    format: 'svg'
  }
}
{
  targetSize: 180,
  smallestLargerThanSize: {
    url: 'https://github.githubassets.com/favicons/favicon.svg',
    width: 32,
    height: 32,
    format: 'svg'
  }
}
{
  targetSize: 128,
  smallestLargerThanSize: {
    url: 'https://github.githubassets.com/favicons/favicon.svg',
    width: 32,
    height: 32,
    format: 'svg'
  }
}
{
  targetSize: 64,
  smallestLargerThanSize: {
    url: 'https://github.githubassets.com/favicons/favicon.svg',
    width: 32,
    height: 32,
    format: 'svg'
  }
}
{
  targetSize: 32,
  smallestLargerThanSize: {
    url: 'https://github.githubassets.com/favicons/favicon.svg',
    width: 32,
    height: 32,
    format: 'svg'
  }
}
{
  targetSize: 16,
  smallestLargerThanSize: {
    url: 'https://github.githubassets.com/favicons/favicon.svg',
    width: 32,
    height: 32,
    format: 'svg'
  }
}