Jak umieścić logo mojej witryny jako obraz ikony na kartach przeglądarki?


Odpowiedzi:


177

Ten obraz nazywa się favicon i jest to mały .icoplik w kształcie kwadratu , który jest standardowym typem pliku favicon . Możesz użyć .pnglub .gifteż, ale powinieneś postępować zgodnie ze standardem dla lepszej kompatybilności.

Aby ustawić go dla swojej witryny, należy:

  1. Zrób kwadratowy obraz swojego logo (najlepiej 32x32 lub 16x16 pikseli, o ile wiem, że nie ma maksymalnego rozmiaru *) i przekształć go w .icoplik. Można to zrobić na Gimp, Photoshop (przy pomocy wtyczki ) lub na stronie internetowej jak Favicon.cc lub RealFaviconGenerator .

  2. Następnie możesz skonfigurować go na dwa sposoby:

    A) Umieszczenie go w folderze głównym / katalogu witryny (obok index.html) z nazwą favicon.ico.

    lub

    B) Link do niego między <head></head>tagami każdego .htmlpliku w witrynie, na przykład:

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

Jeśli chcesz zobaczyć to faviconz dowolnej strony internetowej, po prostu napisz, www.url.com/favicon.icoa (prawdopodobnie) to zobaczysz. Ulubiona ikona Stackoverflow ma rozmiar 16x16 pikseli, a Wikipedia 32x32.

*: Występuje nawet problem z przeglądarką bez limitu rozmiaru pliku. Możesz łatwo zawiesić przeglądarkę z wyjątkowo dużą ikoną ulubionych, więcej informacji tutaj


18

Nazywa się „ favicon ” i musisz dodać poniższy kod w sekcji nagłówka swojej witryny.

Po prostu dodaj to do <head>sekcji.

<link rel="icon" href="/your_path_to_image/favicon.jpg">

8

To jest ikona ulubionych i jest wyjaśniona w linku.

np. z W3C

  <link rel="icon" 
     type="image/png" 
     href="http://example.com/myicon.png">

Plus oczywiście plik obrazu w odpowiednim miejscu.


2
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 
'apple-touch-icon-retina.png')}">

lub możesz użyć tego

<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">

apple-touch-icon jest dla iOS webApps
LasagnaAndroid

1

Dodaj plik ikony o nazwie „favicon.ico” do katalogu głównego swojej witryny.


Pamiętaj, że musi to być dokładnie 16x16 piks.
uınbɐɥs

3
Nie, nie, musi mieć kwadratowy kształt i dowolny rozmiar, po prostu ładowanie zajmie więcej czasu
LasagnaAndroid
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.