Cómo crear un favicon para tu web

El favicon es el pequeño icono que aparece en la pestaña del navegador, en la barra de marcadores, en el historial, en la pantalla de inicio del iPhone y junto al nombre de tu web en los resultados de búsqueda. A menudo es lo único de tu marca que ve un visitante cuando tiene veinte pestañas abiertas. Antes, hacerlo bien significaba lidiar con una docena de tamaños. Hoy, un puñado de archivos cubre todas las plataformas que importan.

Esta guía explica qué generar, cómo diseñar un icono que aguante los 16 píxeles, cómo instalarlo y cómo diagnosticar los problemas más habituales.

Los archivos que necesita una web moderna

• favicon.ico con imágenes de 16, 32 y 48 px. Los navegadores piden /favicon.ico por su cuenta aunque no haya HTML, Windows lo usa para los accesos directos y es el recurso de respaldo más seguro.
• apple-touch-icon.png de 180×180. Se usa cuando alguien añade la web a la pantalla de inicio en un iPhone o un iPad.
• icon-192.png e icon-512.png. Los iconos de la pantalla de inicio de Android y la pantalla de bienvenida de una app web instalada.
• site.webmanifest. Un pequeño archivo JSON que apunta a los dos iconos de Android y, si quieres que la web se pueda instalar, la describe.
• Opcionalmente, icon.svg. Un único icono vectorial que los navegadores compatibles con favicons SVG muestran nítido a cualquier tamaño, y que puede cambiar de colores en el modo oscuro.

Todo lo demás que quizá veas en tutoriales antiguos, como decenas de tamaños PNG e imágenes de mosaico específicas de cada navegador, ya no hace falta para una web típica.

Genera el conjunto a partir de un logotipo

1. Prepara un original cuadrado. Lo ideal es un SVG; si no, un PNG de al menos 512×512.
2. Abre Generador de favicon y suelta el archivo. Admite PNG, JPG, WebP y SVG de hasta 20 MB.
3. Descarga el ZIP. Contiene favicon.ico (con 16, 32 y 48 px dentro), apple-touch-icon.png, icon-192.png, icon-512.png y site.webmanifest.
4. Copia los archivos a la raíz de tu web, junto a la página de inicio.

Cada tamaño se dibuja directamente a partir del original, así que un SVG se rasteriza de forma nativa a 16 px en lugar de reducirse desde un mapa de bits grande. El renderizado se hace en tu navegador; el logotipo no se sube. Un original que no es cuadrado se escala para encajar y se centra, con espacio transparente en los lados más cortos.

El generador no produce icon.svg. Si quieres un favicon SVG, copia tu propio logotipo SVG a la raíz de la web con ese nombre.

Añade el HTML

Pon estas líneas en el <head> de cada página, o en la plantilla de diseño compartida:

<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="/site.webmanifest">

Omite la línea del SVG si no tienes uno. El atributo sizes="32x32" en la línea del ICO importa cuando hay un SVG: evita que algunos navegadores elijan el ICO en lugar del SVG, que es más nítido.

El manifiesto generado lista los iconos con rutas absolutas como /icon-192.png. Si tu web está en una subcarpeta y no en la raíz del dominio, edita esas rutas para que coincidan.

Diseñar un icono que aguante los 16 píxeles

A 16×16 hay 256 píxeles en total. Ningún ajuste de exportación salva un diseño que necesite más.

• Usa el símbolo, no el logotipo. Una sola letra, un monograma o el símbolo sin el texto. Las palabras se convierten en un borrón gris por debajo de 32 px.
• Formas gruesas, pocos colores. Las líneas más finas que aproximadamente 1/16 del ancho del icono desaparecen al tamaño más pequeño. Dos colores con mucho contraste se leen mejor.
• Llena el cuadrado. Recorta los márgenes vacíos del original. Un logotipo flotando en espacio transparente acaba diminuto en la pestaña.
• Prueba los dos temas de pestaña. Las barras de pestañas pueden ser claras u oscuras. Un símbolo negro sobre fondo transparente desaparece en un tema oscuro. Una forma de color sólido detrás del símbolo, como un cuadrado redondeado, funciona en ambos.

Si el logotipo es ancho, redúcelo a su símbolo con Recortar imagen online en 1:1 antes de generar. Si un logotipo en mapa de bits solo existe en tamaño pequeño, ampliarlo con Ampliar una imagen con IA da al icono de 512 px bordes más limpios que un simple estirado.

Modo oscuro con un favicon SVG

Un favicon SVG puede incluir una media query CSS para prefers-color-scheme: dark y cambiar su color de relleno cuando el navegador usa un tema oscuro. Es la solución más limpia para un símbolo oscuro que desaparece en pestañas oscuras. Mantén el ICO como respaldo, porque no todos los navegadores usan favicons SVG.

Si necesitas PNG de otros tamaños

Algunas plataformas, plugins y tiendas de apps piden un tamaño de PNG concreto que el conjunto no incluye. Convertir SVG a PNG online renderiza tu logotipo vectorial a cualquier ancho que escribas, con fondo transparente.

Detalles de cada plataforma que conviene conocer

Pantalla de inicio del iPhone

iOS no muestra transparencias en los iconos de la pantalla de inicio; las zonas transparentes se rellenan, normalmente de negro, y el sistema redondea las esquinas. Como el generador conserva la transparencia, usa un original con color de fondo sólido para el Apple touch icon. No redondees tú las esquinas.

Android y webs instalables

Los launchers de Android pueden recortar los iconos en círculo o en otra forma. Para que la web se pueda instalar como app, abre site.webmanifest en un editor de texto y añade al menos name, short_name, start_url, display (por ejemplo standalone) y theme_color. Si marcas un icono como "purpose": "maskable", mantén lo importante del diseño dentro del 80 % central del cuadrado, porque los bordes se pueden recortar.

Resultados de búsqueda

Google muestra un icono del sitio junto a los resultados. Sus directrices piden un icono cuadrado cuyo tamaño sea múltiplo de 48 px, referenciado desde la página de inicio y rastreable. La capa de 48 px del ICO y el PNG de 192 px cumplen ambos. Los cambios en los resultados de búsqueda pueden tardar días o semanas en aparecer, porque el icono se actualiza cuando se vuelve a rastrear la página de inicio.

Solución de problemas

• Sigue apareciendo el favicon antiguo. Los navegadores guardan los favicons en caché de forma agresiva, aparte de la página. Abre /favicon.ico directamente y recárgalo, o añade a los enlaces del icono un parámetro de versión como ?v=2.
• El icono sale en blanco o roto. Abre la URL de cada archivo en el navegador. Un 404 suele significar que los archivos acabaron en una subcarpeta en lugar de en la raíz, o que el servidor necesita el tipo correcto para .webmanifest.
• El icono se ve borroso en la pestaña. Las versiones de 16 y 32 px salieron de un original muy detallado. Prepara una versión simplificada para los tamaños pequeños.
• Un cuadrado negro en la pantalla de inicio del iPhone. El original tenía fondo transparente. Vuelve a generar a partir de una versión con fondo sólido.
• Una línea fina en mitad del cuadrado. El original era un logotipo de texto ancho. Recorta primero hasta el símbolo.

Lista de comprobación

1. Simplifica el logotipo a un símbolo que se lea a 16 px y funcione en pestañas claras y oscuras.
2. Hazlo cuadrado, idealmente en SVG; si no, en PNG de 512×512 o más.
3. Genera el conjunto y copia todos los archivos a la raíz de la web.
4. Añade las cuatro etiquetas link al head, incluyendo icon.svg solo si lo tienes.
5. Completa el manifiesto si la web debe poder instalarse.
6. Comprueba directamente la URL de cada archivo y luego prueba en la pantalla de inicio de un móvil.