main

Wordpress

Cómo crear los ‘favicons’ que necesitas para tu WordPress

7 Junio, 2015 — by José Antonio Redondo Martín0

Este post te puede ayudar a crear fácilmente los numerosos favicons que hoy día necesitas para tu sitio web, ya sea basado en WordPress, Drupal, Joomla o cualquier otro CMS que puedas utilizar y entender qué son y para qué se usan. Descubrirás que como ocurre con otras muchas necesidades que pueden surgirte en WordPress, es una cuestión que soluciona fácilmente un plugin específico.

El icono de página para web, llamado universalmente favicon, fue estandarizado por el consorcio W3C en su recomendación para HTML 4.01 a finales de 1999, había sido introducido previamente por la versión 5 de Internet Explorer, bastaba introducir un fichero llamado favicon.ico de 16×16 pixeles en el directorio raíz del sitio web y al añadirlo a favoritos se mostraba un icono que ayudaba al usuario a identificar más rápido ese favorito facilitándole la navegación. Actualmente lo usual es que además de en los favoritos, se vea en la barra de navegación cuando se accede a cualquier sitio web donde se haya instalado (véase la “P” azul que representa a PayPal en este ejemplo). En este momento los navegadores que usan estos iconos en más funcionalidades son Internet Explorer y Firefox, mientras que Safari y Chrome hacen un uso bastante más limitado de ellos.

Vista del favicon de PayPal
Vista del favicon de PayPal en la barra de direcciones de un navegador.

Descubramos un poco más sobre favicon y veamos como tener los que necesitamos fácilmente.

El favicon forma parte por tanto de la marca digital asociada a un sitio web, por tanto debe ser considerado en la evolución de la marca para los medios digitales. Podemos ver cómo ejemplo lo que ha sucedido con el de Google, que ha evolucionado de una G mayúscula a una g minúscula y en 2009 a una g minúscula en negativo apoyada a la izquierda del icono y que utiiza los colores de “parchís” típicos de la marca en un cuadrado ligeramente redondeado:

evolución de los favicons de google hasta 2009
evolución de los favicons de google hasta 2009

Actualmente han recuperado la idea de 2008, pero invirtiendo sus colores:

favicon de google

En 2003 IANA estandarizó también image/vnd.microsoft.icon, el tipo MIME que considera correcto para la extensión .ico, las versiones de navegador previas a esa aprobación que lo soportan utilizan sin embargo image/x-icon y la mayoría de os webmaster consideran más útil asignar este tipo MIME no oficializado por IANA por ser mas compatible con esas versiones y porque Micrososoft lo continuó usando e incluso Google también lo ha estado haciendo. favicon forma parte asimismo del estándar xhtml desde enero de 2000 y en html5 que se publicó en octubre de 2014 y que es la versión más extendida en todos los sitios webs publicados desde entonces y desde luego la que recomendamos para cualquier nuevo proyecto web, ya sea WordPress o no. Aparentemente la única novedad era el haber incluido un atributo “rel=icon”, que había sido reconocido en el RFC 5988 de IANA. Pero la realidad de la aplicación sin embargo es más compleja, ya que hemos de incluir al menos iconos que se vean de forma óptima en los sistemas operativos móviles más populares: iOS de Apple y Android de Google y éstos a su vez tienen varias versiones y tamaños lo que ha añadido una complejidad extra a este sencillo recurso llamado favicon:

Asset

iPhone 6 Plus (@3x)

iPhone 6 y iPhone 5 (@2x)

iPhone 4s (@2x)

iPad y iPad mini (@2x)

iPad 2 y iPad mini (@1x)

Dimensiones del favicon para sitios web y apps web (iOS 8)

180 x 180

120 x 120

120 x 120

152 x 152

76 x 76

Para iPhones y iPads que no usan sistema retina las dimensiones son 60×60 para el caso de los móviles y 76×76 para los iPad, aunque si el sistema operativo utilizado es el vetusto iOS 6 o alguno anterior las dimensiones serían 57×57 y 72×72 respectivamente.

En cuanto al tandem Internet Explorer 11 / Windows 8 se ha añadido también bastante complejidad al asunto:

Tamaños de icono Dimensiones de icono estándar Tamaño mínimo de imagen Tamaño de imagen recomendado
Pequeño 70 x 70 56 x 56 128 x 128
Mediano 150 x 150 120 x 120 270 x 270
Ancho 310 x 150 248 x 120 558 x 270
Grande 310 x 310 248 x 248 558 x 558

Este tandem permite agrupar las referencias a las distintas versiones de los iconos en  un fichero denominado browserconfig.xml que puede ser llamado desde una etiqueta META, un método que resulta más eficiente que las múltiples etiquetas LINK que hay que incluir para el caso de los iconos para apple, las cuales generan un HTML repetitivo en un sistema menos eficiente pero que no podemos evitar.

Obviamente hacer uno por uno cada icono es un trabajo pesado para el que afortunadamente existen herramientas online que nos facilitan mucho la vida.

Cómo generar y publicar tu favicon en CUATRO pasos

Paso 1: tener o generar una imagen cuadrada de cierto tamaño y buena resolución

Lo primero que necesitarás es una imagen de formato cuadrado y de calidad, si no te quieres complicar demasiado la vida puedes utilizar la misma imagen de perfil que usas para tu marca en Twitter, aunque hay que tener en cuenta que el tamaño hiperreducido del favicon hace perder detalles y los hace indistinguibles. Es conveniente que los diseñadores o la agencia que realice ese logo haga pruebas de reductibilidad del logo y en su caso proponga esas versiones de formato hiperreducido para que sea coherente con el resto de la marca y no se pierda calidad. Aunque la imagen se haya de ver bien a muy poca resolución es recomendable partir de una versión de alta resolución por ejemplo 310 x 310 píxeles a 144 ppp, o incluso 558×558 si seguimos las recomendaciones de Microsoft en el caso de este site he partido de ésta:

original para convertir en FAVICON
original para convertir en FAVICON
Paso 2: INSTALAR EL PLUGIN fAVICON BY REALFAVICONGENERATOR

Generar los múltiples favicons, hacer los correspondientes códigos HTML e incluirlos en la cabecera y subir todo ello al sitio sería un proceso complejo. La senclla instalación del plugin Favicon by RealFaviconGenerator reduce esta acción a algo casi trivial: entrar en el administrador a apariencia>favicon. Si no dispones de Wrdpress como CMS una buena opción es utilizar el generador online que tiene el desarrollador de este plugin; es buena, sencilla, rápida y actualizada: http://realfavicongenerator.net/

Paso 3: SELECCIONAR NUESTRO favicon EL ALTA RESOLUCIÓN Y GENERAR TODOS LOS FAVICONS

Gracias al plugin nos ahorraremos subir por ftp multiples ficheros, Simplemente entramos al gestor de favicon y seleccionamos nuestra imagen .png para pular a continuación “generate favicon”.

pantalla inicial del gestor de Favicon
pantalla inicial del gestor de Favicon

Si el CMS no es wordpress, tendremos que hacer un FTP sobre el directorio raíz con todos los ficheros generados; en ese caso software más recomendable para esta tarea sería Filezilla. Una vez hecho esto la herramienta nos redirigirá a RealFaviconGenerator, donde podemos terminar de personalizar nuestros favicon: añadiendo un fondo para la imagen iOS o estableciendo cómo se verá en Windows 8.. Al terminar este paso el sistema habrá generado  las referencias en el encabezado HEAD del html entregado por nuestro WordPress.

En otros CMS tendrás que buscar una manera eficiente de añadir el código que se genera. En nuestro caso únicamente queda comprobar que todo funciona, en eso también nos ayuda RealFaviconGenerator con el botón “check your Favicon”:

botón "Check your Favicon' bajo los ejemplos de favicons generados por el plugin
botón “Check your Favicon’ bajo los ejemplos de favicons generados por el plugin

Si necesitáis conocer más a fondo cómo generar y codificar los distintos favicon para proyectos que no sean WordPress os recomiendo este post de Little Web Giants:

Y si quieres profundizar más en los aspectos de diseño, te recomiendo consultar éste otro de RealFavicon

Leave a Reply

Your email address will not be published. Required fields are marked *

cinco × dos =