Guía
Tamaño del favicon: qué medidas y formatos necesitas
Un favicon se muestra a muchos tamaños, desde una pestaña del navegador de 16 píxeles hasta un icono de aplicación de 512 píxeles. Esta guía recoge los tamaños que importan y cómo añadirlos.
Medidas del favicon para una web: la lista corta
| Tamaño | Archivo | Dónde se usa |
|---|---|---|
| 16 × 16 px | favicon.ico | Pestañas del navegador y marcadores |
| 32 × 32 px | favicon.ico | Pestañas en pantallas de alta densidad, accesos directos de Windows |
| 48 × 48 px | favicon.ico | Windows y resultados de búsqueda de Google |
| 180 × 180 px | apple-touch-icon.png | Pantalla de inicio de iPhone y iPad |
| 192 × 192 px | icon-192.png | Android y aplicaciones web instaladas |
| 512 × 512 px | icon-512.png | Pantallas de carga y tiendas de aplicaciones para apps web |
Un favicon.ico con 16, 32 y 48 px, más los tres archivos PNG, cubre navegadores, móviles y buscadores. Nuestro generador de favicon los crea todos a partir de una imagen.
Tamaño del favicon en píxeles para Google
Google muestra los favicons junto a los resultados de búsqueda. Sus directrices exigen un favicon cuadrado de al menos 8 × 8 píxeles y recomiendan que sea mayor de 48 × 48 píxeles para que se vea bien en distintas superficies (Google Search Central). Un favicon.ico con una imagen de 48 px, o un PNG enlazado de 192 px, cumple esa recomendación.
Formatos del favicon: ICO, PNG y SVG
- ICO guarda varios tamaños en un solo archivo y es lo que piden los navegadores en
/favicon.icocuando no se declara ningún icono. Conserva uno por compatibilidad. - PNG se usa para el Apple touch icon y los iconos de aplicación que lista el manifest.
- SVG funciona como favicon en los navegadores modernos y se ve nítido a cualquier tamaño. Añádelo como icono adicional, no como el único.
Para convertir un PNG que ya tengas en un .ico con los tamaños que elijas, usa el convertidor de PNG a ICO.
Cómo poner el favicon en HTML
Sube los archivos a la raíz de tu web y añade estas etiquetas dentro del <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="/manifest.webmanifest">El manifest lista los iconos de 192 y 512 px. Quita la línea del SVG si no tienes una versión en SVG.
Tamaño del favicon en WordPress, Shopify y Squarespace
Los creadores de webs piden una sola imagen y generan los tamaños por su cuenta. WordPress lo llama Icono del sitio y pide una imagen cuadrada de al menos 512 × 512 píxeles. Shopify y Squarespace también aceptan una imagen cuadrada en sus ajustes de marca o de diseño. Sube un PNG cuadrado y grande, deja que la plataforma lo redimensione y comprueba después el resultado en una pestaña del navegador.