Jak dodać favicon do mojej witryny?

Jakie znaczniki są nowoczesnym standardem dodawania favicon do mojej witryny? Jaki jest standardowy format i rozmiar obrazu?

.icoPreferowane jest działanie we wszystkich przeglądarkach, ponieważ pod względem rozmiaru najczęściej stosuje się 32x32, działa również 16x16 (w większości miejsc jest to rzeczywisty rozmiar używany w przeglądarce).

Również nie w twoim pytaniu, powinny one mieć 8 lub 24-bitową głębię kolorów.

Warto zauważyć, że jeśli planujesz iWhokolwiek użytkownicy dodają zakładki do Twojej witryny, jest to osobne <link>dla obrazu, na przykład StackOverflow:

<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">

Który jest:

Możesz użyć narzędzia takiego jak http://www.favicon.cc/, aby zaimportować zdjęcie i przekonwertować je do favicon lub po prostu utworzyć od podstaw.

Następnie, jeśli nazwiesz swój plik favicon.icoi umieścisz go w katalogu głównym swojej witryny, większość przeglądarek internetowych pobierze go automatycznie.

Ale możesz również jawnie zadeklarować to w plikach HTML w następujący sposób:

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

Korzystając z zalet używania innego formatu niż ico, należy używać różnych ulubionych na różnych stronach, umieścić swój ulubiony w innym miejscu, użyć innej nazwy niż faviconitp.

http://en.wikipedia.org/wiki/Favicon

Znaczniki z pełną ścieżką http domeny dla IE i trzymaj favicon w folderze dokumentów:

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

Standardowy format obrazu:

• .i co
• 16 x 16 pikseli

W przypadku różnych urządzeń, przeglądarek i systemu operacyjnego można używać różnych ikon. Na przykład poniżej znajduje się lista, która może Cię zainspirować. Zrób wszystko, aby poprawić / edytować listę w miarę postępu.

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />

Nie potrzebujesz już linku, ale jest on użyteczny. Zamiast tego, dopóki pozostawisz plik o nazwie favicon.ico (i jest to ico) w katalogu głównym, będzie on używany jako favicon.

Miałem trochę problemów z utworzeniem pliku .ico za pomocą GIMP, ale ten post zawiera szczegółowe instrukcje. Wydaje się, że sztuczka polega na zapisaniu jako format GIF, aby najpierw przekonwertować na indeksowaną tabelę kolorów, a następnie przekonwertować ją na format ICO.