578

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

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

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

html icons favicon knookie
źródło

1

sprawdź link, aby uzyskać więcej informacji. Jesteś na dobrej drodze.

reggie

Prześlij obraz (favicon.ico) za pomocą FTP (przeczytaj nasz samouczek FTP) do głównej sekcji witryny. Sekcja główna to główny obszar pliku, w którym należy przechowywać plik index.html (index.asp, index.php itp.) Dla strony głównej. davesite.com byłby rootem davesite.com/webstation nie byłby rootem davesite.com/webstation/html też nie jest rootem Ten plik, umieszczony prawidłowo, załaduje się jako domyślny dla całej domeny.

knookie

przedwcześnie naciśnij klawisz Enter - w każdym razie dzięki za odpowiedź. Czy po prostu powiesz, że pierwsza część (którą wkleiłam powyżej) w linku, który podałeś, nie działała? Jednak druga część działała idealnie - dziękuję

knookie

3

Oto rekomendacje w3.org z ostrzeżeniem, że IE przed IE11 nie obsługuje .png jako ikon fav .

Denys Séguret,

416

Istnieją dwa sposoby dodania favicon do strony internetowej.

`<link rel="icon">`

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

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

Ulubione PNG są obsługiwane przez większość przeglądarek, z wyjątkiem IE <= 10 . Aby uzyskać zgodność z poprzednimi wersjami, możesz użyć ulubionych ikon ICO.

Należy pamiętać, że nie trzeba poprzedzać iconw relatrybucie zshortcut już. Z typów łączy MDN :

Typ shortcutlinku jest często widziany wcześniej icon, ale ten typ linku jest niezgodny, ignorowany i autorzy stron internetowych nie mogą go już używać .

`favicon.ico` w katalogu głównym

Z innej SO odpowiedzi (autor @mercator ):

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

Musisz więc /favicon.icotylko wysłać prośbę do swojej witryny o 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?

Michał Perłakowski
źródło

1

Jeśli chcesz WSZYSTKIE ikony automatycznie (w tym mobilne, ikony „dodaj do ekranu głównego”, mobilne zakładki, iOS / Droid, karta na pulpicie itp.), Generowanie plików ICO itp., A także kod HTML do wklejenia dla wymienionych plików meta, wszystko za pomocą jednego kliknięcia, możesz użyć tego poręcznego narzędzia (nie jestem powiązany) realfavicongenerator.net

Albert Renshaw

2

Chcesz dodać: ikona powinna mieć kwadratowy wymiar, co oznacza, że szerokość jest równa wysokości.

Nguyen Tan Dat

3

Nie zapomnij nacisnąć Ctrl + F5 podczas testowania. Czasami jest buforowany.

Hairi

I nie nie okaże się, że po prostu umieszczenie pliku ICO nazwie favicon.ico w katalogu głównego Moja witryna jest spowodowane albo Firefox lub Chrome, aby go załadować. Więc poszedłem na <link reltrasę. ALE adres mojej witryny nie jest niezawodnie wymieniony w DNS, więc nie mogę liczyć na href="http://example.com"jego odzyskanie. Tak więc doszedłem do tego rozwiązania w moim index.htmpliku:<link rel="icon" href="favicon.ico">

CODE-REaD

426

Użyj narzędzia do konwersji pliku png do pliku ico. Możesz wyszukać „generator ulubionych” i znaleźć wiele narzędzi online.

Umieść adres ico w headz link-tag:

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

Gustavo Costa De Oliveira
źródło

3

dzięki! Wykonałem te kroki poprawnie i działa naprawdę dobrze na IE i Firefox, ale z jakiegoś powodu nie działa na Google Chrome, czy muszę usunąć pamięć podręczną? lub co mam z tego zrobić?

PatrickGamboa,

1

Lubię używać wtyczki Photoshop: telegraphics.com.au/svn/icoformat/trunk/dist/README.html

Ben_Coding

2

Część „skrót” można usunąć w wielu okolicznościach: stackoverflow.com/questions/13211206/… , mathiasbynens.be/notes/rel-shortcut-icon

bbc

72

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 fawikony o wymiarach 16 x 16 i 32 x 32 i zacytuje je „Każdy cholerny rozmiar, proszę pana!” Ponadto ich strona wygląda fajnie i jest łatwa w użyciu.

Generują również pliki HTML, których należy użyć do generowanych 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 pierwszych 20 wyników Google i było to zdecydowanie najlepsze.

Jared Menard
źródło

4

Mam to wszystko umieścić w tagu head na każdej stronie?

Noumenon,

1

Nie umieściłbym tego wszystkiego w twojej metce. Umieściłbym tylko tagi potrzebne do obsługi urządzeń, które musisz obsługiwać. Szczerze mówiąc, możesz sobie poradzić z jednym <link rel = "icon" type = "image / ico" href = "/ images / favicon.ico">

Jared Menard

5

Ta strona git wyjaśnia, do czego służy większość tych ikon: github.com/audreyr/favicon-cheat-sheet

Jared Menard

14

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

Oto kilka fragmentów, których użyłem z odpowiednimi linkami do miejsca, w którym zebrałem informacje. Zobacz mój blog, aby uzyskać więcej informacji i więcej informacji na temat szablonu projektu ASP.NET MVC Boilerplate z tym wszystkim wbudowanym od razu po wyjęciu z pudełka (w tym przykładowe pliki obrazów).

Dodaj następujący znacznik do swojej głowy HTML. Skomentowane sekcje są całkowicie opcjonalne. Podczas gdy niezakomentowane sekcje są zalecane dla wszystkich zastosowań ikon. Nie bój się, jeśli komentarze są pomocne.

<!-- 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 plik browserconfig.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 plik manifest.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 (pamiętaj, że nazwy tych plików są ważne, jeśli zdecydujesz się umieścić niektóre z nich w katalogu głównym projektu, aby uniknąć 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

Całkowity koszt ogólny

Jeśli usuniesz komentarze, które mają 3 KB dodatkowego HTML, jeśli nie obsługujesz ekranów powitalnych, będzie to 1,5 KB. Jeśli używasz kompresji GZIP do treści HTML, co wszyscy powinni robić w tych dniach, to pozostawia ci około 634 bajtów narzutu na żądanie do obsługi wszystkich platform lub 446 bajtów bez ekranów powitalnych. Osobiście uważam, że warto wspierać urządzenia z systemami iOS, Android i Windows, ale to twój wybór, po prostu daję opcje!

Uwaga boczna na temat bieżącej ikony sieci Web / ekranu powitalnego / sytuacji

Ta sytuacja z ikonami specyficznymi dla dostawcy, ekranami powitalnymi i specjalnymi tagami do sterowania przeglądarką internetową lub przypiętymi ikonami jest absurdalna. W idealnym świecie wszyscy używalibyśmy pliku favicon.svg, który mógłby wyglądać dobrze w dowolnym rozmiarze i mógłby być umieszczony w katalogu głównym strony. Tylko FireFox obsługuje to w momencie pisania (patrz CanIUse.com ).

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

Aktualizacja

Zaktualizowano w celu włączenia nowej wersji Androida / Chrome M39 + opcje ulubionych / tematyczne. Co ciekawe, zastosowali podobne podejście do Microsoft, ale używają pliku JSON zamiast XML.

Muhammad Rehan Saeed
źródło

11

Stworzyłem internetowy generator Favicon, za pomocą którego możesz tworzyć ulubione z Font Awesome Icons . Możesz wyświetlić podgląd utworzonego favicon na żywo w przeglądarce.

Jeśli chcesz dodatkowych funkcji, prześlij tutaj problem lub prośbę o ściągnięcie :).

zaćmienie
źródło

10

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

Jedynym wyjątkiem jest to, że przeglądarka SeaMonkey wymaga kodu HTML wstawionego do twojego <head>; podczas gdy inne przeglądarki nadal wyświetlają favicon.ico bez wstawiania HTML. Ponadto każda przeglądarka inna niż IE może wykorzystywać inne typy obrazów, nie tylko format .ico. Mam nadzieję, że to pomoże.

Gracz na laptopie Barbie
źródło

5

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

Pamiętaj tylko, aby zapisać go jako plik * .ico i użyć

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

wymienione powyżej

beep_check
źródło

4

Polecam wypróbować http://faviconer.com do konwersji .PNG lub .GIF do pliku .ICO.

Możesz utworzyć oba ( 16x16i 32x32dla nowego wyświetlacza siatkówki) w jednym pliku .ICO.

Brak problemów z IE i Firefox

Dmitri A.
źródło

3

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

Miloud Eloumri
źródło

2

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

Jeśli mogę dodać więcej jasności dla tych z was, którzy są nadal zdezorientowani. Plik .ico zapewnia większą przezroczystość niż plik .png, dlatego zalecam konwersję obrazu tutaj, jak wspomniano powyżej: http://www.favicomatic.com/done również, 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ć.

dizad87
źródło

1

Nie korzystałem z żadnych innych, ale https://realfavicongenerator.net/ wydaje się być najlepszym wyborem i nie zostało jeszcze tutaj wspomniane.

Obsługuje pliki SVG jako obrazy źródłowe do generowania ulubionych i zapewnia przydatne opcje zastępowania obrazów dla różnych platform. Ponadto domyślnie nie generuje ton obrazów, które byłyby kompatybilne wstecz z każdą nieaktualną platformą. Zamiast tego daje ci możliwość sprawdzenia, czy ich potrzebujesz.

Z wiadomości e-mail, którą przysłał mi programista, planują także dodać obsługę generowania ulubionych plików SVG, a także wrażliwość motywów SVG , jak sądzę, co jest całkowicie niesamowitą funkcją.

mbomb007
źródło

0

Uprzejmie użyj poniższego kodu w sekcji nagłówka pliku indeksu.

<link rel="icon" href="yourfevicon.ico" />

chitraksh bairathee
źródło

Jak dodać ikonę zakładki przeglądarki (favicon) do strony internetowej?

Odpowiedzi:

`<link rel="icon">`

`favicon.ico` w katalogu głównym

Jak dodać ikonę zakładki przeglądarki (favicon) do strony internetowej?

Odpowiedzi:

<link rel="icon">

favicon.ico w katalogu głównym

`<link rel="icon">`

`favicon.ico` w katalogu głównym