ES

Cómo crear un favicon para tu web

Última actualización: 28 de octubre de 2026

Un favicon es el pequeño icono que aparece junto al nombre de tu web en las pestañas del navegador, los marcadores, el historial y, en el teléfono, en los resultados de búsqueda de Google. Sin él, los navegadores muestran un globo genérico y tu web parece a medio terminar. Hacer uno bueno lleva unos minutos.

Empieza con la imagen adecuada

  • Cuadrada, de al menos 256 × 256 píxeles, idealmente en PNG o SVG con fondo transparente.
  • Sencilla: a 16 × 16 píxeles solo sobreviven las formas contundentes. Un símbolo o una sola letra funcionan mucho mejor que el logotipo completo con texto.
  • Con mucho contraste, para que se vea tanto en los temas claros como en los oscuros del navegador.

Si tu logotipo es un archivo SVG, puedes exportar un PNG grande con SVG a PNG, y si tu imagen todavía no es cuadrada, Redimensionar imagen te ayuda a ajustar las medidas.

Qué archivos necesitas

Cada sitio busca un archivo distinto. Un conjunto razonable y actual es:

  • favicon.ico en la raíz de tu web, con versiones de 16, 32 y 48 píxeles. Los navegadores y muchas otras herramientas siguen pidiendo /favicon.ico automáticamente, aunque tu HTML apunte a otro archivo.
  • Un icono SVG (opcional), que los navegadores modernos pueden usar a cualquier tamaño.
  • apple-touch-icon.png, de 180 × 180 píxeles, que se usa cuando alguien añade tu web a la pantalla de inicio de un iPhone o iPad.

Los resultados de búsqueda de Google también usan tu favicon. Sus directrices piden un icono cuadrado cuyo tamaño sea múltiplo de 48 píxeles, así que incluir la versión de 48 × 48 en tu archivo ICO, o añadir un PNG de 96 o 192 píxeles, cubre ese requisito.

Crea el favicon.ico

  1. Abre PNG a ICO y arrastra tu PNG cuadrado. También sirven JPG, WebP y SVG.
  2. Marca los tamaños 16, 32 y 48. Añade 256 solo si también quieres usar el archivo como icono de Windows.
  3. Descarga el archivo y súbelo a la carpeta principal de tu web como favicon.ico, para que esté disponible en tuweb.com/favicon.ico.

Añade el HTML

Pon estas líneas dentro del <head> de cada página, cambiando los nombres de archivo por los tuyos:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Los navegadores que entienden SVG eligen el SVG, y el resto recurre al ICO. Si no tienes versión SVG, quita la segunda línea.

¿Por qué sigue apareciendo mi icono antiguo?

Los navegadores guardan los favicons en caché durante mucho tiempo. Abre directamente la dirección del icono y recárgala, o compruébalo en una ventana privada. Google actualiza el icono en los resultados de búsqueda la próxima vez que rastrea tu página de inicio, y eso puede tardar días o semanas.

Herramientas usadas en esta guía

Más guías