Skip to content

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

@nekomeowww

Description

@nekomeowww

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    difficulty/hardHard to deal with / implement againstenhancementNew feature or requesthelp wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions