Un favicon es algo que todos vemos a diario mientras navegamos por la web, pero muchos de nosotros no lo observamos ni lo necesitamos. Un favicon también tiene muchos otros nombres, algunos de los cuales son el ícono favorito (de ahí el acrónimo favicon), ícono de acceso directo, ícono de pestaña, ícono de sitio web o ícono de marcador. Es la pequeña imagen que vemos en una pestaña, o al hacer un marcador de una página.
The small GeeksforGeeks image shown in the tab is the favicon we are talking about.
Tipos de favicons: los favicons pueden tener diferentes dimensiones, como 16 × 16, 32 × 32, 48 × 48 o 64 × 64 píxeles de tamaño. Además, pueden tener una profundidad de color de 8 bits, 24 bits o 32 bits.
¿Cómo usar un favicon?
Hay dos formas de implementar un favicon:
- Si el favicon está en formato .ico:
- Copie el archivo favicon.ico con el formato correcto en el directorio host del servidor donde se encuentran los archivos del sitio web. Generalmente, esto es public_html , pero puede cambiar según la configuración o el proveedor de alojamiento.
- El navegador detecta automáticamente el favicon y lo muestra.
- Si el favicon tiene algún otro formato (por ejemplo, jpg, BMP, gif, png):
- Copie el archivo en el directorio host del servidor donde se encuentran los archivos del sitio web. Generalmente, esto es public_html , pero puede cambiar según la configuración o el proveedor de alojamiento.
- Ahora necesitamos especificar la imagen que nos gustaría usar como favicon para nuestro sitio web. Para hacerlo, debemos agregar la siguiente línea dentro de las etiquetas debajo de <taitle> en el código de nuestro sitio web:
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
Para formatos que no sean png, reemplace «image/png» con el formato del archivo y «favicon.png» con el nombre y la extensión de su archivo.
Ejemplo:
<!DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> GeeksforGeeks icon </title> <!-- add icon link --> <link rel = "icon" href = "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png" type = "image/x-icon"> </head> <body> <h1 style = "color:green;"> GeeksforGeeks </h1> <p> GeeksforGeeks icon added in the title bar </p> </body> </html>
Producción:
Tamaños de favoritos:
| Tamaño | Nombre | Objetivo |
|---|---|---|
| 32×32 | favicon-32.png | Estándar para la mayoría de los navegadores de escritorio. |
| 57×57 | favicon-57.png | Pantalla de inicio estándar de iOS. |
| 76×76 | favicon-76.png | icono de la pantalla de inicio del iPad. |
| 96×96 | favicon-96.png | Icono de Google TV. |
| 120×120 | favicon-120.png | Icono táctil de retina del iPhone. |
| 128×128 | favicon-128.png | Ícono de Chrome Web Store e Ícono pequeño de pantalla de estrella de Windows 8*. |
| 144×144 | favicon-144.png | Mosaico de Internet Explorer 10 Metro para sitio anclado* |
| 152×152 | favicon-152.png | icono táctil del iPad. |
| 167×167 | favicon-167.png | Ícono táctil de iPad Retina (cambio para iOS 10: de 152 × 152, no está en acción. iOS 10 usará 152 × 152) |
| 180×180 | favicon-180.png | iPhone 6 más |
| 192×192 | favicon-192.png | Recomendación del manifiesto de la aplicación web para desarrolladores de Google |
| 195×195 | favicon-195.png | Icono de marcación rápida de Opera (no funciona en Opera 15 y versiones posteriores) |
| 196×196 | favicon-196.png | Icono de la pantalla de inicio de Chrome para Android |
| 228×228 | favicon-228.png | Icono de la Costa de la Ópera |
Nota: los principales navegadores no son compatibles con la propiedad de tamaño del favicon.
Vulnerabilidades: muchos navegadores web muestran los favicons en el lado izquierdo de la barra de direcciones, por lo que a menudo se usan como parte de un ataque de phishing en páginas HTTPS. El atacante cambia el favicon del sitio por el conocido candado (que notifica una conexión cifrada) para engañar a los usuarios. Para eludir esto, muchos navegadores web populares y modernos muestran el icono de favoritos solo en la pestaña y muestran el estado de seguridad del protocolo utilizado para acceder al sitio web junto a la URL.