Tecnología

Inicio

Cómo poner una imagen en el título de una página web utilizando Dreamweaver

Cómo poner una imagen en el título de una página web utilizando Dreamweaver


Estrictamente hablando, no es posible incluir imágenes dentro del <title> de un documento HTML. Lo que los usuarios de Internet por lo general perciben como una imagen junto al título de la página es en realidad una imagen pequeña llama un favicon. El término es una versión abreviada de "icono de favorito", llamada así porque más comúnmente aparece junto al título de una página web guardada en la carpeta Favoritos de un navegador web. Utilice Adobe Dreamweaver para insertar un favicon en el título de su página web.

Instrucciones

1 Seleccionar una imagen apropiada. Favicons son muy pequeñas, que mide tan sólo 16 píxeles cuadrados, por lo que la imagen que seleccione debe ser lo suficientemente simple para permanecen legibles en tamaño miniatura. logotipos complejos, con frecuencia se ven apretados o parecen tener bordes dentados cuando se redimensionan a 16 píxeles. Si esto le sucede a usted, considere el uso de una imagen alternativa que no incluya su logotipo, sino que refleja bien el tipo de contenido en su sitio web o paleta de colores del sitio. En cualquier caso, asegúrese de que su imagen es un cuadrado perfecto para asegurar una reducción.

2 Cambiar el tamaño de la imagen. Después de elegir una imagen que reduce así, abra el archivo en Photoshop. En el menú en la parte superior de la pantalla, seleccione "Imagen", luego haga clic en "Tamaño de imagen". En el cuadro de diálogo que aparece, cambiar la anchura y la altura de la imagen de 16 píxeles, a continuación, haga clic en Aceptar.

3 Guardar la imagen como un archivo GIF o PNG. Imágenes GIF y PNG experimentan menos problemas cuando se convierte a formato ICO en el siguiente paso. Para guardar la imagen en uno de estos formatos, seleccionar "Archivo" en el menú superior en Photoshop, a continuación, haga clic en "Guardar como". Dar su archivo favicon un nombre, a continuación, haga clic en el menú desplegable debajo del campo de nombre de archivo y seleccione la opción "Compuserve GIF" o "PNG". Clic en Guardar."

4 Convertir la imagen a formato ICO. Photoshop no puede guardar archivos de imagen al formato ICO requerido por su propia cuenta. En su lugar, debe descargar un plug-in de Photoshop o utilizar una utilidad web. Por ejemplo, utilizar el generador de favicon gratuitamente del sitio de favicon.cc (ver Referencias). Desde la página principal de este sitio, haga clic en el botón "Importar imagen". Busque el archivo GIF o PNG creado en el paso 3 y haga clic en "Subir". Al cabo de unos segundos, la utilidad transformar el archivo de imagen de 16 píxeles cuadrados en. Para guardar esta a su ordenador en formato ICO, busque el título etiqueta "Vista previa" en la parte inferior de la página, a continuación, haga clic en "Descargar Favicon." Guarde este archivo en la carpeta con el resto de sus archivos de páginas Web.

5 Añadir el favicon a tu sitio Web. Favicons enlazan a páginas web individuales de la misma manera como archivos externos, tales como JavaScript y hojas de estilo. Abra su página web en Dreamweaver, a continuación, cambie a la vista Código mediante la opción "Ver" del menú en la parte superior de la pantalla y haciendo clic en la opción "Código". A continuación, incluir el siguiente código entre la apertura y el cierre de etiquetas <head> de su página web y después de las etiquetas <title>:

<Link rel = "icono de acceso directo" href = "images / favicon.ico" type = "image / x-icon" />
<Link rel = "icono" href = "images / favicon.ico" type = "image / x-icon" />

Este código se supone existe el favicon en la carpeta de imágenes. Si coloca el favicon en otro lugar, actualizar la ubicación del contenido en cada atributo href. ¿Por qué es necesario incluir dos enlaces? la compatibilidad entre navegadores. Internet Explorer 7 se encarga de faviconos diferente que otros navegadores y requiere una regla única para garantizar una presentación precisa.

6 Guardar la página web, a continuación, abrirlo en su navegador. Ahora verá su favicon. Si el navegador ya está abierto, puede que tenga que cerrar por completo y lo reinicia antes de que aparezca el favicon. También tenga en cuenta que algunos navegadores muestran iconos de favoritos para los títulos de página situados en la carpeta Favoritos solamente, no la barra de título del navegador en sí.