"Generador de Faviconos: Cómo crear un Favicon a partir de un PNG"

Todo sitio web necesita un favicon. Es el icono cuadrado pequeño que aparece en las pestañas del navegador, la barra de marcadores, el historial del navegador y en la pantalla de inicio de iOS o Android cuando un visitante guarda un acceso directo a su sitio. También aparece en los resultados de la Búsqueda de Google junto al nombre de su sitio, un detalle que afecta la forma en que su marca se ve a cualquiera que lo encuentre a través de la búsqueda orgánica. Sin un favicon, los navegadores recurren a un icono genérico de página en blanco que hace que incluso un sitio pulido parezca inacabado. Si ya tiene un logotipo como PNG, un generador de favicons lo convierte en un favicon.ico que funciona en menos de un minuto, sin instalación y sin necesidad de cuenta.

¿Qué tamaños de favicon necesita realmente?

No hay un único tamaño de favicon universal porque diferentes contextos extraen diferentes resoluciones del mismo conjunto de archivos. El conjunto práctico cubre seis tamaños:

Tamaño	Formato	Caso de uso
16×16	ICO / PNG	Banda de pestañas del navegador, barra de direcciones
32×32	ICO / PNG	Acceso directo en la barra de tareas, pestaña en pantallas de alta densidad de pixeles
48×48	ICO	Acceso directo en el escritorio de Windows
180×180	PNG	Icono táctil de Apple — pantalla de inicio de iOS
192×192	PNG	Acceso directo en la pantalla de inicio de Android a través del manifiesto web
512×512	PNG	Pantalla de inicio de Android a través del manifiesto web

El tamaño de favicon con el que empieza es importante. Trabaje siempre con una fuente cuadrada grande — 512×512 o más grande — para que todos los tamaños más pequeños se reduzcan limpiamente. Aumentar el tamaño de una miniatura de 16×16 crea un desenfoque que ninguna cantidad de nitidez corrige.

Para la mayoría de los sitios, el archivo ICO maneja las capas de 16×16, 32×32 y 48×48 en un solo contenedor. Los tamaños de 180×180, 192×192 y 512×512 son PNGs separados referenciados en HTML o un manifiesto web.

ICO vs PNG vs SVG

Los tres formatos funcionan como favicons para un sitio web. La respuesta correcta es usar más de uno.

ICO es un formato de contenedor de Microsoft que agrupa varios tamaños en un solo archivo. Coloque favicon.ico en la raíz de su dominio y todos los navegadores, incluidos los antiguos, lo encontrarán automáticamente sin necesidad de marcado HTML. Un archivo, cero configuración.

PNG es compatible con todos los navegadores modernos cuando se declara con una etiqueta <link>. Es el único formato que funciona para los iconos táctiles de Apple y los iconos de manifiesto de Android. PNG también conserva la transparencia del canal alfa completo, por lo que su icono se verá limpio contra cualquier color de fondo de pestaña.

SVG es un formato vectorial compatible con Chrome, Firefox y Edge. Debido a que se escala a cualquier resolución sin pixelación, un solo archivo SVG cubre todas las densidades de pantalla. SVG también admite consultas de medios prefers-color-scheme incrustadas, lo que permite que el favicon cambie automáticamente entre una versión oscura y una clara. Safari todavía no admite favicons SVG, por lo que SVG no puede reemplazar a ICO, pero es un fuerte complemento.

Recomendación práctica: envíe favicon.ico (que contiene 16×16, 32×32, 48×48) como respaldo, agregue un SVG para navegadores modernos y modo oscuro, e incluya un PNG de 180×180 para el icono táctil de Apple. Esa combinación cubre todos los principales navegadores y dispositivos.

Cómo crear un favicon a partir de un PNG

Los siguientes pasos le guiarán a través de la creación de un favicon para un sitio web utilizando el convertidor de PNG a ICO en privateconvert.org. La herramienta se ejecuta completamente en su navegador; el archivo nunca sale de su dispositivo, no hay cuenta que crear y no se agrega ninguna marca de agua a su salida.

1. Prepare su PNG de origen. Utilice una imagen cuadrada de 512×512 píxeles o más grande. Si su logotipo es una marca de palabra horizontal, recorte solo el símbolo o la inicial, ya que las marcas de palabra se vuelven ilegibles a 16 píxeles de ancho. Asegúrese de que el PNG tenga un fondo transparente si desea que el icono se vea limpio contra cualquier color de pestaña.

2. Abra el convertidor. Vaya a privateconvert.org/tools/png-to-ico.

3. Arrastre su PNG a la página. No hay un botón de carga que buscar; arrastre el archivo directamente a la zona de arrastre.

4. Descargue el archivo ICO. El convertidor genera un favicon.ico que contiene las capas estándar de 16×16, 32×32 y 48×48. Haga clic en descargar. El archivo está listo para ser implementado.

5. Cree los tamaños PNG adicionales si es necesario. Para el icono táctil de Apple, cambie el tamaño de su PNG de origen a 180×180. Para los iconos de manifiesto de Android, produzca uno de 192×192 y otro de 512×512. Cualquier editor de imágenes o redimensionador en línea funciona; el convertidor de ICO en privateconvert.org maneja el lado ICO.

Algunos consejos antes de convertir:

• Empiece por la versión de mayor resolución de su logotipo, no una miniatura comprimida.
• El convertidor conserva la transparencia del canal alfa, por lo que un PNG con un borde perfilado o transparente se mantiene nítido en la salida ICO.
• Si está ejecutando un entorno de preparación junto con la producción, use un color de fondo diferente en el favicon de preparación. La diferencia visual instantánea en la pestaña le indica de un vistazo en qué entorno se encuentra.

Cómo agregar un favicon a su sitio web (HTML)

Coloque favicon.ico en el directorio raíz de su dominio. La mayoría de los navegadores comprueban tusitio.com/favicon.ico automáticamente, sin necesidad de marcado. Para un control explícito sobre cada formato y tamaño, agregue las siguientes etiquetas dentro de su <head>:

<!-- ICO de reserva — funciona en todos los navegadores sin más marcado -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Tamaños PNG para navegadores modernos -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- SVG para navegadores modernos + cambio de modo oscuro -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- Icono táctil de Apple para la pantalla de inicio de iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Si solo tiene un archivo y desea la configuración más simple posible, la única etiqueta ICO es el mínimo viable de reserva:

<link rel="icon" href="/favicon.ico">

Para la pantalla de inicio de Android y el soporte de Progressive Web App, agregue un manifiesto web que haga referencia a sus PNGs de 192×192 y 512×512:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "any maskable" }
  ]
}

Guarde el manifiesto como manifest.webmanifest y haga referencia a él en <head>:

<link rel="manifest" href="/manifest.webmanifest">

El valor "purpose": "any maskable" en la entrada de 512×512 le dice a Android que use un icono de lanzador adaptable que se ajuste a su cuadrícula de iconos con forma sin recortarse.

Cómo añadir un favicon en WordPress, Shopify y Squarespace

Cada plataforma proporciona un campo de interfaz de usuario dedicado para que no necesite editar HTML o cargar archivos a través de FTP.

WordPress: Vaya a Apariencia > Personalizar > Identidad del sitio. Busque el campo “Icono del sitio” cerca de la parte inferior. Haga clic en “Seleccionar icono del sitio”, cargue su PNG y recórtelo si se le solicita. WordPress acepta cualquier imagen cuadrada y maneja el cambio de tamaño. Utilice al menos 512×512 para la fuente. Haga clic en “Publicar” para guardar.

Shopify: Vaya a Tienda en línea > Temas, haga clic en “Personalizar” en su tema activo, luego abra “Configuración del tema” (o la sección de encabezado según su tema). Busque el campo “Favicon”, haga clic en “Seleccionar imagen” y cargue un PNG o ICO cuadrado. Guarde y publique el tema. El icono aparece en unos minutos.

Squarespace: Vaya a Sitio web > Páginas, luego haga clic en “Herramientas del sitio web” en la parte inferior de la barra lateral izquierda. Seleccione “Favicon”. Cargue un PNG cuadrado: Squarespace lo redimensiona automáticamente. Guarde la página.

En los tres casos, el flujo de trabajo es el mismo: produzca un PNG cuadrado limpio de 512×512 o más grande usando un generador de favicons, luego deje que la plataforma maneje el tamaño de visualización.

Por qué no aparece tu favicon

Un favicon que funciona en desarrollo pero se niega a aparecer en producción, o desaparece después de una actualización, generalmente se debe a una de estas cinco causas.

Caché del navegador. Los favicons se almacenan en caché de forma agresiva. Actualice con fuerza con Ctrl+Shift+R (Windows/Linux) o Cmd+Shift+R (Mac). Si el icono aún no aparece, borre la caché del navegador por completo o pruebe en una ventana privada/de incógnito. Algunos navegadores requieren cerrar y volver a abrir la pestaña antes de que la caché se borre para los favicons.

Ruta de archivo incorrecta. favicon.ico debe estar en la raíz exacta de su dominio — tusitio.com/favicon.ico, no tusitio.com/assets/favicon.ico. Si utiliza una etiqueta <link> con una ruta relativa, verifique que la ruta se resuelva correctamente desde la página que está probando, no solo desde la página de inicio.

PNG renombrado haciéndose pasar por ICO. Cambiar la extensión de un archivo de .png a .ico no lo convierte. El formato ICO es un contenedor binario; un PNG renombrado sigue siendo un PNG y los navegadores que inspeccionan el encabezado del archivo lo ignorarán. Ejecute el archivo a través de un generador de favicons real para producir un ICO verdadero.

Desajuste HTTPS vs HTTP. Los navegadores bloquean las solicitudes de contenido mixto. Si su sitio se sirve a través de HTTPS pero la etiqueta <link> del favicon apunta a http://, la solicitud se bloquea silenciosamente. Verifique que la URL del favicon use https://.

Caché de CDN. Si su sitio está detrás de una CDN (Cloudflare, Fastly, etc.), los nodos perimetrales pueden estar sirviendo una versión antigua de favicon.ico incluso después de haberla reemplazado en el origen. Purge la caché de la CDN específicamente para la URL del favicon, o agregue una cadena de consulta para evitar la caché: href="/favicon.ico?v=2".

Preguntas frecuentes

¿Cuál es el tamaño mínimo de un favicon? 16×16 píxeles es el tamaño más pequeño que los navegadores muestran en las pestañas. Dicho esto, siempre debe incluir también 32×32: las pantallas de alta densidad de píxeles y los accesos directos de la barra de tareas necesitan la versión más grande para mantenerse nítidos. Si utiliza privateconvert.org/tools/png-to-ico, el ICO de salida incluye ambos tamaños automáticamente.

¿Debo usar PNG o ICO para mi favicon? Usa ambos. ICO funciona como un respaldo universal que los navegadores encuentran automáticamente sin ningún marcado HTML; es lo que los navegadores buscan cuando no hay una etiqueta <link>. PNG funciona para los navegadores modernos cuando se declara explícitamente y es necesario para los iconos táctiles de Apple y los iconos de manifiesto de Android. Los dos formatos cumplen funciones diferentes y no son intercambiables.

¿Afecta un favicon al SEO? No directamente: Google no utiliza el favicon como señal de clasificación. Sin embargo, aparece en los resultados de búsqueda de Google junto al nombre de su sitio en el SERP. Un favicon limpio y reconocible refuerza el reconocimiento de la marca y puede contribuir a la tasa de clics. Un favicon que falta o está roto muestra un icono de globo genérico en los resultados de búsqueda.

¿Cómo creo un favicon que cambie para el modo oscuro? Utilice un favicon SVG con una consulta de medios prefers-color-scheme incrustada:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .icon { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      .icon { fill: #ffffff; }
    }
  </style>
  <circle class="icon" cx="50" cy="50" r="40"/>
</svg>

Haga referencia al SVG junto con su fallback ICO:

<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">

Los navegadores que admiten favicons SVG utilizan la versión escalable que cambia de color. Safari y los navegadores más antiguos recurren a ICO.

¿Qué es un icono táctil de Apple y lo necesito? El icono táctil de Apple es la imagen que utiliza iOS cuando un visitante guarda su sitio en su pantalla de inicio. Sin él, iOS toma una captura de pantalla de su página o utiliza su favicon normal, lo cual se ve mal en el tamaño de pantalla de 180×180. Produzca un PNG de 180×180 con un fondo sólido (iOS rellena la transparencia con blanco y recorta las esquinas), agregue 20 píxeles de relleno para que la ilustración quede libre de la máscara de esquinas redondeadas y haga referencia a ella:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

¿Qué es un ícono enmascarable? El lanzador adaptable de Android recorta los íconos en un círculo, lágrima o squircle, según el dispositivo. Un ícono enmascarable incluye un relleno adicional alrededor de la obra de arte, llamado “zona segura”, para que el ícono tenga un aspecto intencional después del recorte en lugar de un recorte accidental. Agregue "purpose": "any maskable" a su entrada de 512×512 en el manifiesto web para indicarle a Android que puede aplicar la máscara adaptable.

¿Qué imagen funciona mejor como favicon? Formas simples y de alto contraste. Una sola letra, una marca geométrica o un símbolo de logotipo audaz permanecen legibles a 16 píxeles. Las ilustraciones detalladas, los trazos finos y las marcas de palabras completas se convierten en ruido en tamaños pequeños. Si su logotipo solo funciona como un diseño horizontal, use el favicon como una oportunidad para crear un ícono de aplicación dedicado, solo el símbolo, sin el texto. Puede crear un favicon a partir de un PNG en segundos en privateconvert.org/tools/png-to-ico para probar cómo se ve su ilustración en tamaños pequeños antes de comprometerse.

---

¿Listo para crear su favicon? Abra el convertidor de PNG a ICO en privateconvert.org: suelte su PNG, descargue el ICO y su favicon estará listo. Sin cuenta, sin marca de agua, sin carga de archivos.