Cómo agregar icono personalizado en nuestro sitio web

martes, 22 de abril de 2008

Para realizar esta tarea debemos tener previamente una imagen de tipo icono. Podemos generar la imagen online con extensión .ICO o podemos descargarlo ya en este formato desde un repositorio de iconos e imágenes. Generalmente la imagen que se utiliza como icono de las páginas de un sitio web se ubica en la raíz del sitio y se le pone el nombre favicon.ico porque este icono también identifica la web cuando la guardamos en nuestros favoritos. Para definir el icono en las páginas de nuestro sitio web debemos poner la línea siguiente entre las etiquetas <head> de todas las páginas del sitio:

<head> <link href="favicon.ico" type="image/x-icon" rel="shortcut icon"> </head>
Con esto ya tenemos listo nuestro icono personalizado en todo el sitio web. Es importante tener en cuenta que si nuestro archivo de icono no está en la raíz del sitio o tiene otro nombre diferente al que hemos especificado en este artículo, debemos poner la dirección del archivo en la propiedad href de la etiqueta link del código anterior. Por ejemplo si nuestro archivo de icono está en http://www.miweb.com/imagenes/favicon.ico la propiedad href debe quedarnos así:
<head> <link href="http://www.miweb.com/imagenes/favicon.ico" type="image/x-icon" rel="shortcut icon"> </head>
Puede servirle de ayuda el artículo Repositorio de iconos y generador de iconos online para conocer un repositorio de iconos y un sitio web que nos permite generar nuestros propios iconos a partir de una imagen en cualquier formato.

Artículos relacionados


2 comentarios:

Unknown dijo...

Muchas gracias por la info , agregue el icono en mi web pisos flotantes

Iconos Web App dijo...

Estimado esta bueno tu método, pero esta mejor impactarlo en la raíz del dominio creando así que se instala automáticamente en dispositivos móviles como iphone, ipad, tablets, android etc.
Esta muy buena la aplicación la aprendí de un peruano nipon, un maestro.
Saludos.