ximg.es

Generador de favicon

Escribe una letra o sube tu logo y descarga todos los iconos que necesita una web hoy, con el código para el <head>. Se genera en tu navegador.

Crear desde
Vista previa del icono
180 × 180

    HTML para el <head>

    <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">

    Qué ficheros necesita una web hoy

    Ya no hacen falta veinte tamaños. Con estos cinco ficheros quedas bien en todos los navegadores, en la pantalla de inicio del móvil y en las búsquedas de Google:

    Cómo instalarlo

    Descarga el ZIP, copia los ficheros en la raíz de tu web (donde está el index.html) y pega el HTML dentro del <head>. Si cambias el icono más adelante, el navegador puede tardar en enterarse porque lo guarda en caché: cambiar el nombre del fichero o añadir ?v=2 al enlace lo resuelve.

    Consejos de diseño

    Un favicon provisional en una línea

    Si solo necesitas algo mientras maquetas, el generador de ximg.es ya sirve una imagen cuadrada con una letra, sin descargar nada: 

    <link rel="icon" href="https://ximg.es/32x32/2563eb/fff.png?text=X">

    Preguntas frecuentes

    ¿Qué tamaño debe tener un favicon?

    El favicon.ico lleva 16, 32 y 48 px. Además conviene un PNG de 180 px para iPhone y otros de 192 y 512 px para Android. Esta herramienta genera todos.

    ¿Hace falta el favicon.ico si ya tengo el SVG?

    Sí. Safari y algunas herramientas siguen sin usar el SVG, y Google y los lectores de RSS piden /favicon.ico directamente.

    ¿Se suben mis imágenes a algún servidor?

    No. Los iconos se dibujan con canvas en tu navegador y el ZIP se crea también ahí.

    ¿Por qué no se actualiza mi favicon?

    Los navegadores lo guardan en caché mucho tiempo. Añade ?v=2 al enlace, o abre la web en una ventana privada para comprobar el nuevo.

    ¿Por qué el icono del iPhone tiene fondo?

    Porque iOS no admite transparencia en apple-touch-icon y pintaría el fondo de negro. La herramienta pone tu color de fondo, o blanco si elegiste fondo transparente.

    ¿Qué es el site.webmanifest?

    Un JSON que describe tu web como aplicación: nombre, iconos y colores. Android lo usa al añadir la web a la pantalla de inicio.

    Más herramientas

    Ver todas las herramientas · Generador de imágenes placeholder