[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. Los navegadores de tabletas y teléfonos inteligentes también utilizan estos iconos. Esto ha llevado a una mayor importancia de tener un buen favicon. Sin embargo, la forma en que se presentan estos íconos varía 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[Espectáculo]

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

 iconificador.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.

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

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

<enlace 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.

Rojo Más: Cómo reiniciar Apple Identificación y contraseña si la olvidó

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

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

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

<enlace 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 la autora
David Atard
David ha trabajado en la industria digital y en línea durante los últimos 21 años. Tiene una amplia experiencia en las industrias de software y diseño web utilizando WordPress, Joomla y los nichos que los rodean. Ha trabajado con agencias de desarrollo de software, empresas de software internacionales, agencias de marketing locales y ahora es Jefe de Operaciones de Marketing en Aphex Media, una agencia de SEO. Como consultor digital, su objetivo es ayudar a las empresas a obtener una ventaja competitiva utilizando una combinación de su sitio web y las plataformas digitales disponibles en la actualidad. Su combinación de experiencia en tecnología combinada con una sólida visión para los negocios aporta una ventaja competitiva a sus escritos.

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.

 

¿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 atard

 

 

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 ...