Изображение рядом с названием страницы на вкладке браузера - как вы можете связать изображение здесь?
Как разместить логотип своего веб-сайта как изображение значка на вкладках браузера?
Ответ 1
Это изображение называется 'favicon', и это небольшой квадратный файл .ico
, который является стандартным типом файла для значков. Вы можете использовать .png
или .gif
тоже, но вы должны следовать стандарту для лучшей совместимости.
Чтобы установить его для своего сайта, вы должны:
-
Сделайте квадратное изображение своего логотипа (желательно 32x32 или 16x16 пикселей, насколько я знаю, нет максимального размера * и преобразуйте его в файл
.ico
. Вы можете сделать это на Gimp, Photoshop (с помощью плагин) или веб-сайт, например Favicon.cc или RealFaviconGenerator. -
Затем у вас есть два способа его настройки:
A) Размещение его в корневой папке вашего сайта (рядом с
index.html
) с именемfavicon.ico
.или
B) Ссылка на него между тегами
<head></head>
каждого файла.html
на вашем сайте, например:<head> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> </head>
Если вы хотите видеть favicon
с любого сайта, просто напишите www.url.com/favicon.ico
, и вы (вероятно) увидите его. favicon для стоп-каров - 16x16 пикселей, Wikipedia - 32x32 и crafstud.io - 128x128.
*: Даже проблема с браузером без ограничения размера файлов. Вы можете легко свернуть браузер с чрезвычайно большим значком, подробнее здесь
Ответ 2
Он называется " favicon", и вам нужно добавить код ниже в раздел заголовка вашего сайта.
Просто добавьте это в раздел <head>
.
<link rel="icon" href="/your_path_to_image/favicon.jpg">
Ответ 3
Это favicon и объясняется в ссылке.
например. от W3C
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
Плюс, конечно, файл изображения в соответствующем месте.
Ответ 4
Добавьте файл значка с именем "favicon.ico" в корень вашего сайта.
Ответ 5
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file:
'apple-touch-icon-retina.png')}">
или вы можете использовать этот
<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">