real - ios favicon

Favicons-Mejores prácticas

Question

Estoy tratando de entender todos estos tamaños y formatos diferentes que se necesitan para iconos Favicons, Touch y ahora también para iconos de Tile.

He leído esta publicación: http://www.jonathantneal.com/blog/understand-the-favicon pero todavía estoy un poco confuso sobre qué usar exactamente que se verá razonablemente bueno en todos los dispositivos y navegadores> = IE8 .

Creo que debería crear lo siguiente:

ICO
favicon.ico (32x32)

PNG
favicon.png (96x96)

Icono de azulejo
tileicon.png (144x144)

Icono de Apple Touch
apple-touch-icon-precomposed.png (152x152)
basado en este https://github.com/h5bp/html5-boilerplate/issues/1367

... y luego usar este código para servirlos?

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

¿Me estoy perdiendo algo?

No estoy seguro de si esto cubrirá IE 10?

Answer 1

Aquí está el completo (como sé) ejemplo de favicon para dispositivos móviles y tabletas:

<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- Win8 tile -->
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#B20099"/>
<meta name="application-name" content="name" />

<!-- IE11 tiles -->
<meta name="msapplication-square70x70logo" content="tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="tile-large.png"/>

Para IE11, here hay preguntas frecuentes

Answer 2

En realidad, me estaba haciendo la misma pregunta y traté de buscar cualquier proyecto simple que pudiera integrarse en un paso de creación o simplemente simplificar la creación de los activos y el marcado necesarios.

No encontré nada que cumpliera con mis requisitos, así que creé faviconbuild y lo faviconbuild bajo la licencia de MIT .

El objetivo de este proyecto es crear una utilidad multiplataforma central, mantenible y ejecutable localmente para construir favicons y marcas de apoyo. Aprovecha el poder de Imagemagick por lo que necesitaría descargar eso para su plataforma o usar los que proporciono en mis releases . Por favor, siéntase libre de utilizar esto en proyectos comerciales o personales, contribuir, enviar solicitudes de funciones, o simplemente utilizar como fuente de inspiración para sus propios servicios.

El proyecto consiste en un archivo por lotes para Windows y un script bash para Unix / Mac (o Windows a través de Cygwin). Puede obtener una lista completa de las opciones compatibles desde la opción de ayuda interna -h o --help.

ex:

./faviconbuild.sh -h

Ambos scripts analizan un archivo de texto simple que también puede sobrescribir con la opción -p o --parsed. El archivo es básicamente una plantilla de comandos para ejecutar, de modo que puede personalizar más fácilmente el resultado si es necesario.

También publiqué una publicación de blog sobre el desarrollo y como mini tutorial sobre scripts de bash / batch.

Answer 3

Favicon es mucho más complejo de lo que parece. Hace 10 años, favicon.ico era el único elemento necesario. Luego, estaba el ícono táctil, luego íconos de íconos táctiles múltiples para las resoluciones de pantalla de varios dispositivos iOS, luego estaba el ícono de mosaico para Windows ...

Algunas respuestas aquí son muy completas, y abrumadoras (¿todo esto, solo para un favicon?). Sin embargo, fallan al indicar que se recomienda que el icono de mosaico 310x310 para Windows sea de 558x558 . Y dado que fueron escritos hace unos meses, no mencionan el manifiesto reciente para Android Chrome M39 o el ícono SVG de pestaña fija para Safari en OS X El Capitán .

El diseño por plataforma es otro tema difícil pero olvidado. Por ejemplo, el favicon a menudo es transparente. Pero iOS no es compatible con la transparencia (para un ejemplo de esto, compare el ícono táctil SO y lo que obtiene cuando agrega SO a la pantalla de inicio de su iPhone).

Por estas razones, lo que considero una mejor práctica para favicon es no crearlo manualmente. En su lugar, utilice una herramienta para automatizar todo el proceso y aplicar las directrices de la plataforma.

Te aconsejo que uses RealFaviconGenerator . Genera todas las imágenes y el código HTML que necesita para realizar el trabajo:

• iconos favicon.ico y PNG para navegadores de escritorio
• Icono táctil de Apple para dispositivos iOS y Android
• Windows 8 fichas
• Ícono de pestaña fijada para Safari en OS X El Capitan

Por ejemplo, no solo genera la imagen y el marcado msapplication-TileImage sino también el archivo browserconfig.xml más reciente compatible con IE11. También se actualizó hace unos meses para admitir el manifiesto de Android Chrome y Safari OS X El Capitan.

Divulgación completa: soy el autor de este sitio.

Answer 4

Hay varios iconos diferentes e incluso pantallas de presentación que puede configurar para varios dispositivos. Esta respuesta trata de cómo apoyarlos a todos.

Aquí hay algunos fragmentos que he usado con enlaces relevantes a donde reuní la información. Consulte mi blog para obtener más información y más información sobre la plantilla del proyecto ASP.NET MVC Boilerplate con todo esto integrado de manera inmediata (incluidos los archivos de imagen de muestra).

Agregue el siguiente marcado a su cabeza html. Las secciones comentadas son completamente opcionales. Mientras que las secciones sin comentarios se recomiendan para cubrir todos los usos de iconos. No tengas miedo, la mayoría si se trata de comentarios para ayudarte.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don''t mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in ''standalone'' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Mi archivo browserconfig.xml Explicación completa arriba.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Mi archivo manifest.json. Explicación completa arriba.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "//Content//icons//android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image//png",
            "density": "0.75"
        },
        {
            "src": "//Content//icons//android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image//png",
            "density": "1.0"
        },
        {
            "src": "//Content//icons//android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image//png",
            "density": "1.5"
        },
        {
            "src": "//Content//icons//android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image//png",
            "density": "2.0"
        },
        {
            "src": "//Content//icons//android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image//png",
            "density": "3.0"
        },
        {
            "src": "//Content//icons//android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image//png",
            "density": "4.0"
        }
    ]
}

Una lista de los archivos en el proyecto (tenga en cuenta que los nombres de estos archivos son importantes si decide poner algunos de ellos en la raíz de su proyecto para evitar el uso de las metaetiquetas anteriores):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

Total sobrecarga

Si saca los comentarios que son 3KB de HTML adicional, si no admite pantallas de presentación de 1.5KB. Si está utilizando compresión GZIP en su contenido HTML, que todos deberían estar haciendo en estos días, eso le deja con alrededor de 634 Bytes de sobrecarga por solicitud para admitir todas las plataformas o 446 Bytes sin pantallas emergentes. Personalmente creo que vale la pena admitir dispositivos IOS, Android y Windows, pero es tu elección, ¡solo te doy las opciones!

Nota al margen sobre el icono de la Web actual / pantalla de bienvenida / configuración Situación

Esta situación con iconos específicos del vendedor, pantallas de inicio y etiquetas especiales para controlar el navegador web o los iconos fijados es ridícula. En un mundo perfecto, todos usaríamos un archivo favicon.svg que podría verse bien en cualquier tamaño y podría ubicarse en la raíz de la página. Solo FireFox es compatible con esto en el momento de la escritura (consulte CanIUse.com ).

Sin embargo, los íconos no son la única configuración en estos días, hay muchas otras configuraciones específicas del proveedor (como se muestra arriba), pero un archivo favicon.svg cubriría la mayoría de los casos de uso.

Actualizar

Actualizado para incluir las nuevas opciones de Android / Chrome versión M39 + favicon / temas. Curiosamente, se han ido con un enfoque similar a Microsoft, pero están utilizando un archivo JSON en lugar de XML.

Answer 5

La solución más simple es usar una (!) Imagen PNG (en 2018).

Simplemente agregue esto al principio de su documento:

<link rel="shortcut icon" type="image/png" href="/img/icon-196x196.png">
<link rel="shortcut icon" sizes="196x196" href="/img/icon-196x196.png">
<link rel="apple-touch-icon" href="/img/icon-196x196.png">

El último enlace es para Apple (pantalla de inicio), el segundo para Android (pantalla de inicio) y el primero para el resto.

Tenga en cuenta que esta solución NO admite "teselas" en Windows 8/10. SOPORTA imágenes en accesos directos, marcadores y pestañas del navegador.