Apenas um png apple-touch-icon, definido para 144x144px, será usado em dispositivos mais antigos também (reduzido automaticamente), portanto, não vejo a necessidade de criar 6 versões diferentes.
Isso é explicado aqui: http://mathiasbynens.be/notes/touch-icons
"A desvantagem é que esses dispositivos carregam a imagem grande de alta qualidade, enquanto um arquivo muito menor funcionaria tão bem."
Portanto, apenas se alguém clicar em "Adicionar à tela inicial", um PNG um pouco mais pesado terá que carregar (maior apenas por alguns kilobytes) ... isso é perfeitamente aceitável no que me diz respeito, e muito melhor do que criando 6 ícones de tamanhos diferentes ... e especialmente melhor se você estiver incluindo o HTML na página para carregar todos os seis.
Neil,
Se você precisa de uma maneira simples de criar esses ícones, posso sugerir o repositório H5BP Multi-Layer FavIcons . Eu sei que é um plug sem vergonha, mas usei-o novamente hoje e terminei todas as 7 imagens, incluindo o favicon de várias camadas, em menos de 10 minutos.
Espero que ajude!
Ok, obrigado. Mas ainda não concordo que a criação de vários gráficos específicos para cada dispositivo individual seja a abordagem certa (não é uma abordagem muito "responsiva"). Criar uma imagem ainda é mais rápido / fácil e mais limpo, e não vejo nenhum problema em entregá-la a dispositivos mais antigos quando não está adicionando peso ao carregamento da página (só está sendo carregado após a 'solicitação' de adição à página inicial tela) e estamos falando apenas de alguns k na diferença entre essas imagens.
Se ele só for baixado quando adicionado à tela inicial, posso ver o que você quer dizer. Pessoalmente, também vou pela rota do ícone único.
+1 para um ícone único (e um favicon.ico) sem abordagem de links html.
@mathiasbynens obrigado pela explicação completa dos ícones de toque. Eu tive que rir quando li o resumo. Não por causa de suas sugestões, mas por causa do motivo pelo qual odeio BS proprietário. Deixe-me resumir seu resumo.
Para recapitular, há duas razões principais pelas quais ter muitos ícones de toque diferentes é a melhor solução:
Dito isso, sou preguiçoso e também uso a solução de um único ícone. Mas isso não significa que deva ser a solução certa IMHO.
@ryanswedal : D
Se os links HTML estiverem incluídos na página, alguém sabe se eles são chamados no carregamento da página? Nesse caso, esse é um argumento ainda maior para a abordagem de um ícone ... e para não incluir o link HTML.
Quando pesquisei isso, meus testes do IIRC confirmaram que os ícones de toque não eram solicitados no carregamento da página, nem mesmo com <link>
.
Bom saber. Obrigado!
Sim, +1 para a abordagem de ícone único. Os ícones de toque não são autodocumentados, portanto, ter 6 na raiz sem a capacidade de documentar uma ferramenta para sincronizá-los é confuso e exige muita manutenção.
Eu concordo com o problema de manutenção se você tiver todos os ícones na raiz. Não vejo uma boa solução a não ser adicionar as tags <link>
(os links simbólicos não resolvem realmente esse problema).
Mas não acho que devemos aumentar a marcação do index.html com essas tags no momento. O Mobile Boilerplate faz isso.
De qualquer forma, tenho certeza de que é fácil descobrir como mover os ícones para outra pasta. Temos até uma pequena seção sobre esse tópico em nossos documentos .
A partir do iOS 7, o tamanho do ícone de toque recomendado para iPhones com tela Retina aumentou de 114 × 114 pixels para 120 × 120 pixels. Minha postagem foi atualizada para refletir isso.
Podemos encontrar uma solução aqui? Queremos deixar como está ou passar para a abordagem de um ícone?
Bem, meu voto certamente seria pela abordagem de um ícone
Na quarta-feira, 24 de julho de 2013, Hans Christian Reinl escreveu:
Podemos encontrar uma solução aqui? Queremos deixar como está ou mudar para o
abordagem de um ícone?-
Responda a este e-mail diretamente ou visualize-o em Gi tHubhttps: //github.com/h5bp/html5-boilerplate/issues/1367#issuecomment -21507073
.
Neil Creagh
Quanto menos, mais simples, melhor. Se apenas um é suficiente e funciona, por que não iríamos com ele?
+1 para um!
Eu também gostaria de usar uma maneira simples e ágil, mas para ícones costumava haver uma exceção: ícones em diferentes escalas podem requerer um redesenho para ficarem claros naquele tamanho.
Se você tiver um ícone complexo de, digamos, 120x120 e quiser usá-lo em 32x32, ele pode se tornar irreconhecível. Dimensionar um ícone pequeno para um muito maior não é um problema com o formato vetorial, mas o designer pode querer adicionar mais detalhes.
http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077#module -67936509
Role várias páginas do link acima para ver os ícones em 32x32 e 16x16 ... talvez não seja tão próximo a este tópico, mas acho que é o que deve ser considerado quando se trata de ícones em vários tamanhos.
OMI, na maioria das situações, um ícone é suficiente. Fornecer um único ícone H5BP grande com uma nota nos documentos sobre a criação de ícones menores para otimizar a clareza e o tamanho do arquivo seria uma boa solução.
Dito isso, o H5BP é semi-opinativo, então tudo o que for considerado o método "correto", independentemente da simplicidade, deve estar no repo.
Fiz uma solicitação de pull que remove cinco dos seis ícones do Apple Touch no # 1425.
Feedback muito apreciado.
Por favor, mantenha a discussão principal dentro desta questão.
+1
: +1:
+1
Tudo bem se eu admitir que nunca soube por que havia seis em primeiro lugar e estou feliz que haverá um, então não vou me sentir preguiçoso por não saber o "por quê?"
A perfeição é alcançada, não quando não há mais nada a acrescentar, mas quando não há mais nada a tirar.
- Antoine de Saint-Exupéry
: +1:
Eu não tive tempo para torná-lo mais curto.
- Blaise Pascal
:afirmativo:
Estou correndo há um tempo apenas com uma única imagem. Uma desvantagem é que muitos navegadores móveis solicitarão os outros arquivos. Não há necessidade de referenciá-los com uma tag de link no HTML, mas voltei a incluir arquivos de diretório raiz para todos os tamanhos em normal e pré-composto apenas para evitar que meu log esteja cheio de erros 404 para essas solicitações.
https://gist.github.com/davidhund/332316f82440ef4377f3 por @davidhund
Comentários muito úteis
"A desvantagem é que esses dispositivos carregam a imagem grande de alta qualidade, enquanto um arquivo muito menor funcionaria tão bem."
Portanto, apenas se alguém clicar em "Adicionar à tela inicial", um PNG um pouco mais pesado terá que carregar (maior apenas por alguns kilobytes) ... isso é perfeitamente aceitável no que me diz respeito, e muito melhor do que criando 6 ícones de tamanhos diferentes ... e especialmente melhor se você estiver incluindo o HTML na página para carregar todos os seis.