Favicons

Qué es y por qué importa

La palabra viene de favorites icon, "ícono de favoritos", porque al principio solo aparecía en los marcadores. Hoy acompaña al sitio en todas partes.

Tipos por formato

Tipos por destino

El mismo favicon se muestra en lugares distintos, y cada uno pide su archivo y su tamaño:

Páginas Web · Guía×Correo

Pestaña del navegador

16 × 16 y 32 × 32 · favicon.ico o favicon.svg

Páginas Web · Guía

Correo institucional

Marcadores e historial

16 × 16 · el mismo de la pestaña

Páginas Web · Guíasliders.startuptic.com

Guía de componentes y estilos…

Resultados de Google

48 × 48 o múltiplos · favicon.ico / .svg

Páginas Web

Pantalla de inicio del iPhone

180 × 180 · apple-touch-icon.png

Páginas Web

Android y apps web (PWA)

192 × 192 y 512 × 512 · manifest.webmanifest

Tipos por diseño

Monograma (lettermark)

La inicial de la marca. Simple y fácil de reconocer.

Ideal para: Marcas con nombre largo

Símbolo (logomark)

Un dibujo que representa la marca sin texto.

Ideal para: Negocios con un producto claro

Mascota

Un personaje. Cercano, pero pierde detalle en tamaño pequeño.

Ideal para: Marcas juveniles o educativas

Abstracto

Formas y colores sin significado literal.

Ideal para: Tecnología, servicios

Páginas Web Guía

Páginas Web Guía

Páginas Web Guía

Logo completo con texto

A 16 px el texto se vuelve una mancha ilegible.

Evítalo siempre.

El de esta guía

Monograma "D" con un símbolo de reproducir integrado: letra y símbolo a la vez.

Funciona porque la forma se reconoce aun a 16 px.

Las cuatro primeras imágenes fueron generadas con IA en Canva como ejemplos; no son marcas reales. Mira la versión pequeña de cada una (32 y 16 px) a la derecha: así se ve en una pestaña.

Tamaños

Todos los tamaños se muestran a escala real con el favicon de esta guía:

16 × 16Pestaña y barra de direcciones

32 × 32Pestaña en pantallas retina, barra de tareas de Windows

48 × 48Resultados de Google, accesos directos

180 × 180apple-touch-icon: pantalla de inicio de iPhone y iPad

192 × 192Android, pantalla de inicio (manifest)

512 × 512Pantalla de bienvenida de apps web (manifest)

Favicon adaptable y dinámico

Adaptable al modo oscuro

Un favicon SVG puede cambiar de color si el sistema está en modo oscuro, para no perderse en una pestaña negra.

Modo claro×Correo

Modo oscuro×Correo

Copiar

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    circle { fill: #1d4ed8; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #93c5fd; }   /* más claro sobre pestañas oscuras */
    }
  </style>
  <circle cx="50" cy="50" r="45"/>
</svg>

Dinámico (con notificaciones)

Con JavaScript se puede redibujar el favicon para mostrar un contador, como hacen el correo o WhatsApp Web. Prueba: mira la pestaña de tu navegador al presionar el botón.

+1 notificaciónLimpiar

Úsalo solo para avisos reales. Un favicon que cambia sin motivo distrae.

Prueba el tuyo

Sube una imagen (PNG, SVG o JPG) y mira cómo se vería como favicon en una pestaña clara y oscura, y a 16, 32 y 48 px. La imagen no sale de tu computador.

⬆Elige o arrastra una imagenSe procesa solo en tu navegador

Mi sitio×Correo

Mi sitio×Correo

16 px

32 px

48 px

Cómo crearlo en Canva

1. Crea un diseño cuadrado

   En Canva: Crear un diseño → Tamaño personalizado → 512 × 512 px. Trabajar grande y luego reducir da mejor resultado que lo contrario.

2. Dibuja algo simple

   Una letra, un símbolo o una forma. Nada de texto largo ni detalles finos. Usa 2 o 3 colores de tu marca.

3. Revísalo en pequeño

   Usa el zoom de Canva al 10% o el probador de esta página: si a 16 px no se reconoce, simplifica.

4. Descárgalo con fondo transparente

   Compartir → Descargar → PNG → "Fondo transparente". Ojo: esa opción es solo de Canva Pro (o Canva para Educación, que es gratis para docentes y estudiantes). Sin ella, el PNG sale con fondo blanco.

5. Genera los tamaños

   Sube el PNG a un generador como RealFaviconGenerator: te entrega el .ico, el apple-touch-icon, los PNG del manifest y el código HTML.

6. Súbelo y enlázalo

   Copia los archivos a la raíz de tu sitio en Hostinger y pega el código en el <head> de todas las páginas.

7. Comprueba

   Abre el sitio en una ventana de incógnito (los navegadores guardan el favicon viejo en caché) y en el celular.

Código

Esto es lo que tiene cada página de esta guía en su <head>:

<!-- En el <head> de cada página -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2a82c6">

Y este es el archivo manifest.webmanifest en la raíz del sitio:

{
  "name": "Páginas Web · Guía de componentes",
  "short_name": "Páginas Web",
  "icons": [
    { "src": "/img/favicon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/img/favicon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/img/favicon-maskable-512.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ],
  "theme_color": "#2a82c6",
  "background_color": "#ffffff",
  "display": "standalone"
}

Errores comunes

Fuentes

• Mailchimp — Guía de favicons
• MDN — Favicon
• web.dev — Manifest de una app web
• RealFaviconGenerator
• Maskable.app — probar íconos maskable