Introduciendo los iconos para la web, iphone, ipad y favicon
Es importante tener iconos para la web representativos, que potencien nuestra imagen de marca y ayuden al usuario a localizarnos rápidamente entre su eterna lista de favoritos.
El código para insertar iconos para la web
El siguiente código se encarga de informar al navegador de los diferentes iconos disponibles.
<link rel="shortcut icon" href="favicon.ico"> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
Para esta función utilizamos la etiqueta <link>, esta a su vez puede utilizar 3 atributos.
Atributo rel marca la relación con el el elemento enlazado en el atributo href, En el caso del favicon utilizamos el rel para indicarle que se trata de un shortccut icon, el favicon es el icono que se utiliza para navegadores de escritorio.
Como estamos ofreciendo 4 iconos para los dispostivos apple touch como podemos ver en el atributo rel, añadimos el atributo sizes que se encargara de notificar al dispositivo el icono correcto para la resolución del dispositivo.
- Iphone: por defecto
- Ipad: 72px72
- Iphone retina: 114×114
- Ipad retina: 144×144
Otra cosa importante a la hora de generar los diferentes iconos para los dispositivos de apple es si queremos que obtenga tal cual es nuestro icono o queremos que le introduzca los efectos de brillo por defecto.
Podemos ver la diferencia del mismo icono con el precomposed activado o no activado en la siguiente imagen.
Lo único que modificamos es el atributo rel indicando si este esta precomposed o no.
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
Plantilla en illustrator para la creación de los iconos.