Guía detallada

Favicon Implementation Guide

4 min de lectura
Ver contenido

Guía de Implementación de Favicon: Referencia Técnica Completa

Introducción

Implementar favicons correctamente implica más que simplemente colocar un archivo .ico en el directorio raíz. Las aplicaciones web modernas necesitan soportar múltiples dispositivos, densidades de pantalla y casos de uso—desde pestañas del navegador hasta Progressive Web Apps (PWAs).

Esta guía completa cubre todos los tamaños de favicon que necesitas, selección de formato, configuración del manifest para PWA y pruebas en diferentes plataformas.

Entendiendo los Requisitos de Favicon

Dónde se Usan los Favicons

Contexto Tamaño Típico Formato Notas
Pestaña del navegador 16x16, 32x32 ICO, PNG Uso más común
Barra de marcadores 16x16 ICO, PNG Al guardar en favoritos
Historial del navegador 16x16 ICO, PNG En lista de historial
Búsqueda de Google 48x48+ PNG Snippets de resultados
Acceso directo Windows 48x48 ICO Accesos directos de escritorio
Dock de macOS 512x512 PNG, ICNS Requiere alta resolución
Pantalla inicio iOS 180x180 PNG apple-touch-icon
Pantalla inicio Android 192x192, 512x512 PNG Vía manifest
Splash screen PWA 512x512 PNG Pantallas de inicio de app

Requisitos de Favicon de Google

Para que tu favicon aparezca en los resultados de búsqueda de Google:

✓ Mínimo 48x48 píxeles (múltiplos preferidos: 96, 144, 192)
✓ Relación de aspecto cuadrada (1:1)
✓ Debe ser rastreable (no bloqueado por robots.txt)
✓ URL estable (evitar cambios frecuentes)
✓ Contenido apropiado (sin imágenes explícitas)
✓ Formato de imagen válido (ICO, PNG, SVG, GIF, WebP)

Implementación Completa de Favicon

Conjunto de Archivos Recomendado

Genera estos archivos para cobertura completa:

/favicon.ico          (48x48, multi-resolución)
/favicon-16x16.png    (16x16)
/favicon-32x32.png    (32x32)
/favicon-48x48.png    (48x48)
/favicon-192x192.png  (192x192)
/favicon-512x512.png  (512x512)
/apple-touch-icon.png (180x180)
/icon.svg             (escalable)
/site.webmanifest     (manifest PWA)

Implementación en HTML Head

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">

  <!-- Favicons estándar -->
  <link rel="icon" href="/favicon.ico" sizes="48x48">
  <link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
  <link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
  <link rel="icon" href="/favicon-48x48.png" sizes="48x48" type="image/png">

  <!-- Alta resolución para navegadores modernos -->
  <link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png">

  <!-- Favicon SVG (navegadores modernos) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

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

  <!-- Manifest PWA -->
  <link rel="manifest" href="/site.webmanifest">

  <!-- Color de tema para chrome del navegador -->
  <meta name="theme-color" content="#4285f4">

  <!-- Tiles de Microsoft (opcional) -->
  <meta name="msapplication-TileColor" content="#4285f4">
  <meta name="msapplication-config" content="/browserconfig.xml">
</head>

Web Manifest para PWA

Crear site.webmanifest:

{
  "name": "Nombre de Tu Sitio",
  "short_name": "Sitio",
  "description": "Descripción de tu sitio",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4285f4",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Configuración de Navegador Microsoft

Crear browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square150x150logo src="/mstile-150x150.png"/>
      <TileColor>#4285f4</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Guía de Selección de Formato

Formato ICO

Mejor para: Compatibilidad universal, navegadores legacy

# Crear ICO multi-resolución con ImageMagick
convert favicon-16x16.png favicon-32x32.png favicon-48x48.png favicon.ico

Ventajas: Soporte universal, múltiples tamaños en un archivo Desventajas: Mayor tamaño de archivo, formato antiguo

Formato PNG

Mejor para: Navegadores modernos, transparencia

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Ventajas: Excelente compresión, transparencia, amplio soporte Desventajas: Sin animación, archivo separado por tamaño

Formato SVG

Mejor para: Iconos escalables, navegadores modernos

<link rel="icon" type="image/svg+xml" href="/icon.svg">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#4285f4"/>
  <text x="50" y="65" font-size="50" text-anchor="middle" fill="white">A</text>
</svg>

Ventajas: Escalabilidad infinita, tamaño pequeño, puede usar CSS Desventajas: No soportado en Safari, problemas en navegadores antiguos

Formato WebP

Mejor para: Sitios modernos priorizando rendimiento

<link rel="icon" type="image/webp" sizes="32x32" href="/favicon.webp">

Ventajas: Excelente compresión, transparencia, animación Desventajas: Requiere fallback para navegadores antiguos

Implementaciones Específicas por Framework

Next.js (App Router)

En directorio app/:

app/
├── favicon.ico       (auto-servido)
├── icon.png          (auto-detectado)
├── apple-icon.png    (auto-detectado)

O programáticamente en app/layout.tsx:

import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
    ],
    apple: '/apple-touch-icon.png',
    shortcut: '/favicon.ico',
  },
}

Vue.js / Nuxt

En nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' }
      ],
      meta: [
        { name: 'theme-color', content: '#4285f4' }
      ]
    }
  }
})

React (Vite)

En index.html:

<head>
  <link rel="icon" type="image/svg+xml" href="/icon.svg" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</head>

Django

En template base.html:

{% load static %}
<head>
  <link rel="icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
  <link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon-32x32.png' %}">
  <link rel="apple-touch-icon" href="{% static 'apple-touch-icon.png' %}">
</head>

WordPress

En functions.php:

function custom_favicon() {
    echo '<link rel="icon" type="image/png" sizes="32x32" href="' . get_template_directory_uri() . '/images/favicon-32x32.png">';
    echo '<link rel="icon" type="image/png" sizes="16x16" href="' . get_template_directory_uri() . '/images/favicon-16x16.png">';
    echo '<link rel="apple-touch-icon" sizes="180x180" href="' . get_template_directory_uri() . '/images/apple-touch-icon.png">';
}
add_action('wp_head', 'custom_favicon');

Generando Favicons

Usando Línea de Comandos (ImageMagick)

# Desde una imagen fuente de alta resolución (512x512 o mayor)
SOURCE="logo-512.png"

# Generar todos los tamaños
convert $SOURCE -resize 16x16 favicon-16x16.png
convert $SOURCE -resize 32x32 favicon-32x32.png
convert $SOURCE -resize 48x48 favicon-48x48.png
convert $SOURCE -resize 180x180 apple-touch-icon.png
convert $SOURCE -resize 192x192 favicon-192x192.png
convert $SOURCE -resize 512x512 favicon-512x512.png

# Crear ICO multi-resolución
convert favicon-16x16.png favicon-32x32.png favicon-48x48.png favicon.ico

Usando Herramientas Online

Generadores de favicon populares:

Tips de Diseño para Tamaños Pequeños

✓ Usa formas simples (círculos, cuadrados, letras)
✓ Asegura alto contraste con fondos comunes (blanco, oscuro)
✓ Prueba a tamaño real (16x16 se ve muy diferente a 512x512)
✓ Elimina detalles finos que desaparecen a tamaños pequeños
✓ Considera diseños simplificados separados para tamaños pequeños

Pruebas y Validación

Lista de Verificación de Pruebas en Navegador

□ Chrome (escritorio): Verificar icono de pestaña
□ Firefox (escritorio): Verificar pestaña y marcador
□ Safari (escritorio): Verificar pestaña y marcador
□ Edge (escritorio): Verificar pestaña y pin en barra de tareas
□ Chrome (Android): Agregar a pantalla de inicio
□ Safari (iOS): Agregar a pantalla de inicio
□ Búsqueda de Google: Buscar tu sitio en móvil

Herramientas de Validación

Prueba de Favicon de Google:

# Verificar si Google puede acceder a tu favicon
curl -I https://tusitio.com/favicon.ico

# Debería retornar:
# HTTP/2 200
# content-type: image/x-icon

Verificar que robots.txt no bloquea:

# Tu robots.txt NO debe tener:
Disallow: /favicon.ico
Disallow: /*.ico
Disallow: /*.png

JavaScript de Depuración

// Verificar qué favicon está cargado actualmente
function verificarFavicon() {
  const links = document.querySelectorAll('link[rel*="icon"]');
  links.forEach(link => {
    console.log(`${link.rel}: ${link.href} (${link.sizes?.value || 'sin tamaño'})`);
  });
}
verificarFavicon();

Consideraciones de Caché

Headers de Caché

# Apache .htaccess
<FilesMatch "\.(ico|png|svg)$">
  Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

# Nginx
location ~* \.(ico|png|svg)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

Cache Busting

Al actualizar favicons:

<!-- Agregar query string de versión -->
<link rel="icon" href="/favicon.ico?v=2">

O usar hash de contenido en nombre de archivo:

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

Solución de Problemas Comunes

Favicon No Aparece en Pestaña del Navegador

  1. Limpiar caché del navegador (actualización forzada: Ctrl+Shift+R)
  2. Verificar que el archivo existe en la ruta especificada
  3. Verificar tipo MIME correcto en respuesta del servidor
  4. Verificar errores de sintaxis en HTML

Favicon No Aparece en Resultados de Google

  1. Verificar tamaño mínimo de 48x48
  2. Asegurar relación de aspecto cuadrada
  3. Verificar que robots.txt no bloquea
  4. Esperar—el caché de Google puede tardar semanas
  5. Usar Google Search Console para solicitar re-rastreo

Diferente Favicon en Diferentes Navegadores

Los navegadores priorizan diferente. Asegura proveer:

<!-- El orden importa para algunos navegadores -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="icon" href="/favicon.ico">

PWA No Usa Icono Actualizado

  1. Actualizar versión en manifest
  2. Limpiar caché del service worker
  3. Desinstalar y reinstalar PWA

Lista de Verificación Resumen

  • [ ] Crear favicon en múltiples tamaños (16, 32, 48, 180, 192, 512)
  • [ ] Incluir .ico para navegadores legacy
  • [ ] Agregar apple-touch-icon para iOS
  • [ ] Crear web manifest para soporte PWA
  • [ ] Probar en múltiples navegadores y dispositivos
  • [ ] Verificar que Google puede rastrear favicon (no bloqueado por robots.txt)
  • [ ] Configurar headers de caché apropiados
  • [ ] Asegurar relación de aspecto cuadrada (1:1)
  • [ ] Usar diseño simple que funcione a 16x16

Guías Relacionadas

Documentación Oficial

Artículos relacionados

Versión relacionada

Introducción

Favicon Explained

Un favicon (abreviación de "favorite icon" o icono favorito) es el pequeño icono que se muestra en las pestañas del navegador, marcadores y resultados de...

Hub de categoría

Hub

Basic Seo Fundamentals Hub

Todo sitio web exitoso se construye sobre una base sólida de fundamentos SEO

En la misma categoría

Guía detallada

Viewport Optimization Guide

El viewport meta tag es más que un simple elemento HTML—es la base del diseño web responsivo y la optimización móvil

Guía detallada

Https Implementation Guide

Implementar HTTPS correctamente va más allá de simplemente instalar un certificado SSL

Guía detallada

Open Graph Optimization Guide

Las etiquetas Open Graph son fundamentales para maximizar el CTR y el engagement de tu contenido en redes sociales¹