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

Favicon.ico - Ícone do Site in Browser

Antes que lançou um site e adicionar um arquivo gráfico, faviconQue aparecem no browser, a barra de endereços. Na maioria das situações, o favicon é um logotipo gráfico em miniatura ou iniciais respectivos sites. Este favicon é adicionado para ajudar os usuários a identificar um endereço mais rápido marcadores da Web.

favicon Stealth Settings

favicon Stealth Settings no Safari

Favicon no Opera

Favicon no Opera

Até recentemente, este arquivo deve estar no formato "favicon.ico"Para 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 </ head>, Seja esta linha:

<Link rel = "shortcut icon" href = "/ images / favicon.ico" type = "image / x-icon" />

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

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

Como adicionar um atalho site no iPhone, iPad e iPod Home Screen

Fazemos isso através da abertura de um site em seu iPhone (Safari, Chrome, Internet navegador etc.), clique no quadrado com a seta (o sinal de "share" no iOS), em seguida, a opção "Adicionar à 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 web para o iPhone, iPad e Android.

O primeiro passo é acriar 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 para iPhone e iPad.

Resoluções e tamanhos padrão de ícones para iPhone, iPad, iPod e Android

  • modelos clássicos de iPhone / iPod = 57 57 ×
  • iPad = 76 76 ×
  • iPhone / iPod Retina × = 120 120
  • iPad Retina × = 152 152
  • iPhone 6 / 6S Além disso = 180 180 ×

maçã 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 de alta resolução (alugueres) = 192 192 ×

ícones

Depois fizemos as imagens, subir no servidor web, o HTML do site antes do fechamento </ head>, adicione as seguintes linhas:

<link href = "/ apple-touch-icon.png" rel = "ícone do toque da maçã" /> <Link href = "/ apple-touch-icon-76x76.png" rel = "apple-touch-icon" tamanhos = "76x76" /> <Link href = "/ apple-touch-icon-120x120.png" rel = "apple-touch-icon" tamanhos = "120x120" /> <Link href = "/ apple-touch-icon-152x152.png" rel = "apple-touch-icon" tamanhos = "152x152" /> <Link href = "/ apple-touch-icon-180x180.png" rel = "apple-touch-icon" tamanhos = "180x180" /> <Link href = "/ ícones hires.png" rel = tamanhos "ícone" = "192x192" /> <link href = "/ icon-normal.png" rel = "ícone" tamanhos = "128x128" />

Para os dispositivos da Apple, e .PNG nome da imagem "rel =" deve conter o prefixo "Apple". Para Android, o nome do arquivo será "ícone hires.png"E"ícone normal.png"Com rel =" icon ".

Não é absolutamente necessário para criar imagens para cada resolução separadamente. Você pode fazer uma imagem para o de alta resolução e os dispositivos com resolução mais baixa, irá identificar e irá definir o ícone.

iPhone Ícone do Site

O ícone do atalho será parecido com o website de qualquer aplicações para iOS.

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

Sobre o autor

discrição

Apaixonada por tudo o que gadget e TI escrever stealthsettings.com prazer de 2006 e eu gosto de descobrir novas coisas com você sobre computadores e MacOS, Linux, Windows, iOS e Android.

Deixe um comentário

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.