[Cómo] Crear un Favicon y Apple Icono para su sitio web

Apple iPhone / iPad

Desde hace unos años, los favicons que habían perdido gran parte de su relevancia han resucitado ya que cada vez más navegadores los admiten y, de hecho, los convierten en una parte muy visual de la experiencia de sus usuarios. Las tabletas y los navegadores de teléfonos inteligentes también utilizan estos iconos. Esto ha llevado a una mayor importancia de tener un buen favicon. Sin embargo, las formas en que se presentan estos iconos varían según el cliente que navega por el sitio web. Los escritorios requieren un icono determinado, Apple Los dispositivos requieren algo diferente, los diferentes tamaños también complican las cosas. 

 

Contenido[Mostrar]

Una solución simple: generador de iconos en línea gratuito para Apple e iconos de Favicon

 Iconifier.net es una solución simple que, dado un JPG, GIF o PNG cuadrado, generará un conjunto de iconos de varios tamaños para que pueda usar y elegir los que desea admitir en su sitio web. Solo necesita descargar los íconos generados e incrustarlos en el código de su sitio web. Puede integrar estos pasos en su proceso de diseño web.

Inserte los íconos de favicons en su sitio web

Después de haber creado el ícono favicon.ico usando Iconifier.net arriba, y colocarlo en la raíz de su sitio web agregue el siguiente código entre los y de su sitio web

La Apple Iconos

Después de haber creado los diversos iconos utilizando el sitio web anterior, también deberá incluir un código ligeramente diferente para Apple Dispositivos iPhone / iPad (y posiblemente Android). Cargue nuevamente los archivos de iconos generados en la raíz de su sitio web y coloque el siguiente código entre las etiquetas HEAD.

<link rel=”apple-touch-icon ”tamaños =” 114 × 114 ″ href = ”/ touch-icon-114 × 114.png” />

<link rel=”apple-touch-icon ”tamaños =” 72 × 72 ″ href = ”/ touch-icon-72 × 72.png” />

<link rel=”apple-touch-icon ”href =” / touch-icon-iphone.png ”/>

Los dispositivos iOS manejarán esto automáticamente en su navegador y cambiarán el tamaño y agregarán algunos efectos en consecuencia para que coincida con el estilo del dispositivo en el que se ven.

Por cierto, los grandes desarrolladores de iOS y Android no son fáciles de contratar, si está buscando contratar a un buen desarrollador de aplicaciones y sabe cómo encontrar un buen candidato. te tenemos cubierto CollectiveRay. - Le mostraremos todos los lugares excelentes para encontrar buenos candidatos.

Iconos para dispositivos Android

Android se ha basado en Apple toque los íconos pero espere que los íconos ya estén en su versión final. Esta versión final está "PRECOMPUESTA" y los dispositivos Android esperan que esta etiqueta esté en su lugar. Así que cargue nuevas versiones, con nombres ligeramente diferentes (como agregar precompuestos en el nombre) y luego agregue el siguiente marcado. La parte más importante es el rel =apple-touch-icon-precomposed. Coloque los archivos en la raíz de su sitio web y agregue este código entre los y etiquetas de tu html

<link rel=”apple-touch-icon-precomposed ”tamaños =” 114 × 114 ″ href = ”/apple-touch-icon-114 × 114-precomposed.png ”>

<link rel=”apple-touch-icon-precomposed ”tamaños =” 72 × 72 ″ href = ”/apple-touch-icon-72 × 72-precomposed.png ”>

<link rel=”apple-touch-icon-precomposed ”href =” / touch-icon-iphone-precomposed.png ”>

Se pueden encontrar más detalles sobre Favicons en Wikepedia: https://en.wikipedia.org/wiki/Favicon

Sobre el autor
David Attard
Autor: David AttardPagina Web: https://www.linkedin.com/in/dattard/
David ha estado trabajando en o alrededor de la industria digital / en línea durante los últimos 18 años. Tiene una vasta experiencia en las industrias de software y diseño web utilizando WordPress, Joomla y los nichos que los rodean. Como consultor digital, su enfoque es ayudar a las empresas a obtener una ventaja competitiva utilizando una combinación de su sitio web y plataformas digitales disponibles en la actualidad.

Una cosa más... ¿Sabías que las personas que comparten cosas útiles como esta publicación también se ven IMPRESIONANTES? ;-)
Por favor deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!

Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.
 

 

Complemento de almacenamiento en caché mejor calificado

Haz tu sitio web más rápido 

Paso a paso: curso gratuito por correo electrónico, cómo hacer que su sitio web se cargue less de 1 segundo  

 

¿quienes somos?

CollectiveRay está dirigido por David Attard: trabajando en y alrededor del nicho del diseño web durante más de 12 años, brindamos consejos prácticos para las personas que trabajan con y en sitios web. También ejecutamos DronesBuy.net, un sitio web para aficionados a los drones.

David attard

 

 

Autor (es) destacado en:  Logotipo de la revista Inc   Logotipo de Sitepoint   Logotipo de CSS Tricks    logotipo de webdesignerdepot   Logotipo de WPMU DEV   y muchos más ...