Obrazek obok tytułu strony w zakładce przeglądarki - jak tu możesz umieścić link do obrazka?
Obrazek obok tytułu strony w zakładce przeglądarki - jak tu możesz umieścić link do obrazka?
Odpowiedzi:
Ten obraz nazywa się „ favicon ” i jest to mały .ico
plik w kształcie kwadratu , który jest standardowym typem pliku favicon . Możesz użyć .png
lub .gif
też, ale powinieneś postępować zgodnie ze standardem dla lepszej kompatybilności.
Aby ustawić go dla swojej witryny, należy:
Zrób kwadratowy obraz swojego logo (najlepiej 32x32 lub 16x16 pikseli, o ile wiem, że nie ma maksymalnego rozmiaru *) i przekształć go w .ico
plik. Można to zrobić na Gimp, Photoshop (przy pomocy wtyczki ) lub na stronie internetowej jak Favicon.cc lub RealFaviconGenerator .
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 .html
pliku w witrynie, na przykład:
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
Jeśli chcesz zobaczyć to favicon
z dowolnej strony internetowej, po prostu napisz, www.url.com/favicon.ico
a (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
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">
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.
<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">
Dodaj plik ikony o nazwie „favicon.ico” do katalogu głównego swojej witryny.
16x16
piks.