Favicon Que es y como implentarlo en todo los SO


Cada vez que abrimos una página Web en nuestro navegador, el título de la página es acompañado con un ícono o imágen que identifica a la página, lo que se conoce como Favicon.

 

favicon

 

A diferencia de una imágen JPG, PNG o GIF, el Favicon está en formato .ICO al igual que los íconos que utilizamos en nuestro Sistema Operativo, la pagina Web es acompañada con una imágen que la identifica.

 

¿Cómo crear un Favicon?

 

Antiguamente se utilizaba cualquier programa para crear iconos, sin embargo hoy día existe gran cantidad de recursos en línea que permite crear tu Favicon a través de una imágen, como el sitio https://www.favicon.cc, dedicado exclusivamente para tal fin, también el sitio http://favicon-generator.org/, que incluso te muestra unas líneas de código que debes agregar en tu página principal para que el Favicon se asocie a tú página, posteriormente podrás eliminar dichas líneas de código.

 

 

 

 

 

 

 


 

Una vez que tengamos nuestro archivo favicon.ico, debemos agregarlo en la carpeta principal donde tenemos alojado nuestro archivo index principal de nuestra página Web, sin embargo hay no queda todo el trabajo.

 

¿Funciona en todos los Sistemas Operativos?

 

La respuesta es NO, sistemas operativos como Apple o Windows 8, requiren de unas líneas especiales para poder agregar correctamente nuestro favicon.

 

Agregar Favicon en Apple

 

En el sistema operativo Apple existe una línea de código especial para dispositivos iOS, es una especificación inventada por Apple, la cual utiliza la siguiente línea de código:

 

 

 

Para que funcione correctamente la imágen debe poseer unas dimensiones de 57x 57 pixeles y debe estar en formato PNG, sin embargo como los mismos han desarrollado nuevos dispositivos con distintas dimensiones de pantallas, han agregado otros estándaderes los cuales deben ser agregados, por ejemplo imágenes de 72x72, 114x114px... es importante y una buena practica utilizar imágenes con éstas dimensiones exactas para evitar su redimensionamiento; se aplican de la misma manera que el método anterior, cada imagen con su tamaño respectivo.

 

 

 

 

 

 

¿Que pasa con Windows 8?

 

La empresa Microsoft no quiso quedarse atrás e invento un estándar para especificar los favicon en su Sistema Operativo, las imágenes deben tener un tamaño de 144x144 pixeles, y deben utilizar éstas líneas de código

 

 

 

 

 

 


 

Lo que sucede es que ésta imágen es utilizada en Windows 8 tanto en el navegador como en el escritorio del sistema operativo,  a través de la interaz Metro de Windows.

 

¿Pensaste que era tan fácil?

 

Podemos apostar que muchos solo utilizan en sus páginas Web las líneas básicas para implementar su Favicon, pero como a nosotros ,nos gusta hacer las cosas bien debemos pensar en todos los sistemas que existen, para que nuestra página sea vista correctamente en todos los navegadores y como debemos facilitar siempre las cosas podemos utilizar una aplicación en línea que nos resuelve todo este trabajo y su nombre es:

 

real favicon

 

Con ésta aplicación Online podemos generar todos los códigos para los sistemas antes mencionados, de modo que tendremos nuestro Favicon a Full en todos los Sistemas y anotamos un par de puntos con nuestra competencia, que ni siquiera sabe que su favicon no carga igual en Apple o Windows 8 cool.

Eso es todo no dejes de hacer tus comentarios, esperamos ésta información les sea de gran utilidad.