Como adicionar ícones a um site iPhone, iPad e iPod Touch

Favicon.ico - Ícone do site no navegador

Antes que lançou um site e adicionar um arquivo gráfico, favicon, para aparecer no navegador, na barra de endereço. Na maioria das situações, o favicon é uma miniatura do logotipo gráfico ou as iniciais do respectivo site. Este favicon é adicionado para ajudar os usuários a identificar rapidamente um endereço da web nos favoritos.

Stealth Settings favicon
Stealth Settings Favicon no Safari
Favicon no Opera
Favicon no Opera

Até recentemente, este arquivo tinha que estar em forma "favicon.ico", A ser identificado pelo navegador da web. Chrome, Internet Explorer, Opera, Safari, Firefox, etc.
Durante vários anos, com o avanço de novas linguagens web, HTML5 si CSS3, Pode ser um Favicons .png ou . Jpg. A condição é que o cabeçalho do site, antes, Seja esta linha:

Ícone do site para iOS - iPhone, iPad e iPod Touch

In iOS podemos adicionar atalhos página Web pe Home ScreenCPC iPhone, iPad si iPod touch.

Como adicionar um atalho para um site em iPhone, tela inicial do iPad e do iPod

Fazemos isso abrindo uma página da web em iPhone (Safari, Chrome, navegador de internet etc), clique no quadrado com a seta (o sinal de "compartilhar" no iOS), depois a opçãoAdd para a tela inicial".

Se o site não definiu favicon para o seu navegador, mas não definida sites de ícone específico de dispositivos iOS, A tela aparece um ícone que consiste numa visualização da imagem A página web.

Como adicionar ícones da web para iPhone, iPad e Android.

O primeiro passo é a criar um ícone de imagemQue aparecem em Home ScreenCPC comunidade idevice. Para ícone web é compatível com todos os dispositivos e ver claramente, devemos criar uma imagem para todas as resoluções de iPhone e iPad.

As resoluções e tamanhos padrão dos ícones para iPhone, iPad, iPod e Android

  • Modelos clássicos de iPhone / iPod = 57 × 57
  • iPad = 76 × 76
  • iPhone / iPod Retina = 120 × 120
  • Retina iPad = 152 × 152
  • iPhone 6 / 6S Plus = 180 × 180

Apple atualizados regularmente tamanho do ícone recomendadoURLs aplicações si páginas da web pe Nesta página.

Para os dispositivos Android, os ícones são duas dimensões:

  • Android clássico = 128 × 128
  • Android com alta resolução (alta resolução) = 192 × 192
ícones

Depois de feitas as imagens, elas são carregadas no servidor web, e no código-fonte HTML do site, antes de fechar , as seguintes linhas são adicionadas:

<link href=”/apple-touch-icon.png ”rel =”apple-tocar no ícone ”/> <link href=”/apple-touch-icon-76 × 76.png ”rel =”apple-Toque no ícone ”tamanhos =” 76 × 76 ″ /> <link href=”/apple-touch-icon-120 × 120.png ”rel =”apple-Toque no ícone ”tamanhos =” 120 × 120 ″ /> <link href=”/apple-touch-icon-152 × 152.png ”rel =”apple-Toque no ícone ”tamanhos =” 152 × 152 ″ /> <link href=”/apple-touch-icon-180 × 180.png ”rel =”apple-Toque no ícone ”tamanhos =” 180 × 180 ″ />

Para dispositivos Apple, O nome da imagem .PNG e "rel =" devem conter o prefixo "apple- ". Para Android, os nomes dos arquivos serão "ícone hires.png"E"ícone normal.png”Com rel =” ícone ”.

Não é absolutamente necessário criar imagens para cada resolução. Você pode fazer uma imagem com a resolução mais alta e os dispositivos com resolução mais baixa irão identificá-la e defini-la como um ícone.

iPhone-Website-Icon

O ícone de atalho para o site será semelhante a qualquer aplicações para iOS.

Apaixonado por tecnologia, gosto de testar e escrever tutoriais sobre sistemas operacionais macOSLinux, Windows, sobre configuração de servidores web WordPress, WooCommerce e LEMP (Linux, NGINX, MySQL e PHP). Eu escrevo em StealthSettings.com desde 2006, e alguns anos depois, comecei a escrever no iHowTo.Tips tutoriais e notícias sobre dispositivos no ecossistema Apple: iPhone, iPad, Apple Assistir, HomePod, iMac, MacBook, AirPods e acessórios.

Deixe um comentário