Poner un favicon en tu página web parece, hoy en día, como algo obligatorio en nuestras vidas, o al menos eso nos quieren hacer creer los gurús de la accesibilidad al recordárnoslo una y otra vez en sus libros y publicaciones…
Bien, seguro que a estas alturas, ya todo el mundo sabe lo que es un favicon ¿No? Y le ha quedado bastante claro qué tan importante es para nosotros. ¿No? Bueno, este blog todavía no tiene, pero tendrá, es que aún no he tenido tiempo de pararme mucho a diseñar los detalles del diseño :P
En fin, favicones… sí, sí… pero y ¿Cómo se hace? Genial! Nos ponemos a buscar en el Google cómo se hace para poner un favicon y nos encontrarnos con miles de soluciones mediocres al más puro estilo de Microsoft xD Es decir, que funcionan parcialmente :D
Me explico, esto de los favicons, como muchas otras cosas, fue originalmente idea de Microsoft. Ya saben Uds. que Microsoft tiene muchas ideas, pero que pocas funcionan bien. He aquí otro bonito ejemplo para la colección :-)
La idea en sí es buena, claro que sí, pero al principio la idea sólo funcionaba en navegadores de Internet Explorer. Claro, si la idea es nuestra, pues sólo para nosotros y para nadie más… (Si quieren entender la política de ventas de Microsoft, haber cogido apuntes en la asignatura del recreo, el gordo matón que te quitaba el bocata era un aplicado, y potencial Bill Gates, de la materia)
Con el tiempo, Apple conocido como “el guay”, cogió apuntes de la mala influencia e implementó su favicon en el Safari del Iphone. Por supuesto, implementó un favicon que sólo y únicamente funcionaba con su software privativo.
Mozilla y otros, conocidos como el grupo de los buenos (y de verdad), que son la mayoría… LLamaron al profesor de guardia en el recreo y le contaron lo que pasaba… El profesor se llamaba W3C.
-¡W3C! ¿Estás ahí? -preguntó Mozilla, en nombre de todos los afectados- Mira, es que el Matón y el Guay se han inventado eso, y no nos dejan a nosotros jugar con ello ;’(…
-¡No hay problema! -respondió con autoridad el profesor W3C- A partir de ahora para usar un favicon lo hareis TODOS de la misma forma, y se acabó -Concluyó reuniendo a toda la clase, y mostrando lo que debíamos hacer todos.
Al salir, ni Dios le hizo caso, ni si quiera el matón de Bill Gates, que era hijo del profesor. (Microsoft es miembro de la W3C, sí, lo sé, repugnante)
Mozilla y sus amigos hicieron caso del profesor, pero como fueron los únicos, al final también se inventaron su propia implementación, en contra de la voluntad del profesor, para no ser menos que los demás… :S
¿Resultado final? Quieres poner un favicon en tu página web, y te ayudas de Google para saber cómo se hace, y la mayoría de sitios que vas a encontrar son explicaciones de cómo se hace un favicon compatible sólo con Internet Explorer, o sólo con Safari, o sólo con Mozilla, o muchos foros donde se queja la gente de que no les funciona el favicon.
Y si eres de los pocos que ha tenido suerte buscando en Google sobre cómo se pone un favicon, y has encontrado esta página, podrás poner un favicon compatible con todos los navegadores posibles, Mozilla, Safari, Iphone, Internet Explorer, etc… usando el siguiente código XHTML crossbrowser :)
<link rel=”shortcut icon” href=”favicon.ico” type=”image/vnd.microsoft.icon” /><link rel=”icon” href=”img/favicon.png” type=”image/png” /><link rel=”apple-touch-icon” href=”img/apple-touch-icon.png” type=”image/png” />
NOTA: El .PNG tiene que ser una imagen de 16x16px o de 32x32px. El .ICO tiene que ser un icono de Windows también de 16x16px o 32x32px, llamarse favicon y estar obligatoriamente en el directorio raiz. El favicon que se usará en el Safari del Iphone (apple-touch-icon.png) tiene que ser de 32x32px. Ah, se me olvidaba, el código XHTML tiene que ir dentro del header, es decir, entre <head> y </head>.
NOTA2: A través de Google, lo que sí encontraréis son muchos y útiles generadores de favicons, que hacen la imagen de las dimensiones adecuadas. Para los que quieran saber lo que dijo el profesor:
No hay más artículos relacionados
