¿Cómo se hace un favicon y cómo lo genero?

como crear un favicon

Actualizado el día 17 de mayo de 2023 por Santos Muñoz Tebar

En este post, te mostraré cómo crear un favicon de aspecto profesional para tu sitio web, ya que, al crear un blog, a veces se nos olvidan los pequeños detalles. Incluso si nunca antes han creado ningún otro tipo de iconos, creo no equivocarme al afirmar que la mayoría de las personas que lean esto habrán conseguido hacer un favicon en algún momento.

De hecho, generar un favicon es más fácil de lo que puedes imaginar. Si no usas programas para el tratamiento de imágenes, también puedes crearlo online o descargar un favicon de algún espacio web.

Qué es un Favicon y para qué sirve

Sus principales características son:

  1. Se pronuncia fave-icon.
  2. Es una imagen pequeña e icónica que representa su sitio web.
  3. Se encuentra con mayor frecuencia en la barra de direcciones del navegador web, pero también se puede usar en listas de marcadores y agregadores de feeds.
  4. Está diseñado para coincidir con el logotipo o tema de un sitio web.
  5. Facilita que los usuarios tengan una manera rápida de reconocer un sitio web.

Otras curiosidades de los favicons son:

  1. Han existido desde principios de la década de 2000 y son compatibles con todos los principales navegadores web.
  2. Firefox, Internet Explorer y Safari los muestran en la barra de direcciones, pero Google Chrome solo los muestra en las pestañas de la página.
  3. La mayoría de los navegadores los admiten guardados como archivos .GIF, .PNG o .JPG, pero Internet Explorer solo muestra favicons guardados en el formato .ICO.

¿Cuál es el origen de la palabra favicon?

Algunas claves sobre el origen de estos iconos son:

  1. Aparecieron por primera vez en Internet Explorer 5.
  2. Cuando un usuario marcaba un sitio web como favorito para poder acceder a él de manera rápida, en el listado aparecía el nombre de la página junto al icono. De ahí la denominación “icono de un sitio marcado como favorito“.
  3. Al principio, colocar un icono de este tipo en la raíz de un sitio web provocaba que apareciera una imagen cuadrada de 16 píxeles junto a la URL en la barra de direcciones y en las listas de marcadores, sin requerir HTML.
  4. También son llamados iconos de acceso directo.

¿Cómo se crea un favicon?

Crea una imagen de 16 por 16 píxeles de tamaño. Son unas dimensiones muy pequeñas, pero es lo que este formato de icono requiere. También debes limitarte a los colores estándar de Windows.

Si lo deseas, también puedes crear un ícono de 32 por 32 píxeles, que se ajustará al tamaño para el menú Favoritos y la barra de ubicación. Incluso, puedes poner iconos de 16 por 16 y 32 por 32 píxeles en el mismo archivo de icono. Windows usará el primero para sus menús y el último cuando el usuario abra una carpeta que está configurada para mostrar iconos grandes.

No obstante, puedes ahorrarte este paso de crear dos tamaños de icono. Hacer el favicon con Photoshop puede ser una buena alternativa para cualquier web.

Guarda la imagen como un archivo ICO (llamado “favicon.ico”, por ejemplo).

Súbelo a tu sitio web o blog. No necesitas cargar uno en cada directorio de tu sitio si no quieres perder espacio. Simplemente, colócalo en su directorio raíz y los navegadores web lo localizarán.

¿Para qué sirve un favicon?

Un favicon es un pequeño icono que sirve para identificar un sitio web en un navegador. La mayoría de los navegadores lo muestran en el lado izquierdo de la barra de direcciones, al lado de la URL. Algunos también pueden mostrarlo en la pestaña del navegador, junto al título de la página. También se guardan automáticamente junto con marcadores o “favoritos”.

La diferencia entre los favicons y los iconos de las aplicaciones es que su propósito no es resumir una acción o superar las barreras del idioma, sino representar el sitio como un poste indicador y extender su marca en el navegador.

Como tal, casi siempre será una versión más pequeña del logotipo del sitio. Afortunadamente, generalmente es más sencillo recrear un logotipo en 16 píxeles que un icono de aplicación.

Si bien los tamaños mucho más grandes también se pueden utilizar en estos días, una versión de 16 px es esencial y un lugar ideal para comenzar si eres nuevo en el diseño de iconos.

Cómo crear un favicon con Photoshop

En primer lugar tienes que tener una imagen que sea cuadrada. Todos los favicon tienen como medida el mismo ancho que alto. Ahora, hay que redimensionar la imagen a 32 x 32 px para que tenga el tamaño de un favicon. Otro tamaño correcto sería 16 x 16 píxeles pero la recomendada es la de 32 píxeles.

A ese tamaño será difícil hacer cualquier modificación del favicon, por lo que si no te gusta su aspecto, te recomiendo que vuelvas al tamaño original y hagas los cambios que creas oportunos desde ahí.

Existen diferentes formatos para poder crear el favicon:

  1. GIF
  2. JPG
  3. PNG

Todos ellos son válidos ya que el último paso será guardarlo como .ico pero el mejor formato de imagen y que nos da mejores opciones es PNG, ya que podremos tener fondo transparente en el favicon. En caso de que tu favicon no necesite fondo transparente, puedes elegir cualquier otra opción y será válida para crear tu archivo.

Bien, ya tenemos el tamaño correcto y el formato elegido y ahora, ¿cómo lo pasamos a .ico y convertimos una imagen en icono?

Pasos necesarios para convertir imagen en .ico con Photoshop

Primer paso: Tenemos que descargar el archivo de photoshop para poder guardar en formato .ico con el programa.

Con Photoshop, no se puede guardar o convertir un archivo desde un jpg o un png a la extensión .ico. Lo positivo, es que ya hay solución para este problema y solo tenemos que descargarnos un archivo y agregarlo a los plugins de Photoshop de nuestro equipo.

Para descargarlo, puedes hacerlo desde estos enlaces:

  1. Descargar aquí la versión del plugins para windows de 32 bits.
  2. Descargar aquí la versión del plugins para windows de 64 bits.

Segundo paso: Ahora nos toca ir a la ruta del programa Photoshop en tu equipo para pegar el archivo en la carpeta plugins.

Una vez tengas el archivo descargado, descomprímelo donde quieras y quédate con el archivo ICOFormat64.8bi.

Ruta correcta: C:Archivos de ProgramaAdobeAdobe PhotoshopPluginsFormato de Archivos

Tercer paso: Guardando o convirtiendo a iconos

Solo tenemos que volver a abrir Photoshop y agregar el Favicon al mismo.

Una vez tengas el archivo abierto y preparado con las medidas perfectas, tienes que ir a Archivo >> Guardar Como y seleccionar la extensión .ICO en el desplegable que aparece abajo.

Si no aparece esa opción, en algún paso se ha cometido algún error, vuelve a repasar la guía y reinicia Photoshop para asegurarte que todo funciona correctamente.

Crear un favicon online o descárgalo

Uno de estos iconos es una forma de destacarse de otras webs. Aunque sea un pequeño recurso, puede ayudar en la estrategia de marketing de contenidos y SEO. Hay muchas estrategias grandes que pueden diferenciar tu sitio web.

Pero, a veces, los pequeños detalles marcan la diferencia. Especialmente, porque muchos sitios web y negocios ignoran esas pequeñas cosas, entre las que se encuentra el favicon.

Crear un favicon online y descargar un favicon son tareas sencillas

Bien hecho, puede dar credibilidad a tu sitio web y generar conciencia de marca. Crear uno online y descargarlo es una de las formas más rápidas y sencillas de conseguir uno de calidad para tu sitio.

Hay numerosas aplicaciones como Favicon.cc, Genfavicon.com, Realfavicongenerator.net o Favicon-Generator.org. Son herramientas versátiles, que te ayudarán a generar estos iconos, también para distintos dispositivos móviles con sistemas operativos variados.

Generar un favicon, útil para ganar profesionalidad

Si hay algo en el funcionamiento de un sitio web que no es esencial, eso es crear un favicon. De hecho, pocas personas incluso notan su existencia y es realmente demasiado pequeño para incluir cualquier información útil en él al hacer un favicon.

Quizás lo más importante sea que la creación de dicho icono agrega profesionalidad a tu sitio y te identifica como un diseñador de páginas web que atiende a detalles de este tipo.

Cuántas personas marcan tu sitio web como favorito

Este elemento solía tener un efecto secundario interesante. Podías averiguar la cantidad de usuarios de Internet Explorer que habían marcado tu sitio como favorito, simplemente contando las solicitudes que tenías en los registros de tu servidor web.

A partir del número de solicitudes, puedes estimar el número total de personas que marcan su sitio aplicando esta fórmula: número de marcadores Explorer dividido por la fracción de tus visitantes que utilizan ese navegador.

Sin embargo, este efecto hoy ya no es relevante. Todos los navegadores principales cargan el favicon.ico para mostrar en la barra de direcciones web de tus visitantes, tanto si colocan tu sitio en sus favoritos (o marcadores) como si no lo hacen.

5/5 - (7 votos)

1 comentario en “¿Cómo se hace un favicon y cómo lo genero?”

  1. Slot

    Pensé que era muy fácil hacer un favicon. Pero ahora entiendo que hay muchos matices en este asunto: forma, color, significado … Tuve suerte de encontrar tu artículo. Ahora sé qué favicon es perfecto para mi sitio web. ¡Gracias!

Los comentarios están cerrados.

Scroll al inicio