Как разместить логотип своего веб-сайта как изображение значка на вкладках браузера?

Изображение рядом с названием страницы на вкладке браузера - как вы можете связать изображение здесь?

Ответы

Ответ 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">