Tamaños de iconos para extensiones de Chrome

Una extensión de Chrome puede mostrar un logotipo nítido de 128 píxeles en un lugar y convertirse en un cuadrado borroso en la barra de herramientas. Eso suele indicar que el problema son las dimensiones de los recursos, no la marca: elegir correctamente los tamaños de los iconos de las extensiones de Chrome implica tratar los recursos de la barra de herramientas, de la extensión y de la tienda como funciones relacionadas pero distintas.

Estos recursos no son favicons de sitios web. El estándar HTML define rel='icon' como una relación de enlace de página, mientras que una extensión declara sus iconos en manifest.json y puede definir recursos de action independientes. Si también necesitas el icono del sitio, nuestra guía de tamaños de favicon cubre esa configuración aparte.

Tamaños de los iconos de las extensiones de Chrome: qué hace cada recurso

Para una extensión, los tamaños de los iconos son las dimensiones en píxeles de los archivos proporcionados para distintos contextos de UI y empaquetado. Una dimensión no determina por sí sola la ubicación; de eso se encargan la propiedad del manifest y la superficie que solicita el recurso.

• Recursos del manifest: son los recursos generales de la extensión declarados en el objeto icons de nivel superior. Mantén la coherencia de este conjunto de identidad.
• Recursos de action: el símbolo de la barra de herramientas, proporcionado mediante action.default_icon cuando debe diferir del icono general.
• Recursos de la tienda: un PNG de 128x128 preparado para el flujo de trabajo de publicación en Chrome Web Store. Trátalo como un entregable independiente, en lugar de asumir que el paquete proporciona todos los recursos necesarios para el listado.

El punto de partida conservador es 16x16, 24x24, 32x32, 48x48 y 128x128 píxeles. Son tamaños de trabajo recomendados, no una regla universal de visualización.

Por qué importan los tamaños de los iconos de las extensiones

Los tamaños pequeños hacen que desaparezcan los detalles. Las letras finas, los trazos delgados y un símbolo complejo pueden fundirse en una mancha de color a 16 píxeles. Si falta un archivo del tamaño exacto, el navegador debe escalar una imagen disponible, y ese recurso de reserva puede verse blando o desenfocado.

Un conjunto útil separa el propósito de la resolución. Usa recursos compactos que se adapten a la densidad de la barra de herramientas, una familia coherente para las superficies generales de la extensión y un cuadrado de alta resolución para la presentación en la tienda. Así, cada exportación tiene una función definida en lugar de depender de un único archivo sobredimensionado que tenga que encajar en todos los espacios.

Cómo crear el conjunto de iconos en manifest.json

En Manifest V3, las claves numéricas de icons declaran las dimensiones en píxeles de los archivos referenciados. Las rutas son relativas a la raíz de la extensión y deben coincidir exactamente con los nombres de archivo, teniendo en cuenta las mayúsculas y minúsculas. Este ejemplo conservador separa las piezas gráficas de identidad de las destinadas a la barra de herramientas:

{
  "manifest_version": 3,
  "name": "Sample Extension",
  "version": "1.0.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "action": {
    "default_title": "Run Sample Extension",
    "default_icon": {
      "16": "images/action-16.png",
      "24": "images/action-24.png",
      "32": "images/action-32.png"
    }
  }
}

El objeto icons proporciona a Chrome varias representaciones de uso general. El mapa default_icon aporta representaciones con mayor densidad visual para la barra de herramientas a 16, 24 y 32 píxeles, donde un símbolo simplificado puede resultar más legible que el logotipo completo. Si omites un icono específico de action, el icono general puede servir como fallback, por lo que declarar el conjunto de iconos de la barra de herramientas te ofrece un control visual más preciso.

No copies la sintaxis del favicon de un sitio web al manifest. El atributo sizes pertenece a HTML, como en <link rel='icon' sizes='32x32' ...>, y no al mapa JSON. Del mismo modo, un archivo .ico que funciona como favicon no es automáticamente el recurso adecuado para una extensión; PNG es el formato conservador para el paquete.

Prácticas recomendadas para un icono de extensión coherente

• Diseña primero para 16 píxeles. Reduce la marca a una silueta clara, con colores limitados y formas que sigan siendo distinguibles en toolbars claros y oscuros. Después, refina las exportaciones de mayor tamaño.
• Centra el icono ópticamente. Aunque el padding sea igual en términos matemáticos, la marca todavía puede parecer baja o apretada. Compara cada variante en una vista previa con el tamaño real del toolbar.
• Haz coincidir las dimensiones del archivo. Un archivo llamado icon-32.png debe medir 32x32 píxeles, y la clave de su manifest debe indicar 32. Comprueba también la ruta del paquete.
• Mantén una única familia visual. Los gráficos para el toolbar, la gestión de extensiones y la tienda deben compartir geometría y color, aunque la versión más pequeña elimine los adornos.
• Verifica lo que empaquetas. Carga la extensión desempaquetada, inspecciona chrome://extensions y confirma que cada imagen referenciada esté presente en el ZIP. Recarga la extensión después de los cambios.

Usa Mzu favicondl para exportar variantes PNG desde un origen SVG o PNG limpio. Si el sitio también necesita un favicon, la guía de código HTML para favicons cubre su ruta de marcado independiente.

Si un icono no aparece después de la instalación, comprueba primero la sintaxis JSON y luego verifica los archivos, las rutas y las dimensiones. Recargar la página web subyacente no necesariamente recarga los metadatos empaquetados de la extensión, así que usa el control de recarga de la extensión mientras realizas las pruebas.

Conclusión: publica un conjunto de iconos bien pensado

Los tamaños de los iconos de las extensiones de Chrome importan porque los contextos del toolbar, la gestión de extensiones y la tienda tienen presupuestos visuales distintos. Un conjunto práctico de archivos PNG de 16, 24, 32, 48 y 128 píxeles proporciona a Chrome los gráficos de origen exactos en lugar de obligarlo a usar un único archivo en todos los espacios. Trata esas dimensiones como una línea base fácil de mantener, consulta las reglas de carga vigentes de Chrome Web Store antes de publicar y mantén los iconos de las extensiones separados del favicon de tu sitio web.