integrations icon indicating copy to clipboard operation
integrations copied to clipboard

feature request: dedicated plugin to transform one single favicon into generalized meta

Open nekomeowww opened this issue 7 months ago • 0 comments

Currently, users must replace these things one by one, and use their own tools to create dedicated favicons, pwa icons, different icons etc, why can we have one single plugin to do this all?

Apparently me and @LittleSound will choose to use https://realfavicongenerator.net/ for most of the time, it still requires us to manually operate, click, navigate, configure, fill in every pieces of fields.

['meta', {
      name: 'theme-color',
      content: '#ffffff',
    }],
    [
      'link',
      {
        rel: 'apple-touch-icon',
        href: '/apple-touch-icon.png',
        sizes: '180x180',
      },
    ],
    ['link', {
      rel: 'icon',
      href: '/logo.svg',
      type: 'image/svg+xml',
    }],
    [
      'link',
      {
        rel: 'alternate icon',
        href: '/favicon.ico',
        type: 'image/png',
        sizes: '16x16',
      },
    ],
    [
      'link',
      {
        rel: 'mask-icon',
        href: '/safari-pinned-tab.svg',
        color: '#927baf',
      },
    ],
    ['link', {
      rel: 'manifest',
      href: '/site.webmanifest',
    }],
    ['meta', {
      name: 'msapplication-TileColor',
      content: '#603cba',
    }],
  ],

PS: perhaps related to vitepress-plugin-meta, but not quite the same, can be integrated into.

Workflow may look like this:

  1. Find image
  2. Generate corresponding favicon.ico, apple-touch-icon, mask-icon, icon, alternate icon
  • Allow users to configure masking color, margins of images, etc.
  1. Generate dedicated config site.webmanifest
  2. Apply theme colors?
  3. Finish the output.
  4. Generate head tags
  5. How to put all of these things all together? transformPageHead? Any viable way?

nekomeowww avatar Jul 14 '24 06:07 nekomeowww