• Welcome to LusoRobótica - Robótica em Português.
 

Favicon - LusoRobotica

Started by Kristey, 14 de January de 2014, 15:57

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Kristey

Bem como andei aqui a organizar os meus favoritos, e aqui a LusoRobotica não tinha uma coisa bonita como merece logo deixo aqui ao administrador.
A implementação é facil é só dentro do <head>
<link rel="shortcut icon" href="favicon.ico" />

Os ficheiros ja estão nas formas a usar *.ico e nas dimensões correctas.
http://cl.ly/1w3b2C2X3y3L

Estando o ficheiro na raiz do site / com o nome favicon.ico
Penso que pelo que pesquisei na altura para o meu site o nome tem de ser mesmo favicon, para os browser's interpretarem aquela imagem como a imagem para meter no bookmark.

Criei dois modelos:
Um branco com o fundo azul:


Outro branco com o sem fundo:

(este nao dará para utilizar em alguns browsers, porque nao se vai ver), mas se quiserem podem votar no que acham melhor)

TigPT

Agradeço, mas não gostavas do actual?
http://lusorobotica.com/favicon.ico

samc

Para mim o atual funciona muito bem por ser em preto e fazer contraste com as tabs em cinza.
A única sugestão que poderia existir para mim era fazer "favicons" para outros "sistemas" (windows 8, iOS). Este site faz o resize por nós www.iconj.com)
E retorna o código:
<link rel="shortcut icon" href="http://www.iconj.com/ico/u/g/xxxxxxxxxx.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="/images/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="/images/favicon-160x160.png" sizes="160x160" />
<link rel="icon" type="image/png" href="/images/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16" />
<meta name="msapplication-TileColor" content="#9f00a7" />
<meta name="msapplication-TileImage" content="/images/mstile-144x144.png" />

Kristey

Tig_PT nem fazia ideia que ja havia por isso criei (burro, podia ter isso ao codigo da pagina).
É que aqui nao abre...
Deve ser algum problema com o codigo!

Desculpa Tig_PT, mesmo assim se gostarem do "azul" podes aproveitar :D

TigPT

Experimentei esse auto generator mas ficam um bocado desfigurados, com fundos cinza e tal.

Mas a ver se faço então!

Kristey

Eu estou a utilizar no safari. Ja experimentei e no firefox aparece.
Na minha pagina implementei assim:

    <link  rel="icon" href="img/favicon.ico">
    <link  rel="shortcut icon" href="img/favicon.ico">


E funciona em todos os browsers e sistemas operativos.
Podes ver o codigo do site se quiseres Tig_PT:
www.chrisalvesdj.com

TigPT

Pois, talvez pelas cores do nosso icon não ficar bem gerado automaticamente, tenho que fazer as imagens e depois adiciono.

(Já tenho discografia para ouvir hoje. So far so good!)

dvdt

Pois não sabia que andavam DJ's por estas bandas :p Nao consegui abrir o site no chrome tive que ir com o safari
Engenharia Electrotécnica e Computadores (IST)
Analyst in a Big 4

samc

O resize que essa página fez de um logotipo em png com alta resolução foi muito razoável na minha opção. Pelo menos poupou-me muito trabalho. Quanto à implementação desse código com todos os icones acho que faz apenas sentido na página principal (home page). Para quem usa windows 8.1 e quiser fixar num mosaico o link para o lusorobotica, o aspeto fica muito "profissional"

Kristey

#9
Quote from: dvdt on 14 de January de 2014, 18:14
Pois não sabia que andavam DJ's por estas bandas :p Nao consegui abrir o site no chrome tive que ir com o safari
A serio? Aqui funciona sem problema :/


Como ja disse ao dvdt isto ate me deu uma ideia. Podiamos ter aqui uma seção em que pudessemos falar sobre as nossas actividades extra Robotica/Electronica.
O que achas TigPT?

dvdt

Já funciona agora estranho antes dizia a carregar e nao fazia mais nada
Engenharia Electrotécnica e Computadores (IST)
Analyst in a Big 4

TigPT

Já meti os ícone todos no LR. Só me falta o do windows