У мене є кілька статичних сторінок, які є просто чистим HTML, які ми відображаємо, коли сервер виходить з ладу. Як я можу поставити зроблений вами фавікон (він 16x16px і він знаходиться в тому ж каталозі, що і HTML-файл; він називається favicon.ico) як піктограму "вкладки"? Я прочитав у Вікіпедії та переглянув кілька навчальних посібників і реалізував наступне:

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

Але це все ще не хоче працювати. Я використовую Chrome для тестування сайтів. За даними Wikipedia .ico - найкращий формат зображення, який працює на всіх типах браузера.

Оновлення

Я не міг змусити це працювати локально, хоча код перевіряє, що він справді справно працює, лише коли сервер почав обслуговувати сайт. Просто спробуйте підштовхнути його до сервера та оновіть кеш, і він повинен працювати добре.

html static favicon

— Легенда
джерело

хто не скажеш нікому зі свого друга, щоб він перевірив це для вас на якійсь іншій системі, те саме питання - з одним із моїх клієнтів моя система відображається добре, і він скаржиться, що Favicon не з’являється, я в основному використовую перший з вас приклад і це вірно. удачі.

— мт

3

Можливий дублікат Як додати піктограму вкладки браузера (favicon) для веб-сайту?

— Michał Perłakowski

Ваш приклад зараз працює на Chrome.

— Дам’ян Павліця

Цікаво, що веб-сайт у прямому ефірі обслуговував favicon просто чудово, але при перегляді файлу локально, а не в обслуговуванні його через локальний сервер (b / c це простий статичний сайт - так!), Favicon не показав. З огляду на це має сенс, сервери автоматично його обслуговують. Додавання <link rel="icon" type="image/x-icon" href="favicon.ico">до head(поруч із варіаціями 32, 16 та 180 фавікон link) вирішило проблему на місцевому рівні. Оскільки я включив links для більших розмірів піктограм та маніфесту, я не думав двічі про те, чому favicon.icoне з’явився! :-)

— SherylHohman

932

Ви можете створити .png зображення, а потім використовувати один із наведених нижче фрагментів між <head>тегами статичних документів HTML:

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

— Туманний Макгі
джерело

3

ви спробували ввести "піктограму швидкого доступу" в rel = для ваших посилань ico і поставити / перед favicon.ico на обидва, просто щоб вказати, що він знаходиться в режимі веб-коренера?

— Hazy McGee

1

yip спробував це також .. man lol Я оцінюю, що я збираюся перезапустити все це, а потім спробуйте завантажитися і побачити, якщо, можливо, його готівка не так чи щось ..

— TheLegend

5

Я клянусь - у мене виникли ті самі проблеми після додавання коду - у браузері знадобився день, щоб відобразити значок замість сірого поля, як правило, - спробуйте скинути історію кешу браузера ур тощо. Якщо ви скопіювали код, переконайтеся, що ви змінити example.com на ур домен lol

— Hazy McGee

2

Існує надмірний / в аргументі href верхнього рядка. Після того, як я її зняв, це працює як шарм. Повинно бути: <link rel = "значок ярлика" href = "favicon.png" type = "image / png">

— drpawelo

4

w3.org/2005/10/howto-favicon каже включити profileатрибут у headтег ... це потрібно?

— Ракіб

228

Більшість браузерів вибиратимуть favicon.icoз кореневого каталогу сайту без необхідності повідомляти; але вони не завжди оновлюють його новим відразу.

Однак я зазвичай звертаюся до другого з ваших прикладів:

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

— Codecraft
джерело

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

— TheLegend

2

Поки його в розділі <head>, це не повинно мати значення - адже він не покладається на щось інше для роботи.

— Codecraft

126

Власне, для того, щоб ваш фавікон працював у всіх браузерах, у вас повинно бути більше 10 зображень у правильних розмірах та форматах.

Я створив додаток ( faviconit.com ), тому людям не потрібно створювати всі ці зображення та правильні теги вручну.

Сподіваюся, вам сподобається.

— Едуардо Руссо
джерело

6

Подобався додаток, не бійте - прямо на нього, і зображення можна редагувати перед тим, як створити всі фаворити +1 для вас, щоб заощадити мені купу часу :)

— SidOfc,

1

Погоджено, це чудове додаток. Хоча я не думаю, що всі ці розміри зображень здаються цілком необхідними, я люблю, що це генерує їх та потрібну розмітку тощо. Дякую!

— andrhamm

Indeead чудовий додаток: +1 :. Допомагав багато о /

— Ренато Гомес

1

Але це власниця.

— ctrl-alt-delor

Це не працює, даєWhoops, looks like something went wrong.

— daka

68

Наступні роботи для мене ...

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

— Jet Blue
джерело

40

Перетворити файл зображення в base64 рядок за допомогою інструменту , як це , а потім замінити YourBase64StringHereзаповнювач в наведеному нижче фрагменті коду з вашої рядком і помістити рядок в голову розділі HTML:

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

Це працюватиме на 100% у браузерах.

— Фаршид
джерело

3

Я знайшов ще один інструмент, який здійснює перетворення в JavaScript без передачі даних на сервер: jpillora.com/base64-encoder Крім того, він обробляє декілька файлів шляхом перетягування. Збережіть сторінку, щоб використовувати її локально.

— обробляти

1

imho, найкраще рішення, оскільки воно шанує сторінку "статичного html" і повністю міститься в документі.

— Буффало Рабор

1

Найкраще рішення. Працює і з файлами png. <link href = "data: image / png; base64, YourBase64StringHere" rel = "icon" type = "image / png" />

— Рольф із Саксонії

1

Це призведе до додавання довгого рядка до кожної сторінки. Використовуйте inline base64 для невеликих зображень, які рідко надсилаються користувачеві.

— frodeborli

Таким чином, ваш фавікон ніколи не кешується, ви щоразу надсилаєте цілу рядок клієнту, IHMHO використовуючи URL, і тому кеш браузера відчуває себе "чистішим / кращим"

— Michiel

34

Використання Синтаксис: _{^{.ico, .gif, .png,.svg}}

У цій таблиці показано, як користуватися faviconосновними браузерами. Стандартна реалізація використовує елемент посилання з атрибутом rel у розділі документа, щоб вказати формат файлу, ім'я та місцезнаходження файлу.

Зауважте, що більшість браузерів надаватимуть перевагу favicon.icoфайлу, що знаходиться в корені веб-сайту (тому ігноруючи будь-які теги посилань на піктограму).

                                           Edge   Firefox   Chrome   I.E.   Opera   Safari  
 ---------------------------------------- ------ --------- -------- ------ ------- -------- 
  <link rel="shortcut icon"                Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/myicon.ico">                                                    

  <link rel="icon"                         Yes    Yes       Yes      9      Yes     Yes     
   type="image/vnd.microsoft.icon"                                                          
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/x-icon"     Yes    Yes       Yes      9      Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon"                         Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/gif"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.gif">                                                     

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

  <link rel="icon" type="image/svg+xml"    Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/image.svg">

Підтримка формату файлів

Наступна таблиця ілюструє підтримку формату файлів зображень для favicon:

                                         Animated                                
  Browser             ICO   PNG    GIF    GIF's   JPEG   APNG   SVG   
 ------------------- ----- ------ ------ ------- ------ ------ ------ 
  Edge                Yes   Yes    Yes    No      ?      ?      ?     
  Firefox             1.0   1.0    1.0    Yes     Yes    3.0    41.0  
  Google Chrome       Yes   Yes    4      No      4      No     No    
  Internet Explorer   5.0   11.0   11.0   No      No     No     No    
  Safari              Yes   4      4      No      4      No     No    
  Opera               7.0   7.0    7.0    7.0     7.0    9.5    44.0

Впровадження браузера

Таблиця нижче ілюструє різні області браузера, де відображаються фавікони:

                      Address     Address bar 'Links'                       Drag to  
  Browser             Bar         drop-down     bar       Bookmarks   Tabs   desktop  
 ------------------- ------------ ----------- --------- ----------- ------ --------- 
  Edge                No            Yes         Yes       Yes         Yes    Yes      
  Firefox             until v12     Yes         Yes       Yes         Yes    Yes      
  Google Chrome       No            No          Yes       Yes         1.0    No       
  Internet Explorer   7.0           No          5.0       5.0         7.0    5.0      
  Safari              Yes           Yes         No        Yes         12     No       
  Opera               v7–12: Yes    No          7.0       7.0         7.0    7.0      
                      > v14: No

Файли значків можуть бути розміром 16 × 16 , 32 × 32 , 48 × 48 або 64 × 64 пікселів та глибиною кольорів 8-біт , 24-біт або 32-біт .

Незважаючи на те, що наведена вище інформація, як правило, правильна, в деяких ситуаціях є деякі варіанти / винятки.

^{Повну статтю дивіться у джерела у Вікіпедії.}

Оновлення: ("додаткова інформація")

Перегляньте "нові" (2019) критерії Google, щоб визначити фавікон для показу в результатах пошуку .
Ви можете завантажити (програмно чи вручну) кешований файл Google для будь-якого домену з URL-адресою, наприклад:https://www.google.com/s2/favicons?domain=stackoverflow.com

Використання вищезазначеної URL-адреси безпосередньо в <img>тезі повертає: " ".
Я кілька разів використовував realfavicongenerator.net ; це дуже ретельно, генеруючи / налаштовуючи всі можливі варіанти фавікону, які можуть знадобитися для максимальної сумісності. (Однак якщо ви шукаєте одне зображення фавікону, це може бути не інструментом для вас!) Для простого перетворення файлів (наприклад, PNGдо ICOтощо) мені подобається internetconvertfree.com .

— ashleedawg
джерело

15

Якщо favicon - це зображення типу png, воно не працюватиме у старих версіях Chrome. Однак у FireFox це буде добре працювати. Крім того, не забудьте очистити кеш браузера, працюючи над такими речами. Багато разів код просто чудовий, але кеш - справжній винуватець.

— Тандер Шейх
джерело

1

Це добре; дуже важко встановити / зберегти стару версію Chrome у будь-якому випадку

— Бен Лег'єро

14

Як рекомендує W3.org , ви можете використовувати relатрибут для досягнення цього.

Приклад:

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

— Рахул Дезай
джерело

8

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

— шиловк
джерело

7

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

Це працювало для мене

— Ананд Двіведі
джерело

4

Хоча це може працювати, ви не можете використовувати image / png як тип MIME - тому що це неправильно, враховуючи, що ви використовуєте .ico

— zanderwar

5

Я знаю його старіший пост, але все ще публікую для когось, як я. Це працювало для мене

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

помістіть свій значок Favicon у кореневий каталог ..

— Циклотрон3x3
джерело

4

як додаткова примітка, яка може допомогти комусь одного дня.

Ви не можете нічого повторити на сторінці раніше:

Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

не завантажуватиме ico

<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

працює чудово

— bart2puck
джерело

3

Це тому, що він повинен знаходитися в головному розділі документа HTML, і більшість браузерів ігнорується, якщо його немає.

— Ерік Себаста

Так, я просто хотів поставити це тут на випадок, якщо хтось зіткнувся з проблемою. Моя проблема полягала в тому, що "привіт" був якийсь код налагодження, і він трохи натрапив на мене.

— bart2puck

3

Я використовував convert -resize 16x16 img.png favicon.ico(на консолі linux) для перетворення свого зображення та додавання <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">до свого заголовка, і все працює ідеально.

— dmx
джерело

2

Зауважте, що якщо ваш сайт працює як subfolderнаприклад:

http://localhost/MySite/

Вам потрібно буде це врахувати. Якщо ви робите це з ASP.NETпрограми, все, що вам потрібно зробити, - це додати ~на передню частину URL-адреси:

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

— Серж Саган
джерело

2

Згідно з оновленням ОП, він не відображався локально, але згідно оновлення ОП, як тільки я завантажив його на сервер, це було добре.

Оскільки це простий, статичний html-сайт, я маю розкіш працювати над ним, не запускаючи локальний веб-сервер.
Як правило, веб-сервер автоматично обслуговує фавікон, якщо він є, за замовчуванням.

Але якщо не запускається веб-сервер, сам браузер не просто прочитає каталог, який шукає додаткові файли, скажімо, favicon.ico, якщо він не вказаний у html-документі.

Отже, у мене в headтезі були такі елементи :

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">

Я не також включати посилання на простий «оле favicon.ico.
Незважаючи на те, що favicon.icoфайл був включений, крім перерахованих вище зображень.

Як тільки я додав наступний рядок:

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

Це також з’являється в моєму браузері, коли я переглядаю локальний файл, навіть коли не обслуговує його через локальний сервер.

Тож піктограма виявилася чудово, коли вона працювала на прямому сервері, але не локально.

Я прямо згадую про це, тому що генератор favicon, який я використовував, люб'язно надав код, піктограми, маніфест та інструкції. Однак, хоча воно включало favicon.icoзображення, воно не включало <link>до цього файлу в код для додавання до htmlдокумента.
Я здогадуюсь, що припущення служби favicon.icoавтоматично будуть обслуговуватися та використовуватися усіма браузерами за замовчуванням, тому до головного тегу потрібно явно додавати лише "альтернативні" версії.
Очевидно, вони не вважають, що при перегляді файлів на локальному рівні (він же не обслуговує їх локально) ми не зацікавлені в тому, щоб побачити фавікон?

— Шерил Хоман
джерело

1

Якщо ви додасте фавікон у папку root / images з іменем favicon.ico браузер автоматично зрозуміє та отримає його як favicon.Я перевірив і працював. ваше посилання має бути www.website.com/images/favicon.ico

Для отримання додаткової інформації дивіться цю відповідь:

Чи потрібно включати <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />?

— Сархан
джерело

0

Зауважте, що FF не може завантажити значок із надлишком //у URL-адресі /img//favicon.png. Тестовано на FF 53. Chrome нормально.

— Етьєна Берсак
джерело

Це насправді не відповідь настільки, наскільки це коментар . (Див. " Як відповісти ".)

— ashleedawg

0

Спробуйте використовувати <link rel="icon" type="image/ico" href="images/favi.ico"/>

— субінди вечора
джерело

-2

Я просто використав png. Обов’язково видаліть будь-який білий фон. робить для кращої Ікону

— Том
джерело

Додавання фавікону до статичної сторінки HTML