Guía Favicon 2026: Todos los tamaños, formatos y cómo generarlos

Los favicons son los pequenos iconos que aparecen en las pestanas del navegador, marcadores, pantallas de inicio y selectores de aplicaciones. A pesar de su tamano reducido, tienen un gran impacto en el reconocimiento de marca y la experiencia del usuario. Esta guia completa de favicons te dice exactamente que necesitas en 2026, por que y como generarlos.

Configuracion Minima: Solo 3 Archivos Necesarios

En 2026, solo necesitas tres archivos para cubrir todos los navegadores, dispositivos y plataformas modernos:

Opcionalmente, puedes agregar un favicon SVG para escalabilidad infinita y soporte de modo oscuro. Pero estos tres archivos solos proporcionan cobertura completa.

<!-- The minimal favicon setup for 2026 -->
<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">

Referencia Completa de Tamanos de Favicon

Aqui esta la tabla de referencia definitiva para cada tamano de favicon, su proposito y donde se usa:

Los tamanos mas solicitados son 32x32 (pestanas), 180x180 (dispositivos Apple) y 512x512 (pantallas de inicio PWA). Solo estos tres cubren mas del 99% de los casos.

Comparacion de Formatos: ICO vs PNG vs SVG

Elegir el formato correcto de favicon es importante. Cada formato tiene ventajas y desventajas distintas:

Recomendacion: Usa ICO para el fallback /favicon.ico, PNG para Apple Touch Icon e iconos del manifiesto, y opcionalmente SVG para navegadores modernos.

Paso a Paso: Creacion de Favicons

Desde Figma

Programaticamente con Sharp (Node.js)

Automatiza la generacion de favicons desde una imagen fuente de alta resolucion con la biblioteca sharp:

import sharp from 'sharp';

// Generate multiple sizes from a single source
const sizes = [16, 32, 48, 180, 192, 512];

async function generateFavicons(sourceFile: string) {
  for (const size of sizes) {
    await sharp(sourceFile)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ quality: 90, compressionLevel: 9 })
      .toFile(`favicon-${size}x${size}.png`);

    console.log(`Generated favicon-${size}x${size}.png`);
  }
}

generateFavicons('icon-source.png');

Para generar el archivo ICO, usa el paquete png-to-ico:

import pngToIco from 'png-to-ico';
import { writeFileSync } from 'fs';

async function generateIco() {
  // Include 16x16, 32x32, and 48x48 in a single ICO file
  const icoBuffer = await pngToIco([
    'favicon-16x16.png',
    'favicon-32x32.png',
    'favicon-48x48.png',
  ]);
  writeFileSync('favicon.ico', icoBuffer);
  console.log('Generated favicon.ico');
}

generateIco();

Script de Build Completo

Aqui esta un script completo de Node.js que genera todos los archivos favicon necesarios desde un unico PNG fuente:

#!/usr/bin/env node
// generate-favicons.mjs
// Usage: node generate-favicons.mjs icon-source.png

import sharp from 'sharp';
import pngToIco from 'png-to-ico';
import { writeFileSync, mkdirSync } from 'fs';

const SOURCE = process.argv[2] || 'icon-source.png';
const OUT_DIR = './public';

mkdirSync(OUT_DIR, { recursive: true });

async function main() {
  // 1. Generate PNG sizes
  const pngSizes = [
    { size: 16, name: 'favicon-16x16.png' },
    { size: 32, name: 'favicon-32x32.png' },
    { size: 48, name: 'favicon-48x48.png' },
    { size: 180, name: 'apple-touch-icon.png' },
    { size: 192, name: 'icon-192x192.png' },
    { size: 512, name: 'icon-512x512.png' },
  ];

  for (const { size, name } of pngSizes) {
    await sharp(SOURCE)
      .resize(size, size, {
        fit: 'contain',
        background: { r: 0, g: 0, b: 0, alpha: 0 },
      })
      .png({ compressionLevel: 9 })
      .toFile(`${OUT_DIR}/${name}`);
    console.log(`  Created ${name}`);
  }

  // 2. Generate ICO (combines 16, 32, 48)
  const icoBuffer = await pngToIco([
    `${OUT_DIR}/favicon-16x16.png`,
    `${OUT_DIR}/favicon-32x32.png`,
    `${OUT_DIR}/favicon-48x48.png`,
  ]);
  writeFileSync(`${OUT_DIR}/favicon.ico`, icoBuffer);
  console.log('  Created favicon.ico');

  // 3. Generate manifest.webmanifest
  const manifest = {
    name: 'Your App Name',
    short_name: 'App',
    icons: [
      { src: '/icon-192x192.png', sizes: '192x192', type: 'image/png' },
      { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
    ],
    theme_color: '#ffffff',
    background_color: '#ffffff',
    display: 'standalone',
  };
  writeFileSync(
    `${OUT_DIR}/manifest.webmanifest`,
    JSON.stringify(manifest, null, 2)
  );
  console.log('  Created manifest.webmanifest');

  console.log('\nDone! All favicon files generated.');
}

main().catch(console.error);

Marcado HTML: Etiquetas Link Exactas y Manifiesto

Agrega estas etiquetas al <head> de cada pagina de tu sitio:

<head>
  <!-- Favicon: ICO fallback for legacy browsers -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- Favicon: SVG for modern browsers (scalable + dark mode) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

  <!-- Apple Touch Icon: iOS home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- Web App Manifest: Android + PWA -->
  <link rel="manifest" href="/manifest.webmanifest">

  <!-- Optional: theme color for browser chrome -->
  <meta name="theme-color" content="#ffffff"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#1a1a2e"
        media="(prefers-color-scheme: dark)">
</head>

Crea un manifest.webmanifest en tu directorio raiz:

{
  "name": "Your Application Name",
  "short_name": "AppName",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

El archivo de manifiesto le dice a los entornos Android y PWA que iconos usar. El valor "purpose": "any maskable" asegura que el icono funcione tanto como icono regular como dentro de la mascara adaptativa de Android.

Favicons en Modo Oscuro con SVG

Una de las funciones mas poderosas de los favicons SVG es la capacidad de adaptarse al esquema de color del usuario usando CSS prefers-color-scheme dentro del SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <style>
    /* Light mode (default) */
    .icon-bg { fill: #1a1a2e; }
    .icon-fg { fill: #ffffff; }

    /* Dark mode override */
    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #e0e0e0; }
      .icon-fg { fill: #1a1a2e; }
    }
  </style>

  <!-- Background circle -->
  <circle class="icon-bg" cx="64" cy="64" r="60" />

  <!-- Foreground shape (your logo/icon) -->
  <path class="icon-fg"
        d="M44 40 h40 v12 H56 v8 h24 v12 H56 v16 H44 V40z" />
</svg>

Este favicon SVG cambia automaticamente entre las versiones oscura y clara segun las preferencias del sistema. No requiere JavaScript. Funciona en Chrome, Firefox y Edge.

Reference this SVG in your HTML:

<!-- SVG favicon with automatic dark mode -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- ICO fallback for browsers that don't support SVG favicons -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

Probando Favicons en Cada Plataforma

Despues de generar tus favicons, pruebalos en todas las plataformas:

Quick checklist for verifying your favicon setup:

# Verify all favicon files exist and are accessible
curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/favicon.ico
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/icon.svg
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/apple-touch-icon.png
# Expected: 200

curl -s -o /dev/null -w "%{http_code}" https://yoursite.com/manifest.webmanifest
# Expected: 200

# Validate manifest JSON
curl -s https://yoursite.com/manifest.webmanifest | python3 -m json.tool
# Should output formatted JSON without errors

Preguntas Frecuentes

Cual es el numero minimo de archivos favicon necesarios?

Necesitas un minimo de tres archivos: favicon.ico (32x32), apple-touch-icon.png (180x180) y un PNG 512x512 referenciado en tu manifest.webmanifest. Estos tres archivos cubren mas del 99% de dispositivos en 2026.

Debo usar SVG o PNG para mi favicon?

Usa ambos. PNG es requerido para Apple Touch Icons e iconos del manifiesto. SVG es excelente para pestanas del navegador ya que escala perfectamente y soporta modo oscuro via CSS.

El tamano del favicon afecta la velocidad de carga?

Los archivos favicon son tipicamente muy pequenos (menos de 15 KB) y los navegadores los cachean agresivamente. El impacto en la velocidad es insignificante.

Como hago que mi favicon cambie en modo oscuro?

Usa un favicon SVG con un bloque <style> que contenga @media (prefers-color-scheme: dark). Funciona en Chrome, Firefox y Edge.

Para que sirven los iconos maskable en el manifiesto?

Los iconos maskable estan disenados para el sistema de iconos adaptativos de Android, donde el SO recorta el icono en varias formas. El icono incluye relleno adicional para que las partes importantes no se corten.

Todavia necesito un archivo favicon.ico en 2026?

Si. Aunque los navegadores modernos soportan PNG y SVG, muchas herramientas solicitan automaticamente /favicon.ico. Incluirlo no cuesta casi nada y evita errores 404.