Mejores prácticas de Favicon en cuanto a tamaño y formato

32

Estoy ocupado en un sitio de WordPress y he subido al escenario para agregar el toque final, siendo el favicon. Soy principalmente un desarrollador, por lo que los gráficos y los iconos no son mi punto más fuerte.

¿Cuáles son las mejores prácticas al crear un favicon (en términos de tamaños, etc., ya tengo el diseño)? Me gustaría acomodar cada dispositivo posible, ya sea móvil, tabletas, pantallas de retina, etc. Además, no quiero que quede borroso, así que necesito saber qué densidad de píxeles usar y todo.

Si hay algunas aplicaciones de Mac o herramientas en línea que lo harán por usted (y lo hacen correctamente), eso también sería genial. De lo contrario, sé cómo orientarme en Illustrator y Photoshop.

website-design best-practice favicon Tiwaz89
fuente
66
Noticias del año pasado pero: stackoverflow.com/questions/19029342/… . ¿Alguna razón por la que no cubrirán tus necesidades?
KMSTR
1
Gracias @KMSTR, esa hoja de trucos github.com/audreyr/favicon-cheat-sheet es exactamente lo que estaba buscando.
Tiwaz89
@KMSTR debe hacer que sea su respuesta real y enlace al github para que pueda obtener crédito y podamos aceptar esta pregunta :)
Hanna

Respuestas:

27

Los fundamentos de Favicons - Mejores prácticas para 2013 :

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

Icono de mosaico tileicon.png (144x144)

Apple Touch Icon apple-touch-icon-precomposed.png (152x152)

Y una hoja de trucos "dolorosamente obsesiva" para los tamaños / tipos de favicon en GitHub.

Siempre vale la pena leerlo: http://www.jonathantneal.com/blog/understand-the-favicon/

KMSTR
fuente
He estado leyendo que ahora se requiere hasta 180x180 con iOS 8.
Drewdavid
¿Puedes vincular una fuente?
KMSTR
1
Seguro. Estoy viendo 180 píxeles ahora mencionados en muchos lugares, pero esto es lo mejor que pude encontrar en Apple: developer.apple.com/library/ios/documentation/UserExperience/…
Drewdavid
12

¿Qué incluir?

El mínimo

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">

Para los obsesivos

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs)  -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">

<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

favicon.ico

favicon.ico es el más antiguo de los favicons, ha funcionado desde antes de que muchas personas que leen esto nacieran y todavía funciona perfectamente hoy.

Microsoft recomienda incluir imágenes de 16x16, 32x32 y 48x48.

La forma estándar de definir tu favicon:

<link rel="shortcut icon" href="/favicon.ico" />

Los navegadores buscarán el directorio raíz de su sitio web para favicon.icoque pueda omitir el enlace. Algunos navegadores más antiguos usarán el valor predeterminado, favicon.icoincluso si hay un PNG de tamaño más apropiado declarado, por lo que puede ser una buena idea dejar el ICO sin declarar en la raíz y declarar PNG de diferentes tamaños.

favicon.png

HTML5 introdujo el sizesatributo para ayudar a declarar íconos de varios tamaños. El uso de PNG específicos le brinda un mayor control sobre los tamaños utilizados y significa que solo se está cargando la imagen correcta.

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

Los tamaños que declara dependen de los dispositivos que desea admitir. Algunos tamaños comunes y no tan comunes:

  • 32x32
  • 48x48
  • 64x64
  • 96x96
  • Icono de 128x128 Chrome Web Store
  • 160x160 Chrome para Android
  • 192x192 Chrome para Android
  • Icono de marcación rápida de 195x195 Opera
  • 196x196 Chrome para Android
  • 228x228 Icono de Opera Coast

Apple Touch Icon

Los íconos de clip web de iOS vienen en varios tamaños para diferentes dispositivos y resoluciones. Puede especificar uno o varios iconos de tamaño, si no se encuentra un icono con el tamaño relevante, se utilizará el icono genérico sin tamaño declarado.

Si no se especifica ningún ícono utilizando un elemento de enlace, iOS buscará íconos con el apple-touch-iconprefijo en el directorio raíz . Los dispositivos iOS no son (curiosamente) los únicos dispositivos que usan estos iconos (Android Chrome, por ejemplo), por lo que declararlos es la opción más segura.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

Ventanas de azulejos

Los mosaicos se usan cuando se fija un sitio web a la pantalla de inicio en Windows o Windows Phone y se presentan en varios tamaños.

<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

Los tamaños de imagen recomendados son más grandes de lo que sugieren los nombres de esas imágenes. Estos son los tamaños recomendados de microsoft.com

                   | Minimum   | Recommended
Small  | 70 x 70   | 56 x 56   | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide   | 310 x 150 | 248 x 120 | 558 x 270
Large  | 310 x 310 | 248 x 248 | 558 x 558

Color del azulejo y título

El comportamiento predeterminado de los mosaicos es tomar el título del mosaico de la <title>etiqueta y respetar cualquier transparencia en las imágenes de mosaico, mostrando el color de fondo. Puede personalizar el color y el título con estas metaetiquetas:

<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />

browserconfig.xml

Todas las msapplicationmetaetiquetas pueden eliminarse y reemplazarse con un archivo XML en la carpeta raíz llamada browserconfig.xml. El archivo XML debería verse así:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/tile-small.png"/>
      <square150x150logo src="images/tile-medium.png"/>
      <wide310x150logo src="images/tile-wide.png"/>
      <square310x310logo src="images/tile-large.png"/>
      <TileColor>#582686</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Lecturas y recursos adicionales

Cai
fuente
Puntos de bonificación por proporcionar todas las lecturas y recursos adicionales, particularmente RealFaviconGenerator.net. Ese es un excelente recurso.
bemdesign
9

Esta herramienta es un súper ahorro de tiempo. ¡Pruébalo! Se encarga de todo por ti.

Cargue su imagen en algo alrededor de 800px x 800px para que sea agradable y nítida.

http://realfavicongenerator.net/

Agregue también esta metaetiqueta para que pueda nombrar su ícono si algunos guardan en su dispositivo iOS.

<meta name="apple-mobile-web-app-title" content="Website Name">

¡Espero que ayude!

cwd
fuente
4

Use esta tarea GRUNT para generar todas las variantes posibles:

https://github.com/gleero/grunt-favicons

Genera todos los iconos de tipos y tamaños conocidos a partir de imágenes PNG. Utiliza ImageMagick.

Entrada: logotipo cuadrado en png. También puede mantenerse cerca de los archivos de origen con el prefijo de resolución, por ejemplo, source.16x16.png.

Salida:

favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.

Agrega cambios al archivo html.

Matěj Kříž
fuente
2

http://faviconit.com

creará unos 15 tamaños de iconos diferentes para todos los dispositivos a partir de un PNG de alta resolución.

Costa
fuente
1

Yo también estaba buscando una solución favicon y no quería confiar en ningún servicio web de terceros. No pude encontrar ninguna solución genérica que funcionara como un simple paso de compilación, así que creé faviconbuild . Se basa en ImageMagick para que pueda descargar la última versión de eso para su sistema o usar algunos que he proporcionado en mis versiones .

Lo lancé bajo la licencia MIT para que cualquiera pueda usarlo para uso comercial o personal, o simplemente obtener inspiración de él. Si encuentra algún error o desea extenderlo, no dude en involucrarse .

Actualizaré la página del proyecto con información más detallada, pero ya tiene un menú de ayuda muy útil y estándar y funciona en Unix, Mac y Windows.

Simplemente ejecuta el script .bat o .sh en tu terminal.

ex para Windows:

faviconbuild.bat -h

o para Unix / Mac (o Windows si usa Cygwin):

faviconbuild.sh -h

Esto le dará la información de la versión junto con las opciones disponibles. El script está diseñado para tomar una imagen de entrada y generar todas las imágenes requeridas junto con el marcado html requerido para incluir en su sitio web.

Este es un ejemplo de cómo lo estoy usando en uno de mis proyectos actualmente:

./faviconbuild/faviconbuild.sh -i ./source.png

Simplemente coloqué la carpeta faviconbuild en una carpeta específica del proyecto para no tener que tocar los archivos reales del proyecto y al costado coloqué mi source.png. El comportamiento predeterminado de la secuencia de comandos es colocar todo en una carpeta de compilación anidada que se ignora para que no entre en conflicto con el proyecto si está utilizando git.

Si me falta algo, envíe una solicitud de función.

También tengo una publicación de blog con más información.

Espero que encuentres esto útil.

Matthew Sanders
fuente
Su "Ejemplo" descarga todo el proyecto ...
KMSTR
El "Ejemplo" actualmente descarga la última versión empaquetada que incluye los binarios de ImageMagick para Mac / Windows y una fuente de ejemplo png para que pueda ejecutarla y ver el resultado. Está un poco desactualizado a partir de esta publicación por una confirmación también, pero no le falta mucho más que manejar rutas con espacios. No incluí los binarios de Linux ya que hay algunos sabores diferentes y puedes obtenerlos de un administrador de paquetes. Estoy abierto a sugerencias si tienes alguna. :)
Matthew Sanders el
Desde el punto de vista de UX, no creo que "Ejemplo" lleve a las expectativas de una descarga, sino más bien ... un ejemplo. ¿Quizás explicar qué sucede exactamente? Como "Descargar la última versión". Tiene dos botones que dicen "descargar, pero 3 descargando cosas. En ese sentido, creo que los visitantes esperarían una galería o algo detrás de" Ejemplo ".
KMSTR
Gotcha, gracias! Soy ingeniero de software de profesión, por lo que mi primer pase en UX / UI suele ser mínimo: P. Haré algo para aclarar esto y posiblemente agregaré un ejemplo en la página con más información.
Matthew Sanders el
Reemplacé la página generada por GitHub con una página generada por Hexo.io. También eliminé el enlace "Ejemplo" y lo incluí al final de la página después de más explicaciones.
Matthew Sanders
0

Aquí hay mucha información útil sobre los tamaños y generadores de favicon.

Puedo agregar a la discusión explicando las necesidades de diseño de los diferentes tamaños.

Sí, los tamaños de favicon, icono, símbolo y logotipo se pueden basar en el mismo arte, pero cada uno debe representarse específicamente a ese tamaño para que parezca más preciso (estoy diciendo que los generadores automáticos no manejarán bien los alias y los gradientes en el El tamaño de 16 píxeles y la imagen generada automáticamente no se optimizarán para el tamaño de 128 px si comenzaste más pequeño.

Dibuja tu arte a 128 pix o cualquier formato cuadrado de gran tamaño, usando todos los trucos 3D que quieras. Exporte los íconos de diferentes tamaños de uno en uno, examinando el resultado y ajustando el patrón maestro para que funcione mejor a ese tamaño.

Para los 16 x 16, haré una cuadrícula de cuadrados de 16x16 y los colorearé individualmente para tener el mayor control de salida.

Webster
fuente