Generador de favicons
Crea favicon.ico, un Apple touch icon, iconos para Android y un manifiesto web a partir de una imagen, en un solo ZIP.
El Generador de favicons convierte un logotipo o una imagen en el conjunto de archivos de icono que necesita un sitio web. Recorta la imagen en un cuadrado centrado y crea favicon.ico (con tamaños de 16, 32 y 48 píxeles), iconos PNG de 16 a 512 píxeles, un apple-touch-icon.png de 180 × 180 y un archivo site.webmanifest, todo en un ZIP. La página también muestra las etiquetas link de HTML que debes pegar en la sección head de tu sitio.
Cómo instalar tus favicons
Descomprime el paquete en la carpeta raíz de tu sitio web y luego añade estas etiquetas dentro del <head> de tu página:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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">Cómo usar Generador de favicons
- 1
Sube tu logotipo
Suelta o elige una imagen PNG, JPG, SVG o HEIC. Una imagen cuadrada de al menos 512 × 512 píxeles da el mejor resultado.
- 2
Asegúrate de que esté centrado
Los iconos se recortan del centro de la imagen. Si tu logotipo no está centrado o la imagen no es cuadrada, recórtala antes a 1:1 con Recortar imagen.
- 3
Descarga el paquete de favicons
Haz clic en Descargar paquete de favicons (ZIP) para obtener todos los archivos de icono y el manifiesto.
- 4
Añádelo a tu sitio web
Sube los archivos a la carpeta raíz de tu sitio, haz clic en Copiar código y pega las etiquetas HTML en la sección head de tus páginas.
Qué hace
- favicon.ico con varios tamaños
- Un solo archivo ICO con iconos de 16 × 16, 32 × 32 y 48 × 48 para pestañas y marcadores del navegador.
- Iconos PNG para cada dispositivo
- Archivos PNG de 16, 32, 48, 64, 128, 192 y 512 píxeles, además de un apple-touch-icon.png de 180 × 180.
- Manifiesto de app web
- Un archivo site.webmanifest que apunta a los iconos de 192 y 512 píxeles para Android y las apps web instalables.
- Tamaños pequeños nítidos
- Los iconos se reducen en varios pasos desde la imagen completa, lo que mantiene más limpias las versiones de 16 y 32 píxeles.
- HTML listo para pegar
- Copia con un clic las etiquetas link de los iconos y del manifiesto.
Preguntas
¿Qué tamaño debe tener la imagen de mi favicon?
Usa una imagen cuadrada de al menos 512 × 512 píxeles para que el icono más grande se vea nítido. Las formas sencillas y los colores intensos siguen siendo reconocibles a 16 × 16.
¿Qué archivos incluye el ZIP?
favicon.ico, de favicon-16x16.png a favicon-512x512.png (16, 32, 48, 64, 128, 192 y 512), apple-touch-icon.png de 180 × 180 y site.webmanifest.
¿Dónde pongo los archivos del favicon?
Súbelos a la carpeta raíz de tu sitio web, la misma donde está tu página de inicio. Después pega las etiquetas HTML que se muestran en esta página en la sección head de cada página.
¿Por qué se corta parte de mi logotipo?
La herramienta toma el cuadrado centrado más grande de tu imagen. Si el logotipo es ancho o no está centrado, recórtalo en un cuadrado con algo de espacio alrededor antes de generar los iconos.
¿Puedo usar un logotipo SVG?
Sí. El SVG se dibuja como imagen y se guarda en archivos PNG e ICO. El ZIP no incluye un favicon SVG.
¿Tengo que editar el archivo del manifiesto?
Sí. site.webmanifest usa el nombre provisional App y colores de tema oscuro. Ábrelo en un editor de texto y cambia name, short_name y los colores para que coincidan con tu sitio.