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

101

Obrazek obok tytułu strony w zakładce przeglądarki - jak tu możesz umieścić link do obrazka?

html favicon sójka
źródło
2
Słowa kluczowe to favicon.ico
user956584.
en.wikipedia.org/wiki/Favicon
Ry-

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

LasagnaAndroid
źródło
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">
Dulith De Costa
źródło
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.

Vincent Ramdhanie
źródło
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">
user3680001
źródło
apple-touch-icon jest dla iOS webApps
LasagnaAndroid
1

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

Mike Fulton
źródło
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