Favicon y manifiesto web
Una imagen dentro, el juego completo fuera: un ICO de verdad con varios tamaños, el icono táctil de Apple aplanado como Apple lo quiere, los PNG del manifiesto, el propio manifiesto web y el bloque de HTML para pegar. También te enseña el recorte maskable de Android antes de que muerda, que es donde la mayoría de los iconos pierden los bordes sin que nadie se entere.
El círculo es hasta donde Android puede recortar. Todo lo que quede fuera puede desaparecer en algunos dispositivos.
| Archivo | Tamaño | Qué lo usa |
|---|
Por qué el .ico sigue importando
Un solo PNG basta para casi todos los navegadores, y si lo único que necesitaras fuera un icono de pestaña podrías parar ahí. El ICO se gana su sitio porque guarda varias resoluciones en un mismo archivo y es el sistema operativo el que elige la buena: la pestaña usa la de 16, un acceso directo anclado o un enlace de escritorio usa la de 32 o la de 48, y cada una se dibuja a partir de un mapa de bits hecho para ese tamaño en lugar de comprimir uno grande sobre la marcha. El archivo que sale de aquí es un contenedor de PNG con una cabecera pequeña, que es lo que lee cualquier navegador publicado en este siglo.
La zona segura del icono maskable
Android no promete mostrar tu icono como un cuadrado. Según el lanzador puede recortarlo a un círculo, a un squircle o a un cuadrado redondeado, y lo único garantizado es el círculo interior: el ochenta por ciento del ancho, centrado. El arte que llega hasta los bordes es justo el arte que pierde los bordes. La solución es dar margen a los iconos del manifiesto hasta esa zona segura, y la vista previa de aquí dibuja el recorte para que lo veas antes que un usuario.
Por qué el icono táctil de Apple no lleva transparencia
iOS compone el icono de la pantalla de inicio sobre su propia forma redondeada y no respeta el canal alfa como te gustaría: las zonas transparentes salen negras. Por eso ese archivo en concreto se aplana sobre tu color de fondo antes de codificarlo, mientras que los PNG del manifiesto conservan su alfa, que allí sí se trata bien.
Qué hacer con los archivos
Ponlos en la raíz del sitio, no en una carpeta de recursos: los navegadores y los rastreadores adivinan la ruta del favicon y algunos la piden aunque no la enlaces. Después pega el bloque de HTML en la cabecera de tu página. La ruta del manifiesto es la única línea que tiene que coincidir con el sitio donde realmente dejes el archivo.
Preguntas frecuentes
¿Sigo necesitando un favicon.ico si ya tengo PNG?
En rigor, no. En la práctica, sí: montones de rastreadores, lectores de feeds y herramientas antiguas piden el favicon por su ruta y nunca miran tu marcado. Cuesta unos pocos kilobytes.
Mi icono se ve embarrado a 16 píxeles. ¿Qué puedo hacer?
Aquí no hay nada que lo arregle, porque no hay sitio suficiente. A ese tamaño una marca tiene unos diez píxeles legibles de ancho; un logotipo con letras siempre acabará hecho papilla. Usa como origen una versión simplificada —una forma, una letra— y guarda el lockup completo para todo lo demás.
¿Debería desactivar el margen del icono maskable?
Solo si tu arte ya viene con un margen generoso de por sí. Si llena el marco, déjalo puesto, o Android se meterá a recortarlo.
¿Se sube mi imagen a algún sitio?
No. Cada tamaño se dibuja en un lienzo de esta misma página y el archivo comprimido se monta en memoria. No se envía nada.
Hecho por el equipo de GO AI. Generador de iconos de app · Redimensionador por lotes · Todas las herramientas gratuitas