Cómo poner una imagen en el título de una página web con Dreamweaver (En 6 Pasos)

Por craig witt

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.

Paso 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.

Paso 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".

Paso 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".

Paso 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.

Paso 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 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. </p> <h3>Paso 6</h3> <p>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. </p> </div> <div data-ad-unit-name="adsense-main" class="main-ad"></div> <div id="references"> <h3><span>Referencias</span></h3> <ul class="colorlist"> <li><a href="https://www.favicon.cc/" target="_blank" rel="nofollow">"Favicon.cc": generador de favicon</a></li> </ul> </div> <div class="viglink-insert" style="display:none"></div> <div data-app="widget-rcp"></div> </div> <div id="sidebar"> <div data-ad-unit-name="rightrail" data-ad-unit-index="1"></div> <div class="right-rail-promo"> <img src="//techlandia.com/public/images/logo-fallback.svg" alt="techlandia"> </div> <div data-ad-unit-name="rightrail" data-ad-unit-index="2"></div> </div> </div> </article> </div> </div> <div data-ad-unit-name="adhesion" data-ad-unit-index="1" class="fixed-bottom-ad adhesion no-print"></div> </div> <footer id="footer"> <div class="footer-logos"> <a href="//techlandia.com/" rel="home"> <img src="/public/images/logo.svg" alt="Techlandia"> </a> <a href="https://www.leafgroup.com"> <img src="/public/images/leafgroup-logo-grayblue.png" alt="Leaf Group" style="width:80px; height:auto"> </a> </div> <div class="footer-text"> <div class="footer-links"> <a aria-label="policy item" href="//techlandia.com/about-us">Acerca de</a> <a aria-label="policy item" data-event="footer-nav" href="//techlandia.com/accesibilidad">La accesibilidad del sitio web</a></li> <a aria-label="policy item" href="//techlandia.com/privacy">Aviso de Privacidad</a> <a aria-label="policy item" href="//techlandia.com/cookie_notice">Aviso de Cookies</a> <a class="ot-sdk-show-settings">Gestionar Preferencias</a> <a aria-label="policy item" href="//techlandia.com/privacy#section_12_2">Aviso de colección de California</a> <a aria-label="policy item" href="//techlandia.com/terms-of-use">Términos y Condiciones</a> <a aria-label="policy item" href="//techlandia.com/copyright-policy">Derechos de Autor</a> </div> <div class="footer-copy"> <div id="copyright-section"><span>techlandia.com © 2001-2024 Leaf Group Ltd., all rights reserved</span></div> </div> </div> </footer> <script src="//techlandia.com/dist/js/chunk-vendors.js"></script><script src="//techlandia.com/dist/js/main.js"></script> <div id="out-of-page"></div> </body> </html>