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

102

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

html favicon сойка
источник
2
Ключевые слова: favicon.ico
user956584
en.wikipedia.org/wiki/Favicon
Ry-

Ответы:

178

Это изображение называется « значок » и представляет собой .icoфайл небольшой квадратной формы , который является стандартным типом файлов для значков. Вы можете использовать .pngили .gifтоже, но вы должны следовать стандарту для лучшей совместимости.

Чтобы установить его для своего сайта, вам необходимо:

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

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

    А) Поместите его в корневую папку / каталог вашего сайта (рядом с index.html) с именем favicon.ico.

    или

    Б) Ссылка на него между <head></head>тегами каждого .htmlфайла на вашем сайте, например:

    <head>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>

Если вы хотите увидеть faviconс любого веб-сайта, просто напишите, www.url.com/favicon.icoи вы (вероятно) увидите это. Значок Stackoverflow имеет размер 16x16 пикселей, а размер Wikipedia - 32x32.

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

ЛазаньяАндроид
источник
18

Он называется « favicon », и вам нужно добавить приведенный ниже код в раздел заголовка вашего веб-сайта.

Просто добавьте это в <head>раздел.

<link rel="icon" href="/your_path_to_image/favicon.jpg">
Дулит Де Коста
источник
8

Это значок, который объясняется в ссылке.

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

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

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

Винсент Рамдхани
источник
2 
<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">
user3680001
источник
apple-touch-icon для веб-приложений iOS
LasagnaAndroid
1

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

Майк Фултон
источник
Помните, что это должно быть точно в 16x16 пикселях.
uınbɐɥs
3
Нет, он должен быть квадратной формы и любого размера, просто он будет загружаться дольше
LasagnaAndroid