Generador de favicon
Si te tomas en serio la marca de tu negocio, los favicons deberían formar parte de tu arsenal de marketing. No son el aspecto más importante de un sitio web, pero son detalles como éste los que hacen que los clientes potenciales te recuerden y te distingan de la competencia.
Favicon, abreviatura de «icono favorito», fue originalmente una nueva función del navegador Internet Explorer en 1999. Cuando los usuarios marcaban un sitio a través de Internet Explorer, aparecía el icono junto al nombre del sitio web en la lista de favoritos.
Generador de iconos de aplicaciones
Artículo AccionesAñadir a la pantalla de inicioAñadir a la pantalla de inicio (o A2HS, por sus siglas en inglés) es una función disponible en los navegadores modernos que permite al usuario «instalar» una aplicación web, es decir, añadir un acceso directo a su pantalla de inicio que represente su aplicación web (o sitio) favorita para poder acceder a ella posteriormente con un solo toque. Esta guía explica cómo se utiliza el A2HS y lo que debe hacer como desarrollador para permitir que sus usuarios lo aprovechen.¿Por qué A2HS? El A2HS se considera parte de la filosofía de las aplicaciones web progresivas, que dan a las aplicaciones web las mismas ventajas de experiencia de usuario que las aplicaciones nativas para que puedan competir en la guerra de ecosistemas actual. Parte de esto es el simple gesto de acceder a una aplicación tocando su icono en la pantalla de inicio, y que luego aparezca limpiamente en su propia ventana. ¿Qué navegadores son compatibles con A2HS? A2HS es compatible con todos los navegadores móviles, excepto con iOS webview. También es compatible con algunos navegadores de escritorio de Chromium.
Para conocer los detalles exactos, consulte caniuse.com. ¿Cómo se utiliza? Hemos escrito un sitio web de ejemplo muy sencillo (vea nuestra demostración en vivo, y también el código fuente) que no hace mucho, pero que se ha desarrollado con el código necesario para poder añadirlo a una pantalla de inicio, así como un service worker para poder utilizarlo sin conexión. El ejemplo muestra una serie de imágenes de zorros.
Tamaño del favicon
Inicia Illustrator y haz clic en el botón Crear nuevo, o pulsa Control+N (Windows) o Comando+N (macOS). Selecciona la pestaña Web e introduce un tamaño a la derecha; nosotros escribimos 400 px para la anchura y la altura. Consejo: Es útil trabajar en un formato cuadrado al crear diseños de iconos.
Utilizarás las Guías Inteligentes para organizar los rectángulos de manera que sus centros estén alineados. Arrastra el widget central (círculo en el centro) del rectángulo más pequeño sobre el más grande hasta que veas una guía vertical de color magenta.
Mantén pulsada la herramienta Rectángulo para acceder a otras formas y selecciona la herramienta Elipse. Haz clic y arrastra un círculo hasta que veas que aparecen guías en forma de cruz en el círculo, lo que indica que estás dibujando un círculo perfectamente redondo. Suelta el cursor cuando tenga un tamaño adecuado.
Con la herramienta Elipse seleccionada, pasa el ratón por encima del rectángulo más grande hasta que aparezca la palabra centro. Pulsa Alt (Windows) u Opción (macOS) y arrastra un círculo dibujado desde el centro. Busca las guías del retículo y suelta el cursor cuando el círculo tenga el tamaño adecuado.
Generador de iconos en línea
Si tienes un sitio web, es interesante asociarle un icono. Es lo que se llama un «icono de acceso directo». De hecho, este icono se mostrará en el ordenador del visitante si decide marcar su sitio como favorito. Aparecerá en el menú de favoritos, así como en la barra de direcciones (véase más abajo) si el usuario vuelve a su sitio.
Los iconos de acceso directo funcionan con Microsoft® Internet Explorer® v5.0 o posterior. No tienen requisitos especiales de servidor web y son una gran forma de añadir reconocimiento de marca sin necesidad de que el usuario descargue una versión personalizada de Internet Explorer.
2. Se abre el cuadro de diálogo estándar de Windows® para guardar, seleccione una ubicación específica y especifique favicon.ico como nombre de archivo del icono. Es importante nombrarlo «favicon.ico». Si utiliza un nombre de archivo diferente, no se considerará como un icono de acceso directo.Cargarlo en su sitio web
También puedes asociar el icono a una página web guardando el icono con un nombre de archivo distinto a favicon.ico y añadiendo una línea de código HTML en la sección head de tu documento web. La línea de código incluye una etiqueta de enlace que especifica la ubicación y el nombre del archivo.
