Un Favicon es un icono asociado a una página web. Los navegadores web muestran este icono en la la barra de direcciones, igualmente al lado del nombre de la página web en la lista de favoritos y en los títulos de las páginas. Los Favicon son de un tamaño 16×16, y de extensión .ico en esta ocasion les explicare como podemos agregar dicho favicon en nuestra web.
Primero vamos a esta pagina: http://www.html-kit.com/favicon/
En esa pagina es donde cargaremos nuetra imagen previamente creada, y nos dara el respectivo archivo favicon.
Simplemente vamos a el imput file en donde esta el ovalo azul en la imagen anterior, seleccionamos nuestra imagen a usar, y luego presionamos en el boton generate favicon al dar clic en el comezara el proceso de crear el favicon, una vez creado, nos quedara la pagina de la siguiente forma:
nos muestra el resultado el cual esta encerrado en el ovalo azul en la imagen anterior, damos clic en dowload favicon package, para descargar el favicon, el cual se descarga de tipo .rar, luego de descargado lo descomprimimos y dos dara 3 archivos, los cuales son dos imagenes uno con extension .ico y otro .gif, el .ico se ubicara al lado del titulo de la pagina en la pestaña, y el .gif se ubicara la lado de la barra de direcciones, adicionalmente agregan un archivo .txt donde explica el codigo a poner dentro de cabezera de cada pagina, al momento de tener las dos imagenes, las ubicamos donde queremas y ponemos el siguiente codigo:
<link href=”favicon.ico” rel=”shortcut icon” />
<link href=”animated_favicon1.gif” rel=”icon” type=”image/gif” />
La Primera Etiqueta Link llama a la imagen.ico y la ubica al lado del titulo de la pagina en la pestaña como ya se habia dicho.
La Segunda etiqueta link llama a la imagen .gif y la ubica al lado dela barra de direcciones como tambien ya se habia dicho.
En los valore href van la ubicacion donde se puso cada imagen.
y listo ya nos queda nuestra web con un favicon, como el que se muestra en mi web.
Eso es todo por este articulo, espero les sea util, y como siempre espero sus comentarios
(Sin evaluar)
Loading...
