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

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

5 ответов


это изображение называется 'значок' и это маленький квадрат в форме .ico file, который является стандартным типом файла для favicons. Вы могли бы использовать .png или .gif тоже, но вы должны следовать стандарту для лучшей совместимости.

чтобы установить один для вашего сайта, вы должны:

  1. сделайте квадратное изображение вашего логотипа (предпочтительно 32x32 или 16x16 пикселей, насколько я знаю, нет максимального размера*) и преобразуйте его в Ан . Вы можете сделать это на Gimp, Photoshop (с помощью плагин) или сайт типа Favicon.cc или RealFaviconGenerator.

  2. тогда у вас есть два способа его настройки:

    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 и вы (видимо) его увидеть. сайте StackOverflow-это favicon 16x16 пикселей и Википедия - это 32х32.

*: там даже проблема браузера, без ограничения размера файла. Вы можете легко разбить браузер с чрезвычайно большим favicon, больше информации здесь


Это называется 'favicon и вам надо добавить ниже код заголовок раздел вашего сайта.

просто добавьте в тег .

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

Это favicon и описано в ссылке.

например, из W3C

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

плюс, конечно, файл изображения в соответствующем месте.


<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">

Добавить файл значков с именем "favicon.ico " в корень вашего сайта.