El consejo más favorito es una lista de una docena de tamaños PNG copiados de un generador escrito en 2014. La mayoría de esos tamaños ya no hacen nada. Lo que un sitio necesita hoy es corto: uno favicon.ico para los navegadores y herramientas que aún lo buscan, un ícono escalable o de alta resolución para todo lo moderno, y un ícono táctil para teléfonos. La parte que hace tropezar a la gente es el .ico en sí, porque no es una imagen con una extensión extraña. Es un pequeño contenedor que contiene varias imágenes.
Esta guía cubre cómo se construye un archivo ICO, qué tamaños pertenecen a un favicon.ico y por qué, qué otros archivos de íconos necesita un sitio junto a él, y los errores que hacen que un ícono parezca suave o ilegible en la pestaña del navegador. Se encuentra debajo del centro de herramientas de imagen, y cada tamaño citado para el convertidor Toolz proviene de su código fuente.
TL;Dr: Un archivo ICO es un contenedor: un directorio corto seguido de varias imágenes cuadradas, una por tamaño, de las cuales el navegador o el sistema operativo elige la coincidencia más cercana. Para un favicon.ico, incluya 16, 32 y 48 px, y agregue 256 px si el mismo archivo también funciona como ícono de Windows. Cada entrada puede contener como máximo 256 x 256 píxeles. Además, declare un icono SVG o PNG grande y uno de 180 x 180
apple-touch-icon. los Convertidor de PNG a ICO escribe entradas de 16, 32, 48 y 256 px como PNG con transparencia, lado del cliente, nada cargado, gratis, sin registro.
¿qué es un archivo ICO?
Un archivo ICO es el formato de icono de Windows: un encabezado, un directorio que enumera cada imagen del interior y los datos de la imagen de cada entrada. Microsoft documentó el diseño en su Artículo técnico de iconos, y ha sido el formato para los íconos de carpetas, accesos directos y programas de Windows desde las primeras versiones de Windows. Los navegadores lo adoptaron para favicons a finales de la década de 1990, razón por la cual el archivo en la mayoría de los sitios web todavía se llama favicon.ico.
El directorio es lo que lo diferencia de un PNG o JPG. El software que necesita un icono de 16 píxeles lee el directorio, encuentra la entrada más cercana a 16 y dibuja esa. Una pestaña, una lista de marcadores, un botón de barra de tareas y un acceso directo de escritorio pueden tomar cada uno una imagen diferente del mismo archivo. Eso permite a un diseñador proporcionar una marca simplificada para los tamaños pequeños y otra detallada para los tamaños grandes, en lugar de permitir que una sola imagen se escale en todas partes.
El formato se conoce con dos tipos de medios. Listas de la IANA image/vnd.microsoft.icon, mientras que la mayoría de los servidores y navegadores utilizan los más antiguos image/x-icon. Ambos funcionan para un favicon.
¿cómo se estructura un archivo ICO?
Un archivo ICO comienza con un encabezado de 6 bytes, seguido de una entrada de directorio de 16 bytes por imagen, seguida de los datos de la imagen. Todos los números son little-endian.
ICONDIR (6 bytes)
reserved 2 bytes always 0
type 2 bytes 1 = icon (2 = cursor)
count 2 bytes number of images
ICONDIRENTRY (16 bytes, repeated count times)
width 1 byte pixels; 0 means 256
height 1 byte pixels; 0 means 256
colorCount 1 byte palette size; 0 when there is no palette
reserved 1 byte 0
planes 2 bytes 1
bitCount 2 bytes bits per pixel, e.g. 32
bytesInRes 4 bytes size of this image's data
imageOffset 4 bytes where this image's data starts in the file
Image data (one block per entry)
either a BMP-style DIB (without the file header)
or a complete PNG file
Dos detalles en ese diseño explican la mayoría de las cosas confusas de los íconos.
El techo de 256 píxeles proviene de un solo byte. El ancho y el alto se almacenan cada uno en un byte, que puede contener de 0 a 255. El formato reutiliza 0 para significar 256 y no hay forma de expresar nada más grande. Una entrada 512 x 512 no puede existir en una ICO válida, independientemente de lo que afirme un generador.
Las entradas pueden ser PNG. Los primeros íconos almacenaban cada imagen como un mapa de bits sin comprimir con una máscara de transparencia de 1 bit separada. Desde Windows Vista, una entrada puede contener un archivo PNG completo, que es mucho más pequeño en tamaños grandes y lleva un canal alfa adecuado. Un icono de 256 x 256 almacenado como un mapa de bits de 32 bits sin comprimir tiene aproximadamente 256 KB; la misma imagen que PNG suele ser una fracción de eso.
El convertidor Toolz escribe la variante moderna. Su constructor ICO establece el tipo 1, una entrada de directorio por tamaño con planos 1 y 32 bits por píxel, escribe 256 como 0 y almacena cada entrada como PNG con su canal alfa. Solicitarle un tamaño fuera del 1 al 256 se rechaza antes de escribir algo, porque el directorio no tiene forma de registrarlo.
¿qué tamaño debe tener un favicon?
Un favicon.ico debe contener imágenes de 16 x 16, 32 x 32 y 48 x 48, y una imagen de 256 x 256 si también desea que el archivo funcione como un ícono de Windows. Más allá del .ico, los navegadores modernos prefieren un SVG o un PNG grande declarado con una etiqueta de enlace, y los teléfonos utilizan un ícono táctil separado.
Esta tabla asigna cada tamaño al lugar donde se utiliza. El comportamiento exacto varía según el navegador, el sistema operativo y el escalado de la pantalla, así que trátelo como el caso común:
| Tamaño | Donde aparece | ¿necesario en favicon.ico? |
|---|---|---|
| 16 x 16 | Pestañas del navegador, barra de direcciones, marcadores en pantallas estándar | sí |
| 32 x 32 | Pestañas en pantallas de alta densidad, barra de tareas de Windows y accesos directos | sí |
| 48 x 48 | Atajos de escritorio de Windows, vistas de iconos medios; La Búsqueda de Google recomienda ir más grande que esto | sí |
| 256 x 256 | Vistas de iconos grandes y extra grandes de Windows | Sólo si se usa como ícono de Windows |
| 180 x 180 | Pantalla de inicio de iPhone y iPad (apple-touch-icon) |
No, PNG separado |
| 192 x 192 | Pantalla de inicio de Android, manifiesto de la aplicación web | No, PNG separado |
| 512 x 512 | Pantallas de manifiesto, instalación y salpicaduras de aplicaciones web | No, no cabe en ICO |
| Cualquiera (SVG) | Navegadores modernos que admiten iconos SVG, incluidas variantes en modo oscuro | No, SVG separado |
Pe rezultate de căutare, Google & 39;s pautas de favicon solicite un ícono cuadrado y recomiende uno de más de 48 x 48 píxeles, y Google lo buscará en el ícono declarado en su página de inicio. Un .ico que alcanza un máximo de 16 píxeles es una razón común por la que el ícono de un sitio 's se ve borroso junto al resultado de su búsqueda.
¿qué archivos favicon necesita un sitio?
Un sitio necesita tres archivos de iconos y una entrada de manifiesto para cubrir todos los navegadores y dispositivos convencionales. Casi siempre quedan más que eso.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
Cada línea tiene un trabajo:
favicon.icoes el respaldo. El Estándar HTML WHATWG permite que los navegadores soliciten/favicon.icodesde la raíz del sitio, cuando una página no declara ningún icono, y los lectores RSS, los rastreadores y las herramientas más antiguas todavía lo hacen. Mantenga el archivo en la raíz incluso si declara otros íconos.icon.svges el icono nítido para navegadores que admiten favicons SVG. Se escala a cualquier densidad y puede incluir aprefers-color-schemeconsulta de medios para que el icono se adapte a pestañas oscuras. No todos los navegadores lo respetan, por eso se queda el .ico.apple-touch-icon.pnga 180 x 180 es lo que usa iOS cuando alguien agrega su sitio a la pantalla de inicio. Dale un fondo opaco, ya que iOS no mantiene la transparencia en los íconos de la pantalla de inicio.- Los íconos de manifiesto en 192 y 512 son los que usan los navegadores basados en Android y Chromium cuando un sitio se instala como una aplicación, como se describe en Manifiesto de la aplicación web W3C.
los sizes el atributo en el enlace .ico importa de una manera. Cuando un navegador ve un SVG y un .ico de tamaño, puede indicar que el SVG es la opción escalable. Algunas configuraciones usan sizes="any" en cambio, en el .ico, y algunas versiones de Chrome respondieron eligiendo el .ico en lugar del SVG. Un tamaño específico evita eso.
¿por qué mi favicon se ve borroso o mal?
La mayoría de los problemas de favicon provienen de la imagen fuente, no del formato. La ICO almacena todo lo que se le da en cada tamaño y el escalado sólo puede ir bien en una dirección.
| Síntoma | Causa | Arreglar |
|---|---|---|
| Entrada suave y con manchas de 256 px | Fuente menor a 256 px, por lo que se estiró | Comience desde una exportación de 512 x 512 o más |
| Logotipo aplastado o estirado | Fuente no cuadrada estirada hasta el cuadrado | Recortar o rellenar en cuadrado antes de convertir |
| Marca denominativa ilegible en la pestaña | El texto dibujado a 16 px tiene dos píxeles de altura | Utilice el símbolo solo durante 16 y 32 px |
| El contorno fino desaparece | Golpes inferiores a 1 px en tamaños pequeños | Trazos gruesos en una variante de tamaño pequeño |
| Cuadro blanco alrededor del icono | La fuente JPG no tiene transparencia | Utilice un PNG con un canal alfa |
| El antiguo icono sigue apareciendo | Los navegadores almacenan en caché los favoritos de forma agresiva | Cambie el nombre del archivo o agregue una cadena de consulta, luego realice una actualización |
| No hay icono en los resultados de Google | Icono inferior a 48 px, bloqueado por robots.txt o no en la página de inicio | Sirva un ícono más grande desde la página de inicio y permita el rastreo |
Vale la pena explicar la primera fila, porque también atrapa a diseñadores experimentados. Una fuente de 64 px convertida con 256 marcados produce una entrada de 256 px que es la imagen de 64 px ampliada cuatro veces. Es exactamente la entrada que muestran las vistas de Windows de alta densidad y los atajos grandes. Reducir la escala desde una fuente grande es la dirección que se ve bien.
La tercera fila es una cuestión de aritmética. Un icono de 16 x 16 tiene 256 píxeles en total. Una marca denominativa de cinco letras comprimida en ese ancho obtiene alrededor de tres píxeles por letra, y el suavizado los convierte en manchas grises. Por ese motivo, casi todos los sitios conocidos utilizan una sola letra o símbolo para su favicon.
¿cómo hago un favicon.ico desde un PNG?
Exporte un PNG cuadrado de al menos 512 x 512 píxeles con un fondo transparente, conviértalo a ICO con los tamaños que necesita y verifique la entrada de 16 páginas en tamaño real antes de publicarla.
Usando el Convertidor de PNG a ICO pe Toolz:
- Deja el PNG. Varios pueden entrar a la vez; cada uno se convierte en su propio .ico.
- Elija los tamaños de iconos. Las cuatro casillas, 16, 32, 48 y 256 px, están marcadas para comenzar. Para un favicon puro, desmarque 256 para que el archivo sea mucho más liviano, ya que la entrada 256 pesa la mayor parte de su peso. Si desmarcas los cuatro, el convertidor vuelve a escribir los cuatro en lugar de producir un icono vacío.
- Presione Convertir a ICO. Un cuadrado 512 x 512
logo.pngvuelve comologo.icocon la nota "Contiene 16, 32, 48, 256 iconos px." - Descargue el archivo o tome un lote como
converted-ico.zip.
El convertidor dibuja su imagen en un lienzo en cada tamaño, codifica cada cuadrado como PNG y los empaqueta primero en un .ico, todo del lado del cliente, para que la obra de arte nunca salga del dispositivo. La transparencia se mantiene en todos los tamaños. Se estira una fuente no cuadrada para llenar cada cuadrado en lugar de recortarla, y la nota lo dice: suelte una marca denominativa de 1024 x 256 e informa que la imagen era 1024x256 y se estiraba a cuadrados de los tamaños que eligió. Esa nota es tu señal para recortar o rellenar primero.
Para obtener el mejor resultado en tamaños pequeños, cree dos PNG: uno detallado para 48 y 256 px y un símbolo simplificado para 16 y 32 px. Convierta cada uno con solo sus tamaños marcados. El convertidor escribe una fuente por archivo, por lo que el enfoque de dos imágenes le brinda dos archivos .ico; utilice el simplificado como favicon.ico, ya que los navegadores eligen principalmente las entradas pequeñas y la detallada para la aplicación de Windows o los iconos de acceso directo.
¿puedo hacer una ICO a partir de un JPG o un SVG?
Sí a ambos, con una advertencia para cada uno.
Un JPG funciona, pero cada entrada de ícono sale como un cuadrado lleno sin transparencia, porque JPEG no tiene canal alfa y ningún convertidor puede recuperar uno. El Convertidor JPG a ICO vuelve a muestrear la foto en los mismos cuadrados de 16, 32, 48 y 256 px. Las fotos también pierden casi todos los detalles a las 16 px, por lo que recorta firmemente alrededor de un solo sujeto de alto contraste y haz el cuadrado de la cosecha antes de convertir. Una foto de teléfono de 4032 x 3024 convertida tal cual se aprieta horizontalmente, y la nota se lo indica.
Un SVG es la mejor fuente posible, ya que no tiene una resolución fija y se vuelve nítido en cada tamaño de entrada. La ruta depende de cuánto control quieras. El Convertidor SVG a PNG representa el SVG en un PNG que puede inspeccionar y editar primero; cualquier SVG cuyo lado más largo tenga menos de 512 px se dibuja en 512, por lo que un SVG de 24 x 24 iconos aún proporciona una fuente limpia para la entrada 256. O coloque el SVG directamente en general Convertidor de imágenes, que acepta SVG, PNG, JPG y una docena de otros formatos, y elige ICO como objetivo para renderizarlo y empaquetarlo en un solo paso.
| Fuente | Transparencia en la ICO | Nitidez a 256 px | Mejor uso |
|---|---|---|---|
| SVG | impuesto | Agudo, representado a partir de vectores | Logotipos que tienes en forma vectorial |
| PNG 512 px o más | impuesto | Agudo | La mayoría de los favoritos |
| PNG por debajo de 256 px | impuesto | Suave a 256 | Desmarque 256 o vuelva a exportar más grande |
| JPG | Ninguno, cuadrado lleno | Depende del tamaño de la fuente | Sólo iconos basados en fotografías |
| Ico existente | impuesto | Reconstruido a partir de la entrada que decodifica el navegador | Cambiar qué tamaños lleva un archivo |
También se puede volver a introducir un .ico existente. El convertidor nunca trata ICO a ICO como un cambio de nombre; siempre reconstruye el archivo en los tamaños que marca. Esa es una forma rápida de eliminar un favicon inflado a 16, 32 y 48, aunque reconstruye desde una entrada que decodifica el navegador, así que comience desde la obra de arte original si la tiene. SVG frente a PNG cubre por qué vale la pena conservar el vector master exactamente para este tipo de reexportación.
¿favicon.ico sigue siendo importante en 2026?
Sí, como alternativa. Los navegadores actuales utilizan los iconos SVG o PNG que usted declara, pero la raíz /favicon.ico sigue siendo lo que obtienen algunos navegadores, lectores de feeds, herramientas de marcadores y rastreadores cuando no encuentran ninguna declaración o no admiten el tipo declarado. Uno que falta también llena los registros del servidor con 404, ya que esas solicitudes llegan independientemente de que el archivo exista o no.
Lo que ya no importa es la larga cola de tamaños heredados. Los íconos táctiles separados de 57, 60, 72, 76, 114, 120, 144 y 152 píxeles datan de versiones anteriores de iOS y están cubiertos por un único archivo de 180 px. Imágenes de mosaico de Windows declaradas a través browserconfig.xml pertenecía a los mosaicos de pantalla de inicio de Windows 8 y 10. Ninguno de los dos es necesario para un nuevo sitio.
Aquí está el conjunto mínimo práctico con tamaños de archivo que se esperan:
| Archivo | Tamaño de píxel | Peso típico | requerido? |
|---|---|---|---|
favicon.ico con 16, 32, 48 |
16, 32, 48 | Unos cuantos KB | Sí, como alternativa |
icon.svg |
Escalable | Menos de 2 KB para una marca simple | recomendado |
apple-touch-icon.png |
180 x 180 | 5 până la 20 KB | Sí, para iOS |
icon-192.png, icon-512.png |
192, 512 | 10 până la 60 KB | Si el sitio tiene manifiesto |
¿es privada la conversión de iconos en el navegador?
Sí. En Toolz, la decodificación, el cambio de tamaño, la codificación PNG y el empaquetado del .ico ocurren en el lado del cliente, dentro de la pestaña del navegador, por lo que no se carga ninguna imagen y la página sigue funcionando sin conexión una vez cargada. Los metadatos y los perfiles de color adjuntos a la fuente se eliminan mediante el paso del lienzo, que para un icono es inofensivo.
Las imágenes de más de 100 megapíxeles y los archivos vacíos se rechazan con un mensaje, y las fuentes SVG de más de 50 MB se rechazan. Las herramientas son gratuitas, sin registro, con un límite diario de conversiones.
