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.

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/

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

• www.w3.org - HTML5 - Tipo de enlace "icono"

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

• Pautas de la interfaz humana de iOS: tamaños de iconos

• iOS Developer Library - Especificando un icono de página web para Web Clip

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

• Favicon Cheat Sheet

• Favicons, iconos táctiles, iconos de mosaico, etc. ¿Qué necesita? - Escrito como un cuestionario pero contiene mucha información útil (y puede leerlo como un artículo, olvide que es un cuestionario)

• El manual de iconos

• ImageMagick : útil herramienta de línea de comandos para convertir imágenes.

• RealFaviconGenerator.net - Generador completo de favicon.

• FAVIC-O-MATIC - Generador favicon completo con formatos de salida fácilmente personalizables.

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!

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.

http://faviconit.com

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

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.

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.