¿Qué tamaños de icono necesita una extensión de Chrome?

En resumen: una extensión de Chrome usa iconos PNG de 16, 32, 48 y 128 px. Abre el Generador de iconos de extensión de Chrome de Imgovo, añade un logotipo y descarga un ZIP con los cuatro tamaños y la parte icons de manifest.json. Todo se crea en tu navegador, así que tu logotipo no se sube nunca.

Dónde se usa cada tamaño

Según la documentación de Chrome, los cuatro tamaños tienen funciones distintas:

Tamaño	Dónde aparece
16 × 16 px	Favicon en las páginas de la extensión y menú contextual
32 × 32 px	A menudo exigido en ordenadores con Windows; también se usa para el icono de la barra de herramientas en el fragmento de abajo
48 × 48 px	La página de administración de extensiones
128 × 128 px	Chrome Web Store y el cuadro de diálogo de instalación

Como el icono de 16 px es tan pequeño, los detalles finos y el texto delgado desaparecen. Un símbolo contundente o una letra funcionan mejor que un logotipo detallado.

Usa PNG, no SVG

Chrome no admite SVG para los iconos declarados en manifest.json. Aun así, puedes empezar con un logotipo SVG: el generador lo dibuja a cada tamaño y guarda archivos PNG. Si quieres convertir un SVG tú mismo, el Convertidor de SVG lo hace con un ancho exacto.

Paso a paso

1. Abre el Generador de iconos de extensión de Chrome y suelta un logotipo en la página, haz clic para elegirlo o pégalo desde el portapapeles. Una imagen cuadrada con fondo transparente funciona mejor.
2. En Forma, elige Ajustar la imagen completa para conservar todo el logotipo, o Recortar a cuadrado para rellenar el cuadrado.
3. Elige un Fondo: transparente o un color.
4. Escribe la Carpeta de los iconos en tu extensión, por ejemplo icons/. Usa un nombre de carpeta sencillo, sin espacios y sin dirección web.
5. Ajusta el margen interior y las Esquinas redondeadas. Usa menos margen en los iconos pequeños.
6. Revisa las cuatro vistas previas en Iconos.
7. Haz clic en Descargar iconos (ZIP).

Añade los iconos a manifest.json

El ZIP contiene los cuatro archivos PNG y un archivo llamado manifest-icons.json. Las mismas líneas aparecen también en Añadir a tu manifest.json, con el botón Copiar. Tienen dos partes: la clave icons (tamaños y rutas) y la clave action (el icono de la barra de herramientas).

El resultado se parece a esto. Los nombres de archivo de tu propio paquete pueden diferir, así que copia las líneas que te da la herramienta:

{
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon-16.png",
      "32": "icons/icon-32.png"
    }
  }
}

No es un manifiesto completo. Copia las partes icons y action en tu propio manifest.json, crea la carpeta en tu extensión y coloca en ella los archivos PNG.

Firefox y Edge

Sus formatos de extensión también usan una clave icons con archivos PNG, pero cada tienda tiene sus propias reglas de revisión y puede pedir tamaños adicionales. Consulta la documentación de la tienda en la que publicas. Imgovo solo crea los iconos; no envía ni aprueba nada.

Lista de comprobación antes de publicar

• Los cuatro archivos PNG existen en la carpeta indicada en manifest.json.
• El icono de 16 px sigue siendo legible sobre fondo claro y oscuro.
• El icono coincide con el logotipo de tu ficha en la tienda.
• Has probado la extensión en tu navegador después de cambiar el manifiesto.

Privacidad

Los iconos se dibujan en tu navegador y el ZIP se crea en tu dispositivo. Tu logotipo nunca sale de tu ordenador.

Pruébalo ahora

Abre el Generador de iconos de extensión de Chrome, añade tu logotipo y descarga los cuatro tamaños en un ZIP. Para un icono de web, usa mejor el Generador de favicon.