Uno de los aspectos principales a la hora de generar la identidad de una página web, es sin duda, incluir un favicon dentro de la Web. Este diminuto icono es muy importante para generar y aportar valor a una Web.
Seguid leyendo y os enseñaré lo sencillísimo que es poner un Favicon en vuestra Web...
⬇️ Compra en Amazon el hardware que utilizo ⬇️
Un favicon es un icono que se añade a una página web y le aporta un valor añadido, haciendo que los visitantes puedan identificar claramente la imagen de la web. La palabra "favicon" procede del inglés de juntar las palabras "favorites icon". El icono favicon se muestra justo antes del título de la página en las pestañas del los navegadores Web. En la siguiente imagen se pueden ver todos los favicon de las páginas web abiertas en Google Chrome:
Favicons en Google Chrome
Instalar un Favicon en tu web mejora la presencia en Internet
Cuando apareció esta nueva funcionalidad, el único formato admitido para el favicon era el ico. Actualmente, se pueden usar ico, gif y png, siendo el png el mas extendido y compatible a día de hoy. Respecto al tamaño, el tamaño original era de tan solo 16x16 pixels, pero en la actualidad, y debido a las resoluciones de las pantallas, este tamaño se ha incrementado, siendo habitual encontrar favicons de 32x32, 64x64, 128x128 y superiores... eso si, el formato siempre cuadrado a ser posible.
El icono es muy pequeño y cuanto más complicado sea el logotipo o la imagen que quieras poner, peor se verá. Por tanto, hay que elegir una imagen claramente reconocible que contenga el menor número de líneas y colores.
Los dispositivos móviles también utilizan el favicon cuando un usuario quiere crear un enlace directo a una web, es decir, el icono táctil de la pantalla de inicio:
Luego, existen algunas plataformas que tienen favicons con unos tamaños predeterminados diferentes a los habituales, por ejemplo:
| Plataforma | Tamaño favicon |
|---|---|
| Google TV | 96×96 |
| Opera Coast | 228×228 |
| Ipad Retina con iOS 7 o superior | 152×152 |
| Ipad Retina con iOS 6 o inferior | 144×144 |
| Ipad Mini o primeras generaciones con iOS 7 o superior | 76×76 |
| Ipad Mini o primeras generaciones con iOS 6 o inferior | 72×72 |
| Iphone Retina con iOS 7 o superior | 120×120 |
| Iphone Retina con iOS 6 o inferior | 114×114 |
Actualmente muchos programas de edición de imágenes, permiten crear ficheros ico, png y gif que se pueden utilizar para generar el favicon y usarlo en una página web. Cuando salió esta nueva funcionalidad, el formato aceptado era solamente ico, pero posteriormente se empezaron a aceptar otros formatos siendo ahora mismo el mas difundido el formato png. Tan solo tenemos que crear un fichero vacío en el editor de imágenes (Gimp, Photoshop, Illustrator...) y guardarlo (generalmente) como favicon.ico, favicon.png, favicon.gif con la resolución y formato indicado en el anterior apartado y subirlo al servidor donde esté alojada la página web. Es super sencillo crear un favicon.
Para incluir el Favicon en nuestra página web, tan solo deberemos incluir una línea dentro del <head></head> de nuestra página Web. En función del formato del favicon, la línea a incluir será de una forma u otro pero casi son similares.
Para incluir un favicon en formato .ico , debemos utilizar la siguiente línea:
<link rel="icon" type="image/x-icon" href="/RUTA/FICHERO_FAVICON.ico">
Para incluir un favicon en formato .gif , debemos utilizar la siguiente línea:
<link rel="icon" type="image/gif" href="/RUTA/FICHERO_FAVICON.gif">
Para incluir un favicon en formato .png , debemos utilizar la siguiente línea:
<link rel="icon" type="image/png" href="/RUTA/FICHERO_FAVICON.png">
ENJOY!
Soy Ingeniero Téc. Industrial Mecánico, Administrador de Sistemas Informáticos, Desarrollador de Aplicaciones Informaticas Web, Técnico Superior en PRL, Experto en Energías Renovables... y trabajo actualmente como Senior DevOPS en HP SCDS.
Esta página web utiliza cookies propias y de terceros para fines funcionales (permitir la navegación web), para optimizar la navegación y personalizarla según tus preferencias asícomo para mostrarte publicidad en base a tu perfil de navegación (p.e páginas visitadas).
Login con Google
Login con Microsoft
Login con GitHub