Como testar um conjunto de ícones de toque do navegador, ícones favoritos e blocos para um site?

8

Vários navegadores e dispositivos têm suas próprias especificações e padrões para os tipos de ícones tipo favicon usados ​​para representar páginas da web. Esta resposta no site de design gráfico fornece uma boa visão geral .

Suponha que você tenha se dado ao trabalho de fornecer um bom número desses arquivos de ícone com as declarações apropriadas em seu HTML - mas você não possui todos os dispositivos que a Apple produziu, além de um dispositivo Windows 8 e várias versões do Android em mãos para testá-los todos.

Existe alguma maneira simples de testar sua configuração e ver quais arquivos (se houver) vários dispositivos e navegadores terão, sem ter todos os dispositivos necessários à mão?

Editar para ficar claro, quero dizer os ícones que os navegadores acessam e usam ao representar uma página da Web em recursos do navegador como "mais visitados", "favoritos" ou ao criar atalhos da tela inicial, declarados nas páginas da Web, <head>mas não exibidos. em qualquer lugar da página da web <body>.

testing favicon icon resources user56reinstatemonica8
fonte

Respostas:

3

Eu sempre usei o gerador de favicon no realfavicongenerator.net , que permite que você veja como a arte escolhida aparecerá em diferentes dispositivos. Existem algumas opções e você pode tentar com o ícone de exemplo para testar. Comece com um SVG quadrado para obter os melhores resultados, pois o site o converterá nos formatos necessários e fornecerá uma pasta compactada com tudo pronto para uso.

Também é um serviço gratuito, sem necessidade de registro ou outras bobagens. Basta usá-lo e doar se achar útil.

Tom Brossman
fonte
Eu amo esse site. Melhor gerador de favicon que já usei. Ele irá gerar um Zip com todos os seus arquivos de imagem e todas as linhas de código necessárias para que funcionem.
219 Avail Disponível
0

Eu sugeriria tentar a emulação de dispositivo no Google Chrome. É a maneira mais fácil que eu já vi e deve funcionar. Aqui está um artigo completo, https://developer.chrome.com/devtools/docs/device-mode

Ben Hoffman
fonte
Eu tentei isso, mas não consegui descobrir como fazer algo que exibisse o ícone de toque como o navegador, por exemplo, em uma guia vazia. Você sabe se isso é possível?
user56reinstatemonica8
Eu não acho que exista uma maneira fácil de testar esse ícone.
Ben Hoffman
-1

Apenas teste-os usando o Mozilla Firefox, a maioria dos desenvolvedores de aplicativos da web está usando esse método para testar

Ashraf Zebronet
fonte
Isso não responde à pergunta. "Apenas teste usando ..." o OP está perguntando como testar. Eu adoraria ver isso liberado para que pudéssemos usar o FF para testar como itens como o windows-tile-150x150.png representam um site no FireFox, por exemplo.
que você precisa