desenv-web-rp.com

Favicon, ícone, ícone de atalho, ícone Apple-touch-icon: existem outros?

Conheço dois tipos básicos de ícones da web padrão para sites:

  • Favicon : coloque um arquivo formatado .ico na raiz do seu site chamado favicon.ico e mais os navegadores da área de trabalho o encontrarão e o exibirão em vários contextos (favoritos, guias). Também pode ser adicionado ao código, que permite especificar outros nomes e outros tipos de gráficos para o arquivo, embora existam limitações de tipo e tamanho para navegadores :

    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="icon" href="/favicon.ico" />
    
  • Ícone do Web Clip : coloque um arquivo formatado png chamado Apple-touch-icon.png ou Apple-touch-icon-precomposed.png na raiz do seu site, as versões do Safari para iPhone/OS/iOS as selecionam e as armazenam quando o site é adicionado à Tela Inicial. Também pode ser adicionado com código como:

    <link rel="Apple-touch-icon" href="/custom_icon.png" />
    

Existem outros gráficos de ícone padrão para um site que um webmaster pode incluir?

24
artlung

aparece com base em this e this que Android usará o tipo rel de Apple-touch-icon-precomposed ou Apple-touch-icon, MAS que, para que funcione, você precisa usar um URL totalmente qualificado, por exemplo:

<link rel="Apple-touch-icon-precomposed"
      href="http://www.example.com/custom_icon.png" />

ou:

<link rel="Apple-touch-icon"
      href="http://www.example.com/custom_icon.png" />

A ressalva é que isso parece ser para atualização do Android 2.1 1 & Webkit 3.1 O documentação do desenvolvedor do Android menciona um método em Android.webkit que é um evento quando o Apple-touch-icon é recuperado.

8
artlung

Isso depende de qual plataforma você segmenta. Mas acho que a maioria dos navegadores móveis compatíveis com o padrão entende as tags favicon padrão. Talvez você possa procurar casos de uso especiais (por exemplo, criar atalho na área de trabalho com um ícone especial) em plataformas como Android, iOS, WebOS, ...

Acabei de desenvolver alguns sites direcionados aos usuários do iPhone e, nesses sites, usei Wordpress com uma versão especializada do tema WPTouch.

1
fwaechter