<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"> <meta name="theme-color" content="#00805b">
Ajustes del favicon
La vista previa se actualiza al instante
Origen
Fondo
Forma
Nombre del sitio (para el manifest)
Color del tema
favicon.ico (16/32/48), PNG de 16 y 32 px, apple-touch-icon, Android 192/512, site.webmanifest y etiquetas HTML.
Cómo funciona
- 1
Elige un origen
Sube tu logo o una imagen (PNG, JPG, WebP, SVG), o elige de 1 a 3 letras o un emoji.
- 2
Ajusta el aspecto
Elige un color de fondo o transparencia, forma cuadrada, redondeada o circular, y el margen; las vistas previas de la pestaña y de la pantalla de inicio se actualizan al instante.
- 3
Descarga el paquete
Descarga favicon.ico, favicons PNG, iconos de Apple y Android y site.webmanifest en un solo ZIP.
- 4
Añádelo a tu sitio
Sube los archivos a la carpeta raíz de tu sitio y pega las etiquetas HTML copiadas en el <head> de la página.
Características
- ✓Favicon a partir de una imagen, un logo (también SVG), texto o emoji
- ✓16, 32 y 48 px dentro de favicon.ico (el formato clásico que abre cualquier lector)
- ✓PNG favicon-16x16 y favicon-32x32
- ✓apple-touch-icon (180 px, fondo sólido para iOS)
- ✓Iconos de Android de 192 y 512 px + site.webmanifest
- ✓Etiquetas HTML listas para copiar
- ✓Forma cuadrada, redondeada o circular, margen y fondo transparente o de color
- ✓Vista previa en pestaña clara/oscura y en pantalla de inicio
- ✓Tu imagen se queda en tu dispositivo
Preguntas frecuentes
¿Qué archivos incluye el paquete?
favicon.ico (16, 32 y 48 px juntos), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest y favicon-html.txt con las etiquetas HTML.
¿Cómo añado el favicon a mi sitio?
Sube los archivos del ZIP a la carpeta raíz de tu sitio (directamente bajo tu dominio) y pega las etiquetas de 'Copiar HTML' en el <head> de cada página. En sistemas como WordPress, suele bastar con subir el PNG de 512 px en el ajuste 'Icono del sitio'.
¿Puedo usarlo para convertir PNG a ICO?
Sí. Sube la imagen y pulsa 'Solo ICO'; los tamaños de 16, 32 y 48 px se combinan en un único favicon.ico. Pon el margen a cero y el fondo transparente para usar la imagen tal cual.
¿Y si mi logo no es cuadrado?
'Ajustar' coloca el logo entero en el cuadrado y rellena el resto con el fondo; 'Cubrir' llena el cuadrado y recorta lo que sobra. Para que se lea bien en tamaños pequeños, suele funcionar mejor usar solo el símbolo del logo.
¿Por qué el icono del iPhone no es transparente?
iOS muestra en negro las zonas transparentes de los iconos de la pantalla de inicio y redondea las esquinas por su cuenta. Por eso apple-touch-icon siempre se crea cuadrado y con fondo sólido; si elegiste transparente, se usa blanco.
Mi favicon se ve borroso a 16 px. ¿Qué hago?
16 px es diminuto: las líneas finas y los textos largos desaparecen. Reduce el margen, usa una sola letra o un símbolo sencillo y elige un contraste fuerte entre fondo y texto. La pestaña del navegador de la vista previa muestra el tamaño real.