11 de abril de 2011

¿Cómo crear un Favicon sin usar un programa?

En este artículo os voy a explicar, cómo crear un icono favicon estático o animado usando una aplicación online que convierte una imagen en formato .jpg a formato .ico, que es el formato que usaremos para insertar nuestro icono favicon en nuestras páginas Web, para que el logotipo de nuestra empresa o marca personal aparezca en la pestaña del navegador, dando un aspecto más profesional y corporativo a todas nuestras páginas Webs.

Personaliza un icono favicon
Cómo personalizar un icono favicon
El favicon, que generamos con una aplicación online aparecerá en la pestaña del navegador cuando el usuario cargue nuestra página Web en su navegador, pero también conseguiremos que el usuario reconozca nuestra página Web, cuando la guarde en la carpeta de favoritos de su navegador, porque este icono favicon aparece justo al lado del enlace, diferenciándolo del resto de las páginas Web que tenga guardadas en su carpeta de favoritos.

Para crear un icono favicon a partir de una imagen en formato .jpg tendremos guardar la imagen con el formato .ico, usando algún programa de edición de imágenes o podemos usar alguna de las herramientas o aplicación Web que existen en Internet y que permiten convertir una imagen jpg a ico.

Una vez, que hemos creado el favicon con alguna de las herramientas online, que existe a disposición de los usuarios en Internet para crear un favicon online, tendremos que subir a nuestro servidor Web o hosting nuestro icono favicon, para posteriormente poderlo enlazar mediante la etiqueta “link” de HTML en cada una de las páginas Webs de nuestro Sitio Web.

También podemos crear el icono favicon usando un programa de edición de imágenes, como puede ser: Gimp o cualquier otro programa de edición de imágenes que permite guardar imágenes con la extensión .ico.

¿Qué herramienta online vamos a usar para crear un favicon?


Herramienta online crear favicon
Herramienta online para crear Favicon

Si seguís la lectura, os voy a explicar, cómo crear un favicon con un generador de iconos favicon online y cómo insértalo en las páginas Webs de una forma muy sencilla, con la ventaja de no necesitar saber usar ningún programa de retoque digital de imágenes.

Pero antes tenemos que saber, que la imagen que vamos a usar para crear el icono favicon tiene que tener los mismo valores en el ancho y en el alto, es decir, que la imagen debe ser cuadrada, para que el resultado del generador online de iconos favicon sea perfecto y profesional, por lo tanto y como ha sido mi caso, tendremos que recortar la imagen para que cumpla con esta condición y que tenga el mismo valor tanto en el ancho y como en el alto, no importa el tamaño estos valor, pero mi consejo es que no sobrepasen de los 300 pixels, para no enviar una imagen demasiado grande y pesada al generador online de iconos favicon. Y obtener un icono favicon online perfecto que se pueda usar en todas las páginas Web de nuestro Sitio Web.

Una vez que tengamos la imagen (cuadrada), abrimos el navegador y nos dirigimos a esta página Web:
http://www.chami.com/html-kit/services/favicon/
Cuando se cargue esta página Web, pulsamos el botón examinar para cargar la imagen, que vamos a usar desde nuestro ordenador para generar online el icono favicon, una vez que hemos seleccionado la imagen en nuestro ordenador, pulsamos el botón "Generate Favicon.ico", se cargará una página Web, que nos indica que ya se ha generado el favicon de la imagen que hemos subido al generar online el icono favicon, esta página nos permite elegir la opción “Download Favicon Package” para descargar el favicon generado online o podemos personalizar el favicon eligiendo la opción “Customize”, que es la opción que en este artículo voy a explicar.

Sube la imagen para Favicon
Sube la imagen para el Favicon a la herramienta online

¿Cómo crear un icono favicon animado con el fondo transparete?


Una de las ventajas, que nos ofrece esta aplicación Web para generar online un favicon con respecto a otros generadores online, es este generador online de iconos favicon nos permite la opción de crear un favicon animado o estático, con o sin el fondo transparente, una opción no la permite la mayoría de los generadores online de iconos favicon, pero este generador de iconos favicon permite crear un icono favicon animado y con el fondo transparente.

Cuando pulsamos el botón “Customize” se cargará una página Web que nos permite personalizar el favicon, donde podremos cambiar los siguientes valores para generar online el favicon.

Descargar Favicon online
Descargarte el Favicon online creado
Las opciones que podemos modificar para generar online el icono favicon animado, podemos destacar:
  • Nos permite escribir y editar un texto que aparece cuando se cargue el icono favicon, pero tenemos que tener cuidado al escribir el texto de no borrar {PIC1}. Una vez que hemos escrito el texto que va aparecer en el icono favicon, pulsamos el botón de OK.
  • Podemos editar y cambiar el color que va a tener el texto, una vez que hemos elegido el color, pulsamos el botón de OK.
  • Editamos el color de fondo que va a tener el favicon, pero si lo queremos podemos crear un favicon con el fondo transparente, elegimos esta opción “transparent” y pulsamos el botón de OK.
Para finalizar y descargar el icono favicon, pulsamos el botón Download Favicon Packager, y guardamos el archivo que se genera.

¿Cómo y en dónde se inserta un favicon en las páginas Webs?


Lo primero que tenemos que hacer, es descomprimir la carpeta que hemos descargado en el ordenador, abrimos el fichero ReadMe.txt para leer las indicaciones y qué línea de código HTML tendremos que pegar en todas páginas Webs de nuestro Sitio Web y en dónde.

Concretamente tendremos que pegar esta línea de código HTML, entre las etiquetas de encabezado del documento de HTML, es decir, entre la etiqueta de apertura y cierre: <head></head>.

Para insertar un favicon estático:


<link rel="shortcut icon" href="favicon.ico" >

Para incluir el favicon animado:


<link rel="icon" type="image/gif" href="animated_favicon1.gif" >

En el caso de que el icono favicon lo tengamos guardado en otra carpeta que no sea la carpeta raíz del hosting o servidor Web, tendremos que modificar el atributo href para indicar en qué directorio o carpeta hemos guardado el favicon en nuestros hosting, si el favicon lo hemos subido al directorio raíz de nuestros hosting, esta línea de código se quedaría tal cual, pero si hemos cambiado el directorio y lo guardamos por ejemplo en la carpeta de imágenes, el código que tendríamos, que insertar entre la etiquetas <head></head>, sería así:

Para el favicon estático:


<link rel="shortcut icon" href="./imagen/favicon.ico" >

Para el favicon animado:


<link rel="icon" type="image/gif" href="./imagen/animated_favicon1.gif" >

Un ejemplo de código HTML para probar, como va a verse en la pestaña del navegador un icono favicon animado generado online con esta aplicación Web, puede ser:

<html>
<head>
<title>Ejemplo</title>
<link rel="icon" type="image/gif" href="./imagen/animated_favicon1.gif" >
</head>

<body>
<div>Prueba de Favicon</div>
</body>
</html>

¿Por qué es importante que las páginas Webs tengan un favicon?


Es importante que las páginas Webs tengan un favicon para el SEO, porque es un factor On Page SEO, que ha de ser tenido en cuenta, ya que cuando se carga una página Web, el navegador hace una petición y busca el enlace del icono favicon para cargarlo en la pestaña del navegador del usuario, en el caso de no encontrarlo devuelve un error 404 de que no ha encontrado o cargado este icono favicon, por lo que la carga de la página Web comienza dando un error, algo que no es muy positivo para nuestro posicionamiento Web.

Este error no significa, que por NO tener un favicon incluido en la página Web, que la página Web no se va a cargar en el navegador del usuario o que no vamos aparecer los resultados de la SERP, pero como he dicho anteriormente, nuestra página Web comienza devolviendo errores y es importante evitar errores de carga durante de las páginas Webs en el navegador del usuario.

Otro aspecto importante es la llamada de atención (CTA), porque el logotipo aparecerá en la pestaña del navegador del usuario y además si el usuario guarda la página Web en su carpeta de favoritos, este icono se guardar junto con la URL de la página Web, lo que le ayudará a diferenciar nuestra página Web del resto de páginas Webs, que tenga el usuario guardas en la carpeta de favoritos de su navegador.

Conclusión


Existe infinidad de herramientas online para generar un favicon en línea, pero debo añadir que esta herramienta nunca me ha defraudado y llevo usándola desde hace muchos años.

Otra ventaja, que nos puede ofrecer esta aplicación Web es que nos permite generar un icono favicon animados o con el fondo transparente, además nos ofrece un fichero de textos con las indicaciones de cómo y en dónde se insertar el icono favicon en las páginas Webs de nuestro Sitio Web, sin ninguna dificultad para aquellos que no han trabajado con HTML.

Espero que os haya servido de ayuda este artículo y que dejéis vuestro comentario sobre, cómo creáis vosotros un favicon, qué herramientas usáis o cualquier duda que os surja. Un saludo:

Antonio Cruz

2 comentarios:

No olvides dejar tu opinión o comentario, entre todos podemos aprender más sobre los temas, que en este Blog se tratan. Y muchas gracias por tu tiempo. 👋😎

Pero sobre todo, no te olvides seguidme en Twitter o Facebook. Gracias. 😎👍