Estoy ocupado en un sitio de WordPress y vine al escenario para agregar el toque final, siendo el favicon. Soy principalmente un desarrollador, por lo que los gráficos y los íconos no son mi punto 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 adaptarme a todos los dispositivos posibles, ya sean móviles, tabletas, pantallas retina, etc. Además, no quiero que termine 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 hagan esto por usted (y lo hagan correctamente), también sería genial. De lo contrario, sé cómo orientarme en Illustrator y Photoshop.
Lo básico 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 tamaños/tipos de favicon en GitHub.
Siempre vale la pena leer: http://www.jonathantneal.com/blog/understand-the-favicon/
<!-- 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">
<!-- 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 es el más antiguo de los favicons, ha funcionado desde antes de que nacieran muchas personas que leen esto y todavía funciona perfectamente hoy.
Microsoft recomienda incluir imágenes de tamaño 16x16, 32x32 y 48x48.
La forma estándar de definir su favicon:
<link rel="shortcut icon" href="/favicon.ico" />
Los navegadores buscarán en el directorio raíz de su sitio web para favicon.icoque pueda omitir el enlace. Algunos navegadores antiguos mostrarán de forma predeterminada el archivo declarado favicon.ico, incluso si hay un PNG de tamaño más apropiado declarado, por lo que dejar el ICO sin declarar en la raíz y declarar PNG de diferentes tamaños puede ser una buena idea.
HTML5 introdujo el sizesatributo para ayudar a declarar iconos 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 carga 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:
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 ningún icono del tamaño correspondiente, se utilizará el icono genérico sin tamaño declarado.
Si no se especifican íconos usando un elemento de enlace, iOS buscará en el directorio raíz íconos con el apple-touch-iconprefijo. Los dispositivos iOS no son (por extraño que parezca) los únicos dispositivos que usan estos íconos (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">
Directrices de la interfaz humana de iOS - Tamaños de los iconos
Biblioteca para desarrolladores de iOS: especificación de un icono de página web para Web Clip
Los mosaicos se utilizan cuando ancla un sitio web a la pantalla de inicio en Windows o Windows Phone y vienen 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
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 del 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" />
Todas las msapplicationmetaetiquetas se pueden eliminar y reemplazar 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>
Favicons, iconos táctiles, iconos de mosaico, etc. ¿Cuál necesita? - Escrito como un cuestionario pero contiene mucha información útil (y puedes leerlo como un artículo, olvídate de que es un cuestionario)
ImageMagick - Útil herramienta de línea de comandos para convertir imágenes.
RealFaviconGenerator.net - Generador completo de favicon.
FAVIC-O-MATIC : generador completo de favicon con formatos de salida fácilmente personalizables.
Esta herramienta es un gran 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ítido.
http://realfavicongenerator.net/
También agregue esta metaetiqueta para que pueda nombrar su ícono si alguno se guarda en el dispositivo iOS.
<meta name="apple-mobile-web-app-title" content="Website Name">
¡Espero que ayude!
Utilice esta tarea GRUNT para generar todas las variantes posibles:
https://github.com/gleero/grunt-favicons
Genera todos los tipos y tamaños de iconos conocidos a partir de una imagen PNG. Utiliza ImageMagick.
Entrada: logo cuadrado en png. También puede mantenerse cerca de los archivos de origen con prefijo de resolución, por ejemplo, source.16x16.png.
Producción:
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.
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 de favicon y no quería depender de 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 lanzamientos .
Lo he lanzado bajo la licencia MIT para que cualquiera pueda usarlo con fines comerciales o personales, o simplemente inspirarse en él. Si encuentra algún error o desea extenderlo, siéntase libre de involucrarse .
Actualizaré la página del proyecto con información más detallada, pero ya tiene un menú de ayuda estándar muy útil y funciona en Unix, Mac y Windows.
Simplemente ejecute el script .bat o .sh en su 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 lado 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 en el 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 contribuir a la discusión explicando las necesidades de diseño de los diferentes tamaños.
Sí, los tamaños de favicon, ícono, símbolo y logotipo pueden basarse en el mismo arte, pero cada uno debe representarse específicamente en ese tamaño para que parezca el más preciso (lo que digo es que los generadores automáticos no manejarán bien el aliasing 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 píxeles si comenzó con un tamaño más pequeño.
Dibuja tu arte a 128 píxeles o cualquier formato cuadrado de gran tamaño, utilizando todos los trucos 3D que quieras. Exporte los íconos de diferentes tamaños uno a la vez, examinando el resultado y ajustando el maestro para que funcione mejor en ese tamaño.
Para el 16 x 16, haré una cuadrícula de cuadrados de 16 x 16 y los colorearé individualmente para tener el mayor control de salida.
KMSTR
cocotero
Hanna