Computación y electrónica

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

Escrito por craig witt | Traducido por ehow contributor

Estrictamente hablando, no es posible incluir imágenes en la sección de un documento HTML. Lo que los usuarios suelen percibir como una imagen junto al título de la página es en realidad una pequeña imagen llamada favicon. El término es una versión abreviada de "ícono de favorito", llamado así porque suele aparecer junto al título de una página web guardada en los favoritos de tu navegador. Usa Adobe Dreamweaver para insertar un favicon en el título de tu página web.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Necesitarás

  • Adobe Dreamweaver
  • Adobe Photoshop

Lista completaMinimizar

Instrucciones

  1. 1

    Selecciona una imagen apropiada. Los favicons son muy pequeños, sólo miden 16 píxeles cuadrados, por eso la imagen que selecciones debe ser lo suficientemente simple como para ser legible en tamaño miniatura. Los logotipos complejos parecen apretados o pueden tener bordes irregulares al cambiar de tamaño a 16 píxeles. Si te sucede esto, considera el uso de una imagen alternativa que no incluya tu logotipo, sino que refleje bien el tipo de contenido de tu sitio web o en la gama de colores del sitio. En cualquier caso, asegúrate de que tu imagen sea un cuadrado perfecto para asegurar una reducción.

  2. 2

    Cambia el tamaño de la imagen. Luego de elegir una imagen para reducir, abre el archivo en el Photoshop. En el menú en la parte superior de la pantalla, selecciona "Imagen", y luego haz clic en "Tamaño de imagen". En el cuadro de diálogo que se muestra, cambia el ancho y el alto de la imagen a 16 píxeles, y por último haz clic en "Aceptar".

  3. 3

    Guarda tu imagen como un archivo GIF o PNG. Estos tipos de archivos casi no experimentan problemas cuando se tienen que convertir al formato ICO en el paso siguiente. Para guardar tu imagen en uno de esos formatos, selecciona "Archivo" en el menú superior de Photoshop, y luego en "Guardar como". Dale al archivo favicon un nombre y haz clic en el menú desplegable debajo del campo del nombre de archivo y selecciona la opción "GIF" o "PNG".

  4. 4

    Convierte la imagen al formato ICO. Photoshop no puede guardar este tipo de archivo por su cuenta. En su lugar, debes descargar un conector o usar una utilidad web. Por ejemplo, usa el generador gratuito de favicon desde el sitio web "favicon.cc" (mira en las Referencias). Desde la página principal de este sitio, haz clic en el botón "Importar imagen". Ubica el archivo GIF o PNG creado en el paso 3 y haz clic en "Subir". En unos pocos segundos, la utilidad va a transformar tu archivo en una imagen de 16 píxeles cuadrados. Para guardarlo en tu computadora con el formato ICO, busca el título con la etiqueta "Vista previa" en la parte inferior de la página, y luego haz clic en "Descargar favicon". Guarda este archivo en la carpeta con el resto de los archivos de tus páginas web.

  5. 5

    Agrega el favicon a tu sitio web. Va a enlazar las páginas web individuales de la misma manera en que lo hacen los archivos externos, tales como JavaScript y CSS. Abre tu página web con Dreamweaver, luego cambia el código seleccionando la opción "Ver" en el menú de la parte superior de la pantalla y haz clic en la opción "Código". Luego, incluye el siguiente código <title> tags: <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /> <link rel="icon" href="images/favicon.ico" type="image/x-icon" />. Este código asume que el favicon existe en la carpeta de imágenes. Si colocas el favicon en otra parte, actualiza la ubicación del contenido. ¿Por qué necesitas incluir dos enlaces? Por la compatibilidad entre navegadores. Internet Explorer 7 se encarga de los favicons de una forma diferente que otros navegadores y requiere de una única regla para garantizar una presentación correcta.

  6. 6

    Guarda tu página web, y luego ábrela en tu navegador. Ahora verás tu favicon. Si tu navegador ya estaba abierto, puede ser que tengas que cerrarlo por completo y reiniciarlo antes de que aparezca el favicon. También ten en cuenta que algunos navegadores muestran favicon para los títulos de las páginas situadas en la carpeta de Favoritos, y no en el título en sí en la barra del navegador.

Más galerías de fotos

comentarios

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media