Crear y utilizar Favicon para tu web

Posted by in Blog, Diseño, Internet, Manuales, Web

Favicon, del inglés favorites icon (icono de favoritos), también conocido como icono de página, es aquella pequeña imagen que aparece en algunos navegadores junto a la dirección de una página web. Los navegadores gráficos suelen mostrar el favicon de la página visitada, si ésta lo posee, en la barra de direcciones y en el encabezado de la pestaña correspondiente.

Ejemplo:


Vista del favicon de mi blog en la barra de dirección, en favoritos, y en la pestaña.



Características

  • Dimensiones 16×16px
  • 16 colores (4 bits)
  • Formato .ico

En algunos navegadores puedes usar iconos de mayor tamaño y más colores, también otros formatos como .gif o .png, pero si quieres que tu icono funcione correctamente en cualquier navegador, utiliza el tamaño de 16×16px con 16 colores y en formato .ico.


Como hacer uno para tu web

Hay varias páginas web que te generan ya el favicon en formato .ico, y una de ellas, que fue la que yo utilizé es: http://www.favicon.cc/

Puedes hacerlo de dos formas:

  1. Tú mismo puedes dibujarte el favicon a tu gusto y te va mostrando como quedaría en la barra de direcciones y pestaña.


    Vista de como va quedando el favicon dibujado.

  2. La otra opción es subir una imagen y te generará el favicon, puedes dejar que ajuste automáticamente el favicon o que sea la misma imagen reducida a 16×16px de tamaño.


    Formulario de la imagen que subirás para generar el favicon.

Generadores de Favicon online:


Integrar en nuestra web

Subimos el favicon al servidor y copiamos la ruta, por ejemplo: http://blog.pdropablo.net/favicon.ico

Modificar el HTML y ponemos el siguiente código dentro de la etiquetas <head> y </head>:

<link rel="shortcut icon" href="http://blog.pdropablo.net/favicon.ico" />

Recordad cambiar mi ruta de ejemplo por la vuestra, y recomiendo que siempre salga la ruta de la web: http://www.tuweb.com/favicon.ico, así no tendrás problema de que te desaparezca el favicon en alguna página de tu web.


Y listo, ya tendríamos nuestro favicon instalado en nuestra página web
😀