Jaki jest obecnie najlepszy sposób na wyświetlenie faviconu we wszystkich przeglądarkach obsługujących Favicony?

Jaki jest obecnie najlepszy sposób na wyświetlenie faviconu we wszystkich przeglądarkach, które go obsługują?

Proszę podać:

  1. Jakie formaty obrazów są obsługiwane przez jakie przeglądarki.

  2. Które linie są potrzebne w jakich miejscach dla różnych przeglądarek.

Author: Fred, 2008-09-01
Source

8 answers

Idę po pas i aparat ortodontyczny podejście tutaj.

Tworzę ikonę 32x32 w formatach .ico i .png o nazwie favicon.ico i favicon.png. Nazwa ikony nie ma znaczenia, chyba że masz do czynienia ze starszymi przeglądarkami.

  1. Umieść favicon.ico w katalogu głównym witryny, aby obsługiwać starsze przeglądarki (Opcjonalnie i dotyczy tylko starszych przeglądarek.
  2. umieść favicon.png w podkatalogu moje obrazy(tylko po to, aby wszystko było uporządkowane).
  3. Dodaj następujący kod HTML wewnątrz <head> element.
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />

Należy pamiętać, że:

  • typ MIME dla .ico Plików został zarejestrowany jako image / vnd.microsoft.icon by the IANA.
  • Internet Explorer zignoruje atrybut type dla relacji ikony skrótu i jest to jedyna przeglądarka obsługująca tę relację, nie musi być dostarczana.

Bibliografia

 100
Author: Brian Matthews,
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-10-28 03:30:18

Używam .format ico i umieść następujące dwie linie w elemencie <head>: 

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
 10
Author: John Topley,
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
2008-08-31 20:46:21

Do obsługi ikon dotykowych dla tabletów i smartfonów wolę podejście HTML5Boilerplate

Więcej informacji na temat ikon dotykowych można znaleźć w w tym artykule .

Przy aktualnym stanie obsługi przeglądarki nie musisz nawet dodawać znacznika HTML dla faviconu w dokumencie. Przeglądarki będą automatycznie wyszukiwać listę plików, zobacz ten przykład dla iOS:

Jeśli w kodzie HTML Nie podano ikon, iOS Safari przeszukuje katalog główny strony dla ikon z apple-touch-icon lub przedrostek apple-touch-icon-prefix. Na przykład, jeśli odpowiednie rozmiar ikony dla urządzenia to 57 × 57 pikseli, iOS wyszukuje nazwy plików w następującej kolejności:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. Apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

Radzę nie umieszczać faviconu w Twoim dokument, ale mieć gotową listę plików w witrynie głównej:

  • apple-touch-icon-114x114-precomposed.png
  • apple-Touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • Apple-touch-icon-precomposed.png
  • apple-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)

Po pobraniu szablonu z html5boilerplate.com to wszystko w zestawie wystarczy zastąpić je własnymi ikonami.

 6
Author: Willem de Wit,
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-02-05 14:26:54
 5
Author: Paul Tomblin,
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
2008-08-31 20:26:55

IE6 nie może poprawnie obsługiwać PNGs, ostrzegam.

 4
Author: nimish,
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
2014-04-05 21:59:48

Favicon musi być .plik ico do poprawnego działania na wszystkich przeglądarkach.

Nowoczesne przeglądarki obsługują również obrazy PNG i GIF.

Odkryłem, że ogólnie najprostszym sposobem na stworzenie takiego jest korzystanie z ogólnodostępnego serwisu internetowego, takiego jak favicon.cc .

 3
Author: Antti Sykäri,
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
2008-08-31 21:43:39

Istnieje również strona, na której możesz sprawdzić, jak powstaje favicon dowolnej strony

Getfavicon.org

Tam możesz zobaczyć tutorial o tworzeniu faviconów, typów obrazów i rozdzielczości, to miłe!

 3
Author: ,
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
2009-01-30 15:45:39

Posiadanie favicon.* w katalogu głównym jest automatycznie wykrywane przez większość przeglądarek. Możesz upewnić się, że jest wykryty za pomocą:

 <link rel="icon" type="image/png" href="/path/image.png" />
Osobiście używam .obrazy png, ale większość formatów powinna działać.
 2
Author: Ross,
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
2008-08-31 20:22:39