Saltar al tutorial
lil cactus

Cómo crear un archivo ICO para el favicon

Principiante4 minutosActualizado

Respuesta rápida

En Lil Cactus, abre tu diseño y elige Archivo y luego Exportar y luego ICO… En Nombre de archivo, escribe favicon.ico. En Tamaños de icono, deja marcados los seis tamaños (de 16 a 256 px; es el valor predeterminado) y haz clic en Exportar. La descarga contiene las seis versiones cuadradas en un solo archivo ICO.

Los seis tamaños exportados del icono de la hoja sobre franjas clara y oscura: 16, 32, 48, 64, 128 y 256 píxeles en la fila superior de cada una, con 16 y 32 píxeles ampliados cuatro veces debajo
Los seis tamaños de favicon.ico sobre un fondo claro y uno oscuro: 16, 32, 48, 64, 128 y 256 px en la fila superior, con 16 y 32 px ampliados 4× debajo.
Tiempo
4 minutos
Nivel
Principiante
Necesitas
Un icono u otro diseño abierto en el editor
Funciona con
PNG, JPG, SVG, PSD y proyectos de Lil Cactus (se conserva la transparencia)
Abrir el ejemplo en Lil CactusUsar tu propia foto

Gratis y sin registro. Tu foto no sale de tu equipo.

Un favicon es el pequeño icono que aparece junto a la pestaña o el marcador de un sitio web. Las formas sencillas con zonas de color amplias se leen mejor a tamaño pequeño. Esta práctica usa una hoja de dos tonos con una sola nervadura clara.

Exportar un favicon ICO en cuatro pasos

  1. Abre el diseño

    Abre el diseño de práctica desde esta página. Con tu propio archivo, elige Archivo y luego Abrir… y selecciona la imagen. El tablero de cuadros alrededor de la hoja indica su fondo transparente. Puede aparecer un breve aviso sobre el suavizado de los bordes del SVG; se cierra solo.

    Menú Archivo con Abrir rodeado
    Carga el diseño que quieres convertir en icono.

  2. Elige Archivo › Exportar › ICO…

    Elige Archivo y luego Exportar y luego ICO… Se abre el cuadro de diálogo Exportar como ICO con una vista previa del diseño.

    Menú Archivo y submenú Exportar con ICO rodeado
    Abre el cuadro de diálogo de exportación ICO.

  3. Elige el nombre de archivo y los tamaños

    En Nombre de archivo, escribe favicon.ico. En Tamaños de icono, deja marcados 16, 32, 48, 64, 128 y 256. Son los seis tamaños disponibles.

    Campo Nombre de archivo de ICO con favicon.ico, rodeado
    Pon nombre al archivo de icono que se descarga.
    Opciones de exportación ICO con 16, 32, 48, 64, 128 y 256 marcados y el grupo Tamaños de icono rodeado
    Cada número indica la anchura y la altura de un icono cuadrado, en píxeles.

  4. Exporta el ICO

    Comprueba que el pie del cuadro de diálogo dice 6 tamaños de icono y haz clic en Exportar. Tu navegador guarda favicon.ico con sus controles de descarga o de ubicación de guardado.

    Pie del cuadro de diálogo ICO con 6 tamaños de icono, Cancelar y el botón Exportar rodeado
    Comprueba el número de tamaños seleccionados antes de exportar.

Usar el icono en tu sitio web

Sube favicon.ico a la carpeta raíz de tu sitio, para que se abra en /favicon.ico. También puedes enlazarlo desde el <head> de la página con <link rel="icon" href="/favicon.ico"> (consulta la referencia de iconos de MDN).

Los navegadores guardan los favicons en caché, así que un icono actualizado puede tardar en aparecer o necesitar que recargues la página.

Si el icono de 16 px se lee mal

Simplifica el diseño: menos detalles, formas más grandes y trazos más gruesos. La figura del principio de esta página muestra lo que sobrevive a 16 px: las dos zonas de color amplias de la hoja y su única nervadura gruesa.

Comprueba que la forma destaca tanto en barras de pestañas claras como oscuras. En la figura, la mitad verde oscuro de la hoja casi desaparece sobre el fondo oscuro, y es la mitad verde claro la que sostiene la forma. Un diseño de un solo color oscuro apenas se vería ahí.

Qué hacer a continuación

Archivos ICO para favicon: preguntas y respuestas

¿Puedo convertir un PNG o un JPG en ICO?

Sí. En Lil Cactus, los dos formatos se pueden abrir y exportar con los controles de ICO. El diseño visible se convierte en el icono.

¿Un ICO puede tener fondo transparente?

Sí. En Lil Cactus, ICO conserva la transparencia que ya tenga tu diseño. Quita antes un fondo liso si quieres que el espacio alrededor del icono quede despejado.

¿Qué pasa con una imagen rectangular en un ICO?

En Lil Cactus, la imagen se encaja dentro de cada cuadrado seleccionado sin deformarse. Un relleno transparente ocupa el espacio sobrante.

¿Puedo exportar un ICO con un solo tamaño?

Sí. En Lil Cactus, deja seleccionado solo el tamaño que necesitas en “Tamaños de icono”. El ICO contendrá ese único tamaño.

¿Puedo hacer un ICO de 512 × 512 px?

No. En Lil Cactus, el tamaño máximo de ICO es 256 × 256 px. Usa PNG cuando necesites dimensiones mayores en píxeles.

¿Se sube mi imagen cuando creo un ICO?

No. Lil Cactus crea el ICO en tu navegador y lo descarga en tu dispositivo; la imagen no se envía a ningún servidor. Las estadísticas de uso opcionales se describen en la página de privacidad.

Publicado  · Última revisión