Estou ocupado em um site WordPress e subi ao palco para dar o toque final, sendo o favicon. Eu sou principalmente um desenvolvedor, então gráficos e ícones não são meu ponto forte.

Quais são as melhores práticas ao criar um favicon (em termos de tamanhos, etc, eu já tenho o design)? Eu gostaria de acomodar todos os dispositivos possíveis, seja ele móvel, tablets, telas de retina etc. Também não quero que fique embaçado, então preciso saber qual densidade de pixels usar e tudo mais.

Se houver alguns aplicativos para Mac ou ferramentas on-line que farão isso por você (e fazê-lo corretamente), isso também seria ótimo. Caso contrário, eu sei como me orientar no Illustrator e no Photoshop.

Noções básicas de Favicons - Prática recomendada para 2013 :

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

Ícone do mosaico tileicon.png (144x144)

Ícone do Apple Touch apple-touch-icon-precomposed.png (152x152)

E uma folha de dicas "dolorosamente obsessiva" para tamanhos / tipos de favicon no GitHub.

Sempre vale a pena ler: http://www.jonathantneal.com/blog/understand-the-favicon/

O que incluir?

O 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 os obsessivos

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

O favicon.ico é o mais antigo dos favicons, funciona desde antes de muitas pessoas lerem isso e ainda hoje funciona perfeitamente.

A Microsoft recomenda incluir imagens de tamanho 16x16, 32x32 e 48x48.

A maneira padrão de definir seu favicon:

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

Os navegadores pesquisam o diretório raiz do seu site para favicon.icoque você possa omitir o link. Alguns navegadores mais antigos terão o padrão declarado, favicon.icomesmo que exista um PNG de tamanho mais apropriado, portanto, deixar a ICO não declarada na raiz e declarar PNGs de tamanhos diferentes pode ser uma boa idéia.

favicon.png

O HTML5 introduziu o sizesatributo para ajudar a declarar vários ícones de tamanho. O uso de PNGs específicos oferece maior controle sobre os tamanhos usados ​​e significa que apenas a imagem correta está sendo carregada.

<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 link "ícone"

Os tamanhos que você declara dependem dos dispositivos que você deseja oferecer suporte. Alguns tamanhos comuns e não tão comuns:

• 32x32
• 48x48
• 64x64
• 96x96
• Ícone da Chrome Web Store de 128 x 128
• Chrome de 160 x 160 para Android
• 192x192 Chrome para Android
• Ícone de discagem rápida do Opera 195x195
• Chrome de 196 x 196 para Android
• 228x228 Opera Opera ícone

Apple Touch Icon

Os ícones de clipe da web para iOS têm vários tamanhos para diferentes dispositivos e resoluções. Você pode especificar um ou vários ícones de tamanho, se nenhum ícone no tamanho relevante for encontrado, o ícone genérico sem tamanho declarado será usado.

Se nenhum ícone for especificado usando um elemento de link, o iOS pesquisará ícones no diretório raiz com o apple-touch-iconprefixo. Os dispositivos iOS não são (estranhamente) os únicos dispositivos a usar esses ícones (Android Chrome, por exemplo); portanto, declará-los é a opção mais 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">

• Diretrizes da interface humana para iOS - tamanhos de ícones

• Biblioteca do desenvolvedor do iOS - Especificando um ícone de página da Web para Web Clip

Windows Tiles

Os mosaicos são usados ​​quando você fixa um site na tela inicial no Windows ou no Windows Phone e é fornecido em vários tamanhos.

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

Os tamanhos de imagem recomendados são maiores que os nomes sugeridos pelas imagens. Esses são os tamanhos recomendados em 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

Cor e título do bloco

O comportamento padrão dos ladrilhos é retirar o título do ladrilho da <title>marca e respeitar qualquer transparência nas imagens dos ladrilhos, mostrando a cor do plano de fundo. Você pode personalizar a cor e o título usando estas metatags:

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

browserconfig.xml

Todas as msapplicationmetatags podem ser removidas e substituídas por um arquivo XML na pasta raiz chamado browserconfig.xml. O arquivo XML deve ficar assim:

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

Leitura e recursos adicionais

• Folha de dicas do Favicon

• Favicons, Touch Icons, Tile Icons, etc. De que você precisa? - Escrito como um questionário, mas contém muitas informações úteis (e você pode simplesmente ler como artigo, esqueça que é um questionário)

• O Manual do Ícone

• ImageMagick - Ferramenta útil de linha de comando para converter imagens.

• RealFaviconGenerator.net - Gerador de favicon abrangente.

• FAVIC-O-MATIC - Gerador de favicon abrangente com formatos de saída facilmente personalizáveis.

Esta ferramenta economiza muito tempo. Experimente! Cuida de tudo para você.

Carregue sua imagem em algo em torno de 800px x 800px, para que fique agradável e nítido.

http://realfavicongenerator.net/

Adicione também essa metatag para que você possa nomear seu ícone se algum salvar no dispositivo iOS.

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

Espero que ajude!

Use esta tarefa GRUNT para gerar todas as variantes possíveis:

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

Gera todos os tipos e tamanhos conhecidos de ícones da imagem PNG. Usa ImageMagick.

Entrada: logo quadrado em png. Você também pode manter-se próximo aos arquivos de origem com prefixo de resolução, por exemplo, source.16x16.png.

Saída:

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.

Adiciona alterações ao arquivo html.

http://faviconit.com

criará cerca de 15 tamanhos diferentes de ícone para todos os dispositivos a partir de um PNG de alta resolução.

Eu também estava procurando uma solução favicon e não queria confiar em nenhum serviço web de terceiros. Não consegui encontrar nenhuma solução genérica que funcionasse como uma simples etapa de compilação, então criei o faviconbuild . Ele se baseia no ImageMagick para que você possa baixar a versão mais recente para o seu sistema ou usar algumas que eu forneci em meus lançamentos .

Eu o liberei sob a licença do MIT, para que qualquer pessoa possa usá-lo para uso comercial ou pessoal, ou simplesmente obter alguma inspiração. Se você encontrar algum erro ou quiser estendê-lo, sinta-se à vontade para se envolver .

Atualizarei a página do projeto com informações mais detalhadas, mas ele já possui um menu de ajuda realmente útil e padrão e funciona em Unix, Mac e Windows.

Você simplesmente executa o script .bat ou .sh no seu terminal.

ex para Windows:

faviconbuild.bat -h

ou para Unix / Mac (ou Windows, se estiver usando Cygwin):

faviconbuild.sh -h

Isso fornecerá as informações da versão, juntamente com as opções disponíveis. O script foi projetado para obter uma imagem de entrada e gerar todas as várias imagens necessárias, juntamente com a marcação html necessária para incluir no seu site.

Este é um exemplo de como o estou usando em um dos meus projetos atualmente:

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

Simplesmente coloquei a pasta faviconbuild em uma pasta específica do projeto para não precisar tocar nos arquivos reais do projeto e ao lado em que coloquei meu source.png. O comportamento padrão do script é colocar tudo em uma pasta de construção aninhada com gitignored, para que não entre em conflito com o projeto se você estiver usando o git.

Se estiver faltando alguma coisa, envie uma solicitação de recurso.

Eu também tenho um post com mais informações.

Espero que você ache isso útil.

Há muitas informações úteis aqui sobre tamanhos e geradores de favicon.

Posso acrescentar à discussão explicando as necessidades de design dos diferentes tamanhos.

Sim, os tamanhos de favicon, ícone, símbolo e logotipo podem ser baseados na mesma arte, mas cada um deve ser renderizado especificamente para esse tamanho para parecer mais preciso (estou dizendo que os geradores automáticos não lidam bem com o aliasing e os gradientes no O tamanho de 16 pixels e a imagem gerada automaticamente não serão otimizados para o tamanho de 128 px se você começar menor.

Desenhe sua arte em 128 pix ou em qualquer formato quadrado de tamanho grande, usando todos os truques 3d que você deseja. Exporte os ícones de tamanhos diferentes, um de cada vez, examinando o resultado e ajustando o mestre para funcionar melhor nesse tamanho.

Para os 16 x 16, farei uma grade de quadrados de 16x16 e os colorirei individualmente para ter o máximo controle da saída.