Dicas OutSystems - Favicon

 

Olá!

Com certeza, o favicon é uma parte importante do branding e da apresentação de um projeto na web. Para quem não sabe, o favicon é um pequeno ícone que aparece na guia do navegador e também pode ser exibido em outros lugares, como nos favoritos do usuário, na barra de endereço, entre outros.

O favicon pode ser o logo da empresa ou do projeto, mas também pode ser uma imagem ou um ícone que represente a marca ou a temática do site. É importante que o favicon seja simples, legível e que tenha um tamanho adequado para que seja exibido corretamente em todas as plataformas e dispositivos.

Como mudar isso?????

vamos lá....

Salve a imagem que deseja usar como ícone ou logotipo em seu computador.

Abra o Service Studio e abra o projeto no qual deseja adicionar o ícone ou logotipo.

Clique na guia "Data" na barra de navegação superior.

Encontre a pasta "Resources" na lista de entidades e clique com o botão direito do mouse nela.

Selecione a opção "Import Resource" no menu suspenso.

Na janela pop-up que aparecer, selecione o arquivo de imagem que você salvou em seu computador e clique em "Abrir".

Espere enquanto o Service Studio carrega a imagem.

Quando a imagem estiver carregada, ela aparecerá na pasta "Resources" como um novo recurso.

Para usá-lo como um ícone ou logotipo, selecione a entidade que você deseja usar e vá para a guia "Layout".

Na guia "Layout", você pode selecionar o ícone ou logotipo que acabou de adicionar na lista suspensa "Icon".

Depois de selecionar o ícone ou logotipo, salve as alterações e publique o projeto para que a mudança seja visível para outros usuários..

Logo em seguida, você ira procurar por sua imagem no seu PC. E logo depois ira mostrar a opção "Add as Resource" SELECIONE a mesma.

Agora vamos em propriedades e com a imagem selecionada "marcada", iremos inserir as seguintes informaçoes no "Deploy Action" 

Atenção: Em Runtime Path iremos copiar o link mostrado no input OU seja, CTRL + C.

Agora iremos para a aba Interface e iremos procurar  a Screen Layouts que fica em cima do MainFlow.

Iremos Selecionar o block LayoutBase e vamos expandi-lo e procurar a Client Action com nome de OnReady. Dando um duplo clique e entrando na logica da mesma, iremos procurar no fluxo o "AddFavicon" de um clique em cima e vai em propriedades. Veja que tem dentro do input URL a seguinte informação "favicon.png" iremos apagar tudo que esteja dentro das ("") e vamos colar o link que voce copiou na imagem anterior.

Observação:.. Iremos fazer isso dentro dos blocos (LayoutBase, LayoutBlank, LayoutSideMenu e no LayoutTopMenu).

 

Sendo assim, chegaremos no nosso resultado que é ...