Agregar iconos de iOS para un sitio web marcado como favorito

El icono de marcador o más comúnmente conocido como favicon (icono favorito) existe desde 1999 con la introducción de Internet Explorer 5. El icono de marcador o favicon generalmente se especifica en 16 × 16 px con .ico(a veces también con .pngformato) y se muestra al lado la dirección URL del navegador web o junto al título de la página de la interfaz de pestaña, como se muestra a continuación.

Hoy en día, con el avance de los dispositivos móviles, el icono de marcador o favicon también ha evolucionado. Por ejemplo, iOS, con el que probablemente esté familiarizado, muestra iconos en pantalla.

La mayoría de estos íconos están bellamente diseñados, y después de que Apple introdujera una nueva metaetiqueta llamada apple-touch-icon, ahora puede mostrar íconos de sitios web en la pantalla de inicio de iOS cuando marca un sitio.

Agregar iconos táctiles de Apple

El icono de Apple Touch se especifica con una <link>etiqueta, de la siguiente manera.

1
<link rel="apple-touch-icon" href="icon.png"/>

Este icono, por defecto, es 57x57px. Pero, con los dispositivos iPad y Retina, necesitamos ofrecer más tamaños. El iPad requiere íconos con un tamaño de 72x72px, mientras que los dispositivos Retina necesitan íconos con un tamaño de 114x114px.

Entonces, en general, debemos proporcionar el ícono en las siguientes especificaciones, dentro del <head>, para admitir dispositivos iPhone, iPad y Retina.

1
2
3
<link rel="apple-touch-icon" href="icon.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="icon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="icon.png"/>

De forma predeterminada, iOS agregará automáticamente los efectos atractivos a los iconos.

Si prefiere que el icono no interfiera con este efecto, puede agregarlo -precomposedal final del relnombre, así.

1
<link rel="apple-touch-icon-precomposed" href="icon.png"/>

Actualice la página web y vuelva a guardar en la pantalla de inicio. Ahora, el efecto no se agrega al icono.

Creación de iconos táctiles de Apple con Photoshop

En nuestra publicación anterior, hemos discutido cómo crear un ícono táctil de Apple con MacAppIcon . Alternativamente, y esta es también mi preferencia, podemos usar plantillas PSD de AppIconTemplate para una mayor flexibilidad en la personalización.

Una característica adicional que realmente me gusta de esta plantilla PSD es que también viene con Acciones de Photoshop que guarda automáticamente el ícono en varios tamaños, incluidos los de iTunes Artwork.

Bono: Agregar icono fijado de Windows 8

Además, Windows 8 también proporciona formas similares de agregar iconos en sitios web anclados (marcados) con las siguientes metaetiquetas.

1
2
<meta name="msapplication-TileImage" content="/metro-tile.png"/>
<meta name="msapplication-TileColor" content="#015565"/>

Para una discusión más profunda sobre la implementación de estas etiquetas en su sitio web, puede dirigirse a la siguiente publicación de MSDN .

Recursos adicionales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *