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


578

Я працюю над веб-сайтом, і хотів би додати невелику піктограму на вкладку браузера.

Як я можу це зробити в HTML і де в коді мені потрібно його розмістити (наприклад, заголовок)? Я маю.png файл логотипу, який я хотів би перетворити на іконку.

Пов’язано: Набір HTML-зображень на вкладці браузера .


1
Перевірте посилання для отримання додаткової інформації. Ви на правильному шляху.
реггі

Завантажте зображення (favicon.ico) за допомогою FTP (читайте наш підручник з FTP) до кореневого розділу вашого веб-сайту. Корінний розділ - це головна область файлу, де ви зберігатимете файл index.html (index.asp, index.php тощо) для вашої головної сторінки. davesite.com буде коренем davesite.com/webstation не буде коренем davesite.com/webstation/html також не кореневим Цей файл, розміщений належним чином, завантажиться як стандартний для вашого домену.
knookie

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

Відповіді:


416

Насправді є два способи додати фавікон на веб-сайт.

<link rel="icon">

Просто додайте наступний код до <head>елемента:

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

Підтримка PNG підтримується більшістю браузерів, крім IE <= 10 . Для зворотної сумісності можна використовувати ICO favicons.

Зауважте, що вам більше не потрібно передувати iconв relатрибутіshortcut . Від типів посилань MDN :

Тип shortcutпосилання часто спостерігається раніше icon, але цей тип посилань є невідповідним, ігнорується і веб-автори більше не повинні його використовувати .

favicon.ico в кореневому каталозі

З іншої відповіді ТА (від @mercator ):

Усі сучасні браузери (тестовані на Chrome 4, Firefox 3.5, IE8, Opera 10 та Safari 4) завжди будуть запитувати, favicon.icoякщо ви не вказали піктограму ярлика через <link>.

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

Дивіться також favicon.png vs favicon.ico - чому я повинен використовувати PNG замість ICO?


1
Якщо ви хочете, щоб усі іконки були автоматично (включаючи мобільні, «додавати на головний екран» піктограми, мобільні закладки, iOS / Droid, вкладку на робочому столі тощо), створення файлів ICO тощо тощо, а також HTML-код, який можна вставити на копію для вказаних метафайлів, всі одним натисканням кнопки ви можете скористатися цим зручним інструментом (я не пов’язаний з нею) realfavicongenerator.net
Альберт Реншо

2
Хочете додати: ваш значок повинен бути в квадратних розмірах, це означає, що ширина дорівнює висоті.
Nguyen Tan Dat

3
Не забудьте натиснути Ctrl + F5 під час тестування. Іноді це кешування.
Хаїрі

Я не виявив, що просто розміщення ICO-файлу на ім'я favicon.ico у кореневому каталозі мого сайту призвело до завантаження FireFox або Chrome. Тож я пішов <link relмаршрутом. АЛЕ, адреса мого сайту не вказана надійно в DNS, тому я не можу розраховувати на href="http://example.com"його отримання. Тому я дійшов до цього рішення у своєму index.htmфайлі:<link rel="icon" href="favicon.ico">
CODE-READ

426
  1. Використовуйте інструмент для перетворення вашого png у файл ico. Ви можете шукати "генератор фавікону", і ви можете знайти багато інструментів в Інтернеті.
  2. Помістіть адресу ico headз linkпозначкою -tag:

    <link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

3
Дякую! Я правильно дотримувався кроків, і він працює дуже добре на IE та Firefox, але чомусь це не працює в Google Chrome, чи потрібно видаляти кеш? або що мені робити звідти?
PatrickGamboa

1
Мені подобається використовувати плагін Photoshop: telegraphics.com.au/svn/icoformat/trunk/dist/README.html
Ben_Coding

2
Частина «ярлик» може бути видалена в багатьох випадках: stackoverflow.com/questions/13211206 / ... , mathiasbynens.be/notes/rel-shortcut-icon
Bbc

72

Найкращий, який я знайшов, - це http://www.favicomatic.com/ Я кажу найкраще, тому що він дав мені найкристіший фавікон і не потребував редагування після їх перетворення. Він генерує фавікони у 16х16 та 32х32 та цитуватиме їх "Кожен проклятий розмір, сер!" Також їх сайт виглядає круто і простий у користуванні.

Вони також генерують html, який потрібно використовувати для файлів, які вони генерують.

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Я переглянув перші 20 результатів Google, і це було, безумовно, найкраще.


4
Я повинен помістити все це в мій тег для кожної сторінки?
Номенон

1
Я б не помістив усе це у ваш тег голови. Я б розмістив лише теги, необхідні для підтримки пристроїв, які вам потрібні. Чесно кажучи, ви можете потрапити за допомогою одного <link rel = "icon" type = "image / ico" href = "/ images / favicon.ico">
Джаред Менар

5
Ця сторінка git пояснює, для чого використовується більшість із цих значків: github.com/audreyr/favicon-cheat-sheet
Джаред Менар

14

Існує ряд різних піктограм та навіть екрани, які можна встановити для різних пристроїв. Ця відповідь пояснює, як підтримати їх усіх.

Ось деякі фрагменти, які я використав із відповідними посиланнями на те, де я зібрав інформацію. Перегляньте мій блог для отримання додаткової інформації та додаткової інформації про шаблон проекту ASP.NET MVC Boilerplate з усім цим вбудованим прямо з поля (включаючи зразкові файли зображень).

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

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Мій файл browserconfig.xml. Повне пояснення вище.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Мій файл manifest.json. Повне пояснення вище.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

Список файлів у проекті (Зверніть увагу, що назви цих файлів важливі, якщо ви вирішили поставити деякі з них у корені проекту, щоб уникнути використання вищевказаних метатегів):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

Всього накладних витрат

Якщо ви виймаєте коментарі, це 3 КБ додаткового HTML-коду, якщо ви не підтримуєте заставки, це 1,5 КБ. Якщо ви використовуєте стиснення GZIP для вмісту HTML, яке повинні робити всі ці дні, це дає вам близько 634 байт накладних витрат на запит для підтримки всіх платформ або 446 байт без екранів. Я особисто думаю, що варто того, щоб підтримувати пристрої IOS, Android та Windows, але його вибір, я просто надаю варіанти!

Бічна примітка про поточну піктограму веб-сайтів / екран екрана / налаштування

Смішна ця ситуація з певними постачальниками піктограмами, екранами з всплесками та спеціальними тегами для керування веб-браузером або закріпленими значками. У ідеальному світі ми б використовували файл favicon.svg, який міг би виглядати добре в будь-якому розмірі і міг би бути розміщений у корені сторінки. Тільки FireFox підтримує це під час написання (Див. CanIUse.com ).

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

Оновлення

Оновлено, щоб включити нову версію M39 для Android / Chrome + favicon / тематизація. Цікаво, що вони пішли з подібним підходом до Microsoft, але використовують файл JSON замість XML.


11

Я створив онлайн- генератор Favicon, за допомогою якого ви можете створювати фавікони із значків шрифтів Awesome . Ви можете переглядати створений фавікон в прямому ефірі у браузері.

введіть тут опис зображення

Якщо ви хочете отримати додаткові функції, не соромтеся надіслати тут питання або запит на виклик :).


10

Я успішно зробив це для свого веб-сайту.

Винятком є ​​лише те, що для браузера SeaMonkey потрібен HTML-код, вставлений у ваш <head>; тоді як інші браузери все одно відображатимуть файл favicon.ico без будь-якого вставлення HTML. Також будь-який браузер, окрім IE, може використовувати інші типи зображень, а не лише формат .ico. Я сподіваюся, що це допомагає.


5

Вище є багато складних рішень. Для мене? Я використовував GIMP, щоб зберегти копію оригінального файлу PNG після зміни розміру зображення на 32 x 32 пікселів.

Просто не забудьте зберегти його як * .ico файл та використовувати

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

перераховані вище


4

Рекомендую спробувати http://faviconer.com для перетворення .PNG або .GIF у .ICO файл.

Ви можете створити і те, 16x16і 32x32(для нового відображення сітківки) в одному .ICO-файлі.

Немає проблем з IE та Firefox


3

Щоб Chrome відображав значок сторінки (favicon), вам потрібно перевірити свій веб-сайт із хостинг-сервера, або ви можете використовувати локальний хост під час розробки та тестування свого веб-сайту на вашому ПК.


2
<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

Якщо я можу додати більше ясності для тих із вас, хто все ще плутається. Файл .ico, як правило, забезпечує більшу прозорість, ніж .png, тому я рекомендую перетворити ваше зображення тут, як було зазначено вище: http://www.favicomatic.com/done також, всередині href - це лише розташування зображення , це може бути будь-яке місцезнаходження сервера, не забудьте додати http: // попереду, інакше це не працюватиме.


1

Я не використовував жодних інших, але https://realfavicongenerator.net/, здається, є найкращим вибором, і про це поки не згадували.

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

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


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.