Jak dodać ikonę karty przeglądarki (favicon) dla witryny?

Question

Jak dodać ikonę karty przeglądarki (favicon) dla witryny?

Pracowałem nad stroną internetową i chciałbym dodać małą ikonkę do karty przeglądarki.

Jak mogę to zrobić w HTML i gdzie w kodzie muszę to umieścić (np. nagłówek)? Mam plik .png logo, który chciałbym przekonwertować na ikonę.

Powiązane: HTML Ustaw obraz na karcie przeglądarki .

449

html favicon icons

Author: Community, 2011-02-03

Source

10 answers

Użyj narzędzia do konwersji png do pliku ico. Możesz wyszukać "favicon generator" i można znaleźć wiele narzędzi online.

Umieść adres ico w {[1] } z link - tag:

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

404

Author: Gustavo Costa De Oliveira,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-07 14:14:03

Najlepszy jaki znalazłem to http://www.favicomatic.com / Mówię najlepiej, ponieważ dał mi najostrzejszy favicon i nie wymagał edycji po ich transformacji. Wygeneruje favicony o wymiarach 16x16 i 32x32 i cytując je " każdy cholerny rozmiar, sir!" Ponadto ich strona wygląda fajnie i jest łatwa w użyciu.

Generują również kod html, którego musisz użyć do generowania plików.

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

Spojrzałem na pierwsze 20 lub tak wyników google, i to było zdecydowanie najlepszy.

59

Author: Jared Menard,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-27 20:04:29

Istnieje wiele różnych ikon, a nawet ekranów powitalnych, które można ustawić dla różnych urządzeń. Ta odpowiedź mówi, jak wspierać je wszystkie.

Oto kilka fragmentów, których użyłem z odpowiednimi linkami do miejsca, w którym zebrałem informacje. Zobacz mój blog Po Więcej informacji i więcej informacji o ASP.NET MVC Boilerplate szablon projektu z tym wszystkim wbudowanym zaraz po wyjęciu z pudełka (w tym przykładowe pliki graficzne).

Dodaj następującą marżę do twojej głowy html. Komentowane sekcje są całkowicie opcjonalne. Podczas gdy sekcje niezatwierdzone są zalecane, aby objąć wszystkie zastosowania ikon. Nie bój się, większość jeśli to Komentarze, aby ci pomóc.

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

Mój browserconfig.plik xml. Pełne wyjaśnienie powyżej.

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

Mój manifest.plik json. Pełne wyjaśnienie powyżej.

{
    "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"
        }
    ]
}

Lista plików w projekcie (zauważ, że nazwy tych plików są ważne, jeśli zdecydujesz się umieścić niektóre z nich w katalogu głównym projektu unikaj używania powyższych metatagów):

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

Total Overhead

Jeśli wyjmiesz komentarze, które mają 3KB extra HTML, jeśli nie obsługujesz ekranów powitalnych, które mają 1,5 KB. Jeśli używasz kompresji GZIP na treści HTML, co każdy powinien robić w dzisiejszych czasach, to pozostawia Ci Około 634 bajtów na żądanie do obsługi wszystkich platform lub 446 bajtów bez ekranów powitalnych. Osobiście uważam, że warto obsługiwać urządzenia z SYSTEMEM IOS, Android i Windows, ale to twój wybór, ja tylko daję opcje!

Uwaga Na Temat Aktualnej Sytuacji Ikony / Ekranu Powitalnego / Ustawień

Sytuacja z ikonami specyficznymi dla dostawcy, ekranami powitalnymi i specjalnymi znacznikami do sterowania przeglądarką internetową lub przypiętymi ikonami jest śmieszna. W idealnym świecie wszyscy użylibyśmy faviconu.plik svg, który może wyglądać dobrze w dowolnym rozmiarze i może być umieszczony w katalogu głównym strony. Tylko FireFox obsługuje to w momencie pisania (Zobacz CanIUse.com).

W dzisiejszych czasach ikony nie są jedynymi ustawieniami, istnieje kilka innych ustawień specyficznych dla dostawcy (pokazanych powyżej), ale favicon.plik svg obejmowałby większość przypadków użycia.

Update

Zaktualizowano o nową wersję Androida / Chrome M39+ opcje favicon/theming. Co ciekawe, poszli z podobnym podejściem do Microsoftu, ale używają pliku JSON zamiast XML.

11

Author: Muhammad Rehan Saeed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-16 16:36:15

Udało mi się to zrobić dla mojej strony internetowej.

Jedynym wyjątkiem jest to, że przeglądarka SeaMonkey wymaga kodu HTML umieszczonego w <head>; podczas gdy inne przeglądarki nadal będą wyświetlać favicon.ico bez wstawiania HTML. Ponadto każda przeglądarka inna niż IE może używać innych typów obrazów, nie tylko .format ico. Mam nadzieję, że to pomoże.

10

Author: Barbie laptop gamer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-25 23:47:38

Istnieje wiele skomplikowanych rozwiązań powyżej. Dla mnie? Użyłem programu GIMP do zapisania kopii oryginalnego pliku PNG po zmianie rozmiaru obrazu na 32 x 32 piksele.

Tylko pamiętaj, aby zapisać go jako *.plik ico i użyj

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

Wymienione powyżej

3

Author: xianbei,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-21 19:12:44

Polecam spróbować http://faviconer.com aby nawrócić swoje .PNG lub .GIF do A.Plik ICO.

Możesz utworzyć zarówno 16x16, jak i 32x32 (dla nowego wyświetlacza retina) w jednym .Plik ICO.

Brak problemów z IE i Firefoksem

3

Author: Dmitri A,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-26 00:46:35

Aby Chrome wyświetlał ikonę strony (favicon), musisz sprawdzić witrynę z serwera hostingowego lub możesz użyć lokalnego hosta podczas tworzenia i testowania witryny na komputerze.

2

Author: Miloud Eloumri,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-20 00:03:35

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

Jeśli Mogę dodać więcej jasności dla tych z Was, którzy wciąż są zdezorientowani. The .plik ico ma tendencję do zapewnienia większej przejrzystości niż.png, dlatego polecam konwersję Twojego obrazu tutaj, jak wspomniano powyżej: http://www.favicomatic.com/done ponadto, wewnątrz href jest tylko lokalizacja obrazu, może to być dowolna Lokalizacja serwera, pamiętaj, aby dodać http: / / z przodu, w przeciwnym razie nie będzie działać.

1

Author: DIZAD,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-14 22:02:55

Stworzyłem internetowy Generator Faviconów, za pomocą którego można tworzyć favicony z Font Awesome Icons. Utworzony favicon można podglądać na żywo w przeglądarce.

Jeśli potrzebujesz dodatkowych funkcji, prosimy o zgłoszenie problemu lub prośby o pull request tutaj :).

1

Author: eclipse,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-16 17:31:29

score 265 · Accepted Answer

Istnieją dwa sposoby dodawania faviconu do witryny.

`<link rel="icon">`

Wystarczy dodać następujący kod do elementu <head>:

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

PNG favicons są obsługiwane przez większość przeglądarek, z wyjątkiem IE . Aby uzyskać kompatybilność wsteczną, możesz użyć ICO favicons.

Zauważ, że nie musisz poprzedzać icon atrybutem rel z shortcut już nie. Z typy łącza MDN :

Typ łącza shortcut jest często spotykany przed icon, ale ten typ linku jest niezgodny, ignorowany i autorzy stron internetowych nie mogą już z niego korzystać .

`favicon.ico` w katalogu głównym

From another so answer (by @mercator):

Wszystkie nowoczesne przeglądarki (testowane z Chrome 4, Firefox 3.5, IE8, Opera 10 i Safari 4) zawsze będą żądać favicon.ico, chyba że podałeś ikonę skrótu za pomocą <link>.

Więc wszystko, co musisz zrobić, to złożyć /favicon.ico prośbę o Twoja strona zwraca favicon. Ta opcja niestety nie pozwala na użycie ikony PNG.

Zobacz także favicon.png vs favicon.ico-dlaczego powinienem używać PNG zamiast ICO?

Jak dodać ikonę karty przeglądarki (favicon) dla witryny?

10 answers

<link rel="icon">

favicon.ico w katalogu głównym

`<link rel="icon">`

`favicon.ico` w katalogu głównym