Cómo crear un favicon para tu sitio web (ICO, PNG, iconos de Apple y Android)
En esta página
En resumen: empieza con una imagen cuadrada sencilla, pásala por el generador de favicon de Imgovo, descarga el ZIP, coloca los archivos en la carpeta raíz de tu sitio y pega el HTML proporcionado en el <head> de tus páginas. Los creadores de sitios como WordPress, Shopify y Wix suelen tener un ajuste de «Icono del sitio» donde puedes subir en su lugar el PNG de 512 px.
Para qué sirve un favicon
El favicon es el pequeño icono de la pestaña del navegador. También aparece en los marcadores y en el historial, y los móviles usan iconos relacionados cuando alguien añade tu sitio a la pantalla de inicio. Un sitio sin favicon muestra un marcador genérico, lo que da aspecto de inacabado.
Como el icono se muestra muy pequeño, el diseño importa más que la resolución.
Diseñar para tamaños diminutos
- Mantenlo simple. Una forma contundente o una o dos letras funcionan. Un logotipo detallado se convierte en una mancha a 16 × 16 píxeles.
- Usa un contraste fuerte. Las pestañas pueden ser claras u oscuras.
- Prefiere una imagen de origen cuadrada. Si tu logotipo es ancho, colócalo sobre un lienzo cuadrado.
- Usa un fondo transparente si quieres que el icono se integre con la pestaña. Con las fotos, el generador recorta en cuadrado desde el centro.
- Deja un poco de espacio. Los ajustes de margen interior y esquinas redondeadas ayudan a que la forma respire.
Si tu logotipo tiene un fondo que no quieres, Eliminar fondo puede dejarlo transparente primero. Consulta Cómo quitar el fondo de una foto. Para dar a un logotipo cuadrado esquinas redondeadas o forma de círculo, Imagen redondeada guarda un PNG transparente.
Paso a paso
- Abre el generador de favicon.
- Añade tu imagen. Se aceptan PNG, SVG, JPG, WebP y más.
- Elige cómo se ajusta: recortar en cuadrado desde el centro o ajustar la imagen completa.
- Elige el fondo (transparente o un color), el margen interior y las esquinas redondeadas. Los valores predeterminados del margen interior y de las esquinas redondeadas son del 0 %. También puedes introducir un nombre de aplicación opcional.
- Revisa las vistas previas.
- Descarga el ZIP.
Deshacer y Rehacer funcionan con Ctrl+Z y Ctrl+Mayús+Z.
Qué contiene el ZIP
| Archivo | Tamaño | Se usa para |
|---|---|---|
| favicon.ico | 16, 32 y 48 px en un solo archivo | Pestañas del navegador, navegadores antiguos |
| favicon-16x16.png | 16 px | Pestañas del navegador |
| favicon-32x32.png | 32 px | Pestañas del navegador, pantallas de alta densidad |
| apple-touch-icon.png | 180 px | Pantallas de inicio de iPhone y iPad |
| android-chrome-192x192.png | 192 px | Android y aplicaciones web instalables |
| android-chrome-512x512.png | 512 px | Android y aplicaciones web instalables, subida como icono del sitio |
| site.webmanifest | – | Describe los iconos de las aplicaciones web instalables |
El icono de Apple recibe un fondo sólido porque los iPhone y los iPad muestran las zonas transparentes en negro.
Añadir los archivos a tu sitio
- Descomprime los archivos en la carpeta raíz de tu sitio, junto a tu
index.html. - Copia el HTML del cuadro «Copiar HTML» del generador.
- Pégalo en el
<head>de cada página, o en el diseño o plantilla compartido de tu sitio.
Un conjunto típico de etiquetas tiene este aspecto. Usa exactamente el fragmento que te da el generador, porque coincide con los nombres de tus archivos:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">En un creador de sitios web, busca el ajuste «Icono del sitio» o «Favicon» y sube el PNG de 512 px. El creador genera entonces los demás tamaños por sí mismo.
Si el nuevo icono no aparece
Los navegadores guardan los favicons en caché de forma muy persistente. Después de subir los archivos nuevos:
- Recarga la página con una recarga forzada.
- Abre el sitio en una ventana privada o en otro navegador.
- Comprueba que
/favicon.icose abre directamente en la barra de direcciones. - Espera. Los buscadores pueden tardar un tiempo en mostrar un icono nuevo.
Crear solo un ICO
Si solo necesitas favicon.ico, usa el botón «Descargar solo favicon.ico». Para otros tamaños, Redimensionar imagen puede crear un PNG sencillo con las dimensiones exactas que necesites. Las dudas sobre formatos se tratan en JPG, PNG, WebP o AVIF.
Privacidad
Tu logotipo nunca sale de tu equipo. Los iconos se crean en tu navegador y el ZIP también se construye allí.
Pruébalo ahora
Abre el generador de favicon, añade tu logotipo y descarga el juego completo de iconos.
Preguntas frecuentes
¿Qué es un favicon?
Un favicon es el pequeño icono que representa un sitio web en las pestañas del navegador, los marcadores y el historial. Se usan iconos relacionados cuando un sitio se añade a la pantalla de inicio de un móvil.
¿Con qué imagen debo empezar?
Lo que mejor funciona es una imagen cuadrada con fondo transparente. Los logotipos sencillos y contundentes y las marcas de letras aguantan mejor que las imágenes detalladas, porque los detalles finos desaparecen a 16 × 16 píxeles.
¿Por qué el icono de Apple tiene fondo?
Los iPhone y los iPad muestran las zonas transparentes en negro, así que el generador las rellena con un fondo sólido, del color que elijas o blanco.
¿Puedo crear solo el favicon.ico?
Sí. Usa el botón «Descargar solo favicon.ico» para obtener únicamente el archivo ICO con varios tamaños.
¿Se sube mi logotipo?
No. Los iconos se crean en tu navegador y el ZIP también se construye allí.