Os navegadores modernos facilitam a personalização de determinados componentes, como ícones, a cor da barra de endereço e até mesmo elementos como blocos personalizados. Esses simples ajustes podem aumentar o engajamento e fazer com que os usuários voltem ao seu site.
Os navegadores modernos facilitam a personalização de determinados componentes, como ícones, a cor da barra de endereço e até mesmo elementos como blocos personalizados. Esses simples ajustes podem aumentar o engajamento e fazer com que os usuários voltem ao seu site.
Forneça ícones e blocos excelentes
Quando um usuário visita sua página da Web, o navegador tenta buscar um ícone do HTML. O ícone pode ser exibido em muitos lugares, incluindo na guia do navegador, no botão de aplicativos recentes, na página da guia nova (ou acessada recentemente), e muito mais.
Uma imagem de alta qualidade torna o site mais reconhecível, para que os usuários o encontrem.
Para oferecer suporte total a todos os navegadores, é preciso adicionar algumas tags ao arquivo <head>
elemento de cada página.
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome e Opera
O Chrome e o Opera usam icon.png, que é dimensionado para o tamanho necessário por
o dispositivo. Para evitar o escalonamento automático, você também pode fornecer
especificando o atributo sizes.
Safari
O Safari também usa a tag <link> com o atributo rel: apple-touch-icon para
indicar o ícone da tela inicial.
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
Um PNG não transparente com 180 ou 192 pixels de resolução é ideal para o Apple touch-icon.
Não é recomendável incluir várias versões com o atributo sizes.
Antes, o Safari para iOS considerava a palavra-chave -precomposed para evitar
adicionar efeitos visuais, mas isso não é necessário desde o iOS 7.
Internet Explorer e Windows Phone
A nova experiência de tela inicial do Windows 8 suporta quatro layouts diferentes para fixados, e requer quatro ícones. Você pode deixar de fora a meta relevante tags se não quiser oferecer suporte a um tamanho específico.
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Blocos no Internet Explorer
Sites fixados da Microsoft e girar os "Blocos Dinâmicos" vão muito além e estão fora do escopo deste guia. Para saber mais, na MSDN como criar blocos dinâmicos.
Colorir elementos do navegador
Usando diferentes elementos meta, é possível personalizar o navegador e
e até mesmo elementos da plataforma. Lembre-se de que algumas podem funcionar apenas em certas
plataformas ou navegadores, mas eles podem melhorar muito a experiência.
Chrome, Firefox OS, Safari, Internet Explorer e Opera Coast permitem definir cores dos elementos do navegador e até mesmo da plataforma usando metatags.
Cor do tema meta para Chrome e Opera
Para especificar a cor do tema para o Chrome no Android, use a cor do tema meta.
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Estilo específico do Safari
O Safari permite que você estilize a barra de status e especifique uma imagem de inicialização.
Especificar uma imagem de inicialização
Por padrão, o Safari mostra uma tela em branco durante o tempo de carregamento e após várias
carrega uma captura de tela do estado anterior do app. É possível evitar isso
informando ao Safari para mostrar uma imagem de inicialização explícita, adicionando uma tag de link, com
rel=apple-touch-startup-image: Exemplo:
<link rel="apple-touch-startup-image" href="icon.png">
A imagem deve estar no tamanho específico da tela do dispositivo de destino ou não será usado. Consulte Diretrizes de conteúdo do Safari para a Web para mais detalhes.
Embora a documentação da Apple seja escassa sobre esse assunto, a comunidade descobriu uma maneira de segmentar todos os dispositivos usando consultas de mídia avançadas para selecione o dispositivo apropriado e especifique a imagem correta. Confira solução de trabalho, cortesia de tfausak's gist
Mudar a aparência da barra de status
É possível alterar a aparência da barra de status padrão para black ou
black-translucent. Com black-translucent, a barra de status flutua na parte superior
do conteúdo em tela cheia, em vez de empurrá-lo para baixo. Isso dá ao layout
mais altura, mas obstrui a parte superior. Confira o código necessário:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black