User Documentation
Descarregar
Iniciar

Favicons

Os Favicons do Joomla!

Os favicons são os pequenos ícones que aparecem no separador do navegador junto ao nome do seu sítio. Perto do início do index.php do tema existem três instruções para carregar os favicons na página:

    // Browsers support SVG favicons
    $this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
    $this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
    $this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);

Para o tema Cassiopeia, o Joomla procurará os favicons nas seguintes localizações:

  1. media/templates/site/cassiopeia/images - não estão lá, pelo que o Joomla procurará na localização seguinte.
  2. media/system/images - estão lá, pelo que o Joomla irá utilizá-los a partir daí.

Se quiser utilizar os seus próprios favicons em vez dos favicons do Joomla, carregue-os para a primeira localização: media/templates/site/cassiopeia/images. Pode fazer isso através do formulário Temas — Personalizar. Não serão afetados por qualquer atualização ao tema Cassiopeia.

Os favicons são por vezes utilizados em tamanhos maiores e em locais diferentes do separador do navegador. Por exemplo, esta é uma captura de ecrã de parte de uma página inicial do Firefox que mostra alguns dos locais favoritos do utilizador:

favicon examples from firefox start page

Todos os navegadores modernos suportam ícones SVG, pelo que deve fazer da criação de um ícone SVG uma prioridade.

Sobre SVG

SVG é um acrónimo de Scalable Vector Graphics. Um ficheiro SVG contém texto num formato que define as localizações e formas das linhas com cores de linha, cores de preenchimento e assim por diante. A captura de ecrã seguinte mostra o ficheiro joomla-favicon.svg aberto num editor de texto. Os números de linha são criados pelo editor de texto. Não estão presentes no ficheiro. As linhas longas representam curvas e estão truncadas aqui para efeitos de exibição.

joomla favicon text content

Para criar um ficheiro SVG precisa de utilizar uma aplicação apropriada, como o Inkscape. Aplicações de gráficos rasterizados, como o Photoshop ou o GIMP, não servem. Se preferir desenhar um ícone numa aplicação de gráficos rasterizados, ou se já tiver um logótipo rasterizado existente que possa ser adaptado para um ícone, pode importar o ficheiro PNG resultante para o Inkscape e aí vetorizá-lo para produzir um ficheiro SVG. A imagem vetorizada deve ser eliminada após a vetorização!

A criação propriamente dita de um favicon em SVG está fora do âmbito deste artigo. A criação de um ficheiro favicon.ico padrão a partir de um ficheiro joomla-favicon.svg é muito simples — há imensos sítios que o fazem em linha e gratuitamente.

Como criar favicons

Se quiser criar os seus próprios favicons, a melhor forma de o fazer é criar um favicon em SVG e depois utilizar uma ferramenta em linha para gerar todos os outros formatos a partir desse ficheiro. Neste exemplo é necessário um ícone adequado a um tema-filho chamado Cassiopeia Green. Um ícone tem de ser quadrado e não demasiado elaborado, uma vez que o tamanho mínimo de exibição é 16x16 pixels. Alguns dispositivos necessitam de resoluções mais elevadas, como 32x32 ou 180x180, e a Google recomenda múltiplos de 48x48 pixels. Se começar com um SVG não precisa de se preocupar com nada disso — basta criar uma imagem quase quadrada com um design adequado. Neste exemplo, o favicon será as letras J4 em verde-escuro.

Inkscape

O Inkscape é uma aplicação de gráficos vetoriais gratuita, de código aberto e multiplataforma, utilizada para trabalhar com ficheiros SVG. Funciona em Linux, Mac e Windows. Aceda ao sítio do Inkscape (inkscape.org) para descarregar uma cópia para a sua plataforma. As ilustrações seguintes mostram o ecrã do Inkscape a meio das instruções seguintes.

inkscape with favicon in preparation

Criar um SVG

  1. Inicie o Inkscape e ajuste a janela para um tamanho confortável: selecione Ver / Zoom / Ajustar à página
  2. Selecione a Ferramenta de texto, assinalada com a letra A na barra de ferramentas esquerda
  3. Selecione Arial, Normal, 48 e px
  4. Arraste para definir uma caixa em qualquer lugar da página
  5. Digite o texto: J4
  6. Selecione Ver / Ampliar seleção
  7. Selecione Caminho / Objeto para caminho — sem alteração visível, mas as palavras deixam de ser texto
  8. Selecione Ficheiro / Propriedades do documento
  9. Selecione Ajustar ao conteúdo
  10. Reduza o zoom para uma melhor visualização — mas certifique-se de que todas as letras continuam selecionadas
  11. Defina a caixa de altura com o mesmo valor da caixa de largura. Digite-o!
  12. Feche a caixa de diálogo Propriedades do documento
  13. Ver / Ajustar à página novamente — os caracteres precisam de ser centrados
  14. Editar / Selecionar tudo
  15. Objetos / Alinhar e distribuir
  16. Mover seleção como grupo / Relativo à página / Centrar no eixo horizontal — deverá ver o J4 mover-se para o ponto médio vertical
  17. Selecione o painel de Enchimento e contorno à direita — o painel do lado direito tem uma lista pendente assinalada com um chevron para baixo
  18. No painel Enchimento e contorno, selecione Enchimento e o primeiro quadrado preenchido
  19. No painel RGB, insira 006400ff no campo RGBA perto do canto inferior direito — o código para o estilo CSS darkgreen
  20. Ficheiro / Guardar
  21. Na caixa de diálogo Guardar, insira um nome de ficheiro adequado, por exemplo green-favicon-j4.svg
  22. Selecione uma localização adequada, por exemplo ~/Documents/joomla-dev/svgs
  23. Selecione SVG otimizado (.svg) na lista pendente na parte inferior do formulário.
  24. Selecione Guardar
  25. Selecione OK para todas as predefinições no formulário Optimised SVG Output
  26. Feche o SVG em que está a trabalhar - há a possibilidade de guardar a imagem em formato Inkscape, mas não é realmente necessário.

Editar o SVG com um editor de texto

Inicie o seu editor de texto preferido para fazer algumas alterações que não eram possíveis no Inkscape.

  1. Abra o ficheiro SVG que acabou de criar - repare que a primeira linha é uma especificação XML
  2. Pode eliminar a segunda linha - um comentário que contém Created with Inkscape
  3. Se estiver presente, pode eliminar a linha que a contém, já que não existe texto
  4. Abra o ficheiro original joomla-favicon.svg - está em joomla_root/media/system/images
  5. Copie o bloco de estilo e cole-o no seu SVG, na linha seguinte à instrução SVG
  6. Feche o ficheiro original joomla-favicon-svg para evitar alterações acidentais
  7. No bloco de estilo do seu próprio ficheiro SVG, altere path {fill: #000;} para path {fill: #006400;}, o valor na linha
  8. Remova fill="#006400" da linha
  9. Guardar
  10. Abra a imagem no seu navegador. No Firefox é Ficheiro / Abrir ficheiro...

Deverá ver a imagem no seu navegador. O exemplo mostra J4 a 47 pixels quadrados. A próxima etapa é criar os outros tipos de ícones de que necessita, usando o seu SVG recém-criado como modelo.

Processamento em linha

Aceda ao sítio Real Favicon Generator. Existem outros sítios disponíveis, mas este parece particularmente completo.

  1. Selecione o botão rotulado Select your Favicon image
  2. O sítio irá mostrar-lhe a sua imagem mestra. Também diz Your picture is not square (688x512). We can fix this by adding transparent margins
  3. Selecione o botão Continue with this picture abaixo da imagem mestra.
  4. Existem subformulários com fundos azul-claro para vários tipos de ícone - preencha cada um deles, verificando se a pré-visualização lhe agrada.
  5. É melhor manter as predefinições das Favicon Generator Options, a menos que saiba melhor. Exceto:
  6. Em Path, selecione a opção I cannot ... e introduza: media/templates/site/cassiopeia-green/images
  7. Selecione o botão Generate your Favicons and HTML Code
  8. Após uma breve espera, surge um novo formulário; selecione o botão Download your package: pacote Favicon
  9. Guarde o descarregamento ...
  10. Selecione e copie o bloco de hiperligações para guardar em algum lugar.
  11. Feche o sítio de processamento em linha

O descarregamento é um ficheiro zip que contém 10 itens: favicon.ico, safari-pinned-tab.svg, seis ficheiros PNG, browserconfig.xml e site.webmanifest.

Implementação

Para usar o conjunto padrão de favicons do Joomla, precisa de renomear e mover os ícones para joomla_root/media/templates/site/yourtemplate/images:

  • A sua imagem SVG mestra, green-favicon-j4.svg, deve ser renomeada para joomla-favicon.svg
  • O ficheiro safari-pinned-tab.svg descarregado precisa de ser renomeado para joomla-favicon-pinned.svg
  • O ficheiro favicon.ico descarregado só precisa de ser movido

O bloco de hiperligações

O bloco de hiperligações copiado anteriormente contém:

<link rel="apple-touch-icon" sizes="180x180" href="/media/templates/site/cassiopeia-green/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/media/templates/site/cassiopeia-green/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/media/templates/site/cassiopeia-green/images/favicon-16x16.png">
<link rel="manifest" href="/media/templates/site/cassiopeia-green/images/site.webmanifest">
<link rel="mask-icon" href="/media/templates/site/cassiopeia-green/images/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/media/templates/site/cassiopeia-green/images/favicon.ico">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="msapplication-config" content="media/templates/site/cassiopeia-green/images/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

Provavelmente não precisará de o utilizar!