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 ótimos ícones e blocos
Quando um usuário visita sua página da Web, o navegador tenta buscar um ícone no HTML. Ele pode aparecer em muitos lugares, incluindo a guia do navegador, a opção de apps recentes, a página da guia nova ou visitada recentemente e muito mais.
Uma imagem de alta qualidade torna seu site mais reconhecível, facilitando a localização dele pelos usuários.
Para oferecer suporte total a todos os navegadores, é necessário adicionar algumas tags ao elemento <head>
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 pelo
dispositivo. Para evitar o escalonamento automático, também é possível fornecer tamanhos adicionais 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 quadrado é ideal para o ícone de toque da Apple.
Não é recomendável incluir várias versões usando o atributo sizes
.
Anteriormente, o Safari para iOS consideraria a palavra-chave -precomposed
para evitar a adição de 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 oferece suporte a quatro layouts diferentes para sites fixados e requer quatro ícones. Você pode deixar de fora as metatags relevantes se não quiser oferecer compatibilidade com 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
Os "Sites fixados" e "Blocos dinâmicos" giratórios da Microsoft vão muito além de outras implementações e estão além do escopo deste guia. Saiba mais na página da MSDN sobre como criar blocos ativos (link em inglês).
Colorir elementos do navegador
Usando diferentes elementos meta
, é possível personalizar o navegador e
até mesmo elementos da plataforma. Lembre-se de que algumas delas podem funcionar apenas em determinadas
plataformas ou navegadores, mas elas podem melhorar muito a experiência.
O Chrome, o Firefox OS, o Safari, o Internet Explorer e o Opera Coast permitem definir cores para os elementos do navegador e até para a plataforma usando meta tags.
Cor de 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 aplicar estilo à barra de status e especificar 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, depois de vários
carregamentos, uma captura de tela do estado anterior do app. É possível evitar isso
instruindo o Safari a 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 precisa estar no tamanho específico da tela do dispositivo de destino ou não será usada. Consulte as Diretrizes de Conteúdo da Web do Safari para mais detalhes.
Embora a documentação da Apple sobre esse assunto seja escassa, a comunidade de desenvolvedores descobriu uma maneira de segmentar todos os dispositivos usando consultas de mídia avançadas para selecionar o dispositivo adequado e especificar a imagem correta. Confira uma solução que funciona, cortesia de tfausak's gist.
Alterar a aparência da barra de status
É possível mudar a aparência da barra de status padrão para black
ou
black-translucent
. Com o black-translucent
, a barra de status flutua sobre
o conteúdo da tela cheia, em vez de empurrá-la para baixo. Isso aumenta a altura do layout, mas obstrui a parte superior. Este é o código necessário:
<meta name="apple-mobile-web-app-status-bar-style" content="black">