favicon

Gere um conjunto completo de favicons a partir da imagem de origem em $1 e atualize o HTML do projeto com as tags de link apropriadas.

Quando Usar

• Você precisa gerar um conjunto completo de favicons a partir de uma única imagem de origem.
• A tarefa inclui colocar os ativos no diretório estático correto específico do framework e atualizar as tags de link do HTML.
• Você deseja um fluxo de trabalho que valide a imagem de origem, detecte o tipo de projeto e escreva as saídas de favicon corretas.

Pré-requisitos

Primeiro, verifique se o ImageMagick v7+ está instalado executando:

which magick

Se não for encontrado, pare e instrua o usuário a instalá-lo:

• macOS: brew install imagemagick
• Linux: sudo apt install imagemagick

Passo 1: Validar Imagem de Origem

1. Verifique se a imagem de origem existe no caminho fornecido: $1
2. Verifique se a extensão do arquivo é um formato suportado (PNG, JPG, JPEG, SVG, WEBP, GIF)
3. Se o arquivo não existir ou não for um formato de imagem válido, relate o erro e pare

Observe se a origem é um arquivo SVG - se for, ele também será copiado como favicon.svg.

Passo 2: Detectar Tipo de Projeto e Diretório de Ativos Estáticos

Detecte o tipo de projeto e determine onde os ativos estáticos devem ser colocados. Verifique nesta ordem:

Importante: Se arquivos de favicon existentes forem encontrados (por exemplo, favicon.ico, apple-touch-icon.png), use a localização deles como o diretório de destino, independentemente da detecção do framework.

Relate o tipo de projeto detectado e o diretório de ativos estáticos que será usado.

Em caso de dúvida, pergunte: Se você não tiver 100% de certeza sobre onde os ativos estáticos devem ser colocados (por exemplo, estrutura de projeto ambígua, múltiplos locais potenciais, framework desconhecido), use AskUserQuestionTool para confirmar o diretório de destino antes de prosseguir. É melhor perguntar do que colocar arquivos no lugar errado.

Passo 3: Determinar o Nome do Aplicativo

Encontre o nome do aplicativo nestas fontes (em ordem de prioridade):

1. site.webmanifest existente - Verifique o diretório de ativos estáticos detectado em busca de um manifesto existente e extraia o campo name
2. package.json - Extraia o campo name se ele existir
3. Rails config/application.rb - Extraia o nome do módulo (por exemplo, module MyApp → "MyApp")
4. Nome do diretório - Use o nome do diretório de trabalho atual como fallback

Converta o nome para maiúsculas e minúsculas, se necessário (por exemplo, "meu-app" → "Meu App").

Passo 4: Garantir a Existência do Diretório de Ativos Estáticos

Verifique se o diretório de ativos estáticos detectado existe. Se não existir, crie-o.

Passo 5: Gerar Arquivos de Favicon

Execute estes comandos do ImageMagick para gerar todos os arquivos de favicon. Substitua [STATIC_DIR] pelo diretório de ativos estáticos detectado na Etapa 2.

Importante: A flag -background none deve vir ANTES do arquivo de entrada para preservar corretamente a transparência ao renderizar SVGs. Colocá-la após a entrada resultará em um fundo branco.

favicon.ico (multi-resolução: 16x16, 32x32, 48x48)

magick -background none "$1" \
  \( -clone 0 -resize 16x16 \) \
  \( -clone 0 -resize 32x32 \) \
  \( -clone 0 -resize 48x48 \) \
  -delete 0 -alpha on \
  [STATIC_DIR]/favicon.ico

favicon-96x96.png

magick -background none "$1" -resize 96x96 -alpha on [STATIC_DIR]/favicon-96x96.png

apple-touch-icon.png (180x180)

magick -background none "$1" -resize 180x180 -alpha on [STATIC_DIR]/apple-touch-icon.png

web-app-manifest-192x192.png

magick -background none "$1" -resize 192x192 -alpha on [STATIC_DIR]/web-app-manifest-192x192.png

web-app-manifest-512x512.png