Jak dodać/stworzyć logo przy pasku adresu (favicon)

Co to takiego favicon?

Pewnie każdy już wie. Favicon (ang. favorites icon: ikona ulubionych) – ikona, która pojawia się w przeglądarce internetowej na karcie z otwartą stroną www. Ikona ta ma postać obrazka 16x16.

Jak stworzyć takie “logo”?

Stworzenie favikony jest bardzo proste:

  1. Tworzymy favikonę (możemy to zrobić przy użyciu ciekawego narzędzia http://www.favicon.cc/ lub http://favicon-generator.org/)
  2. Pobieramy ją na swój komputer.
  3. Przesyłamy nasz plik na serwer do folderu public_html.
  4. Favicona nazywamy: favicon.ico. Jeśli chemy mieć inną nazwę/rozszerzenie jest taka możliwość. Jednak ja pokazuje to w ten sposób.
  5. Jeśli tego pliku nie ma w katalogu głównym, dodajmy poprawnie ten fragment kodu HTML w sekcji <head>:
<link href="/jakisfolder/favicon.ico" rel="icon" type="image/x-icon" />

Po oczyszczeniu cache przeglądarki, zobaczymy nasz obrazek.
Takich narzędzi jak favicon.cc jest sporo , możesz śmiało próbować z innymi :slight_smile:
Powodzonka :slight_smile:

To musi czy nie musi się nazywać favicon.ico?

Moje trzy grosze :slight_smile:

I tu się nie zgodzę u mnie praktycznie na wszystkich stronach jest rozszerzenie .png i szybciej się zmieniają ikony jak podmieniam etc. itp. ( ale tak pisałem przerabiałem strony )

<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">

lub

<link rel="ICON" href="images/favicon.ico" />
<link rel="SHORTCUT ICON" href="images/favicon.ico" type="image/x-icon" />

Ale fakt w większości skryptów stron stosują .ico ale regułą to nie jest.

Nie musi ale w większości tak stosują :wink:

2 polubienia

Nie musi się nazywać favicon i nie koniecznie musi być w formacie ico. Te stare przeglądarki maja czasami problemy z odczytem w innej nazwie lub w formacie.

A taka ciekawostka tak to wygląda na forum :wink:

<link rel="icon" type="image/png" href="/uploads/default/original/1X/6dad0fdadae0dc0a89c21d1dd6fb72e8105afa77.png">
<link rel="apple-touch-icon" type="image/png" href="/uploads/default/original/1X/03c2f339be6ff857b8d55fa101c1c011a7c2492d.png">
<link rel="icon" sizes="144x144" href="/uploads/default/original/1X/03c2f339be6ff857b8d55fa101c1c011a7c2492d.png">

Dzięki :slight_smile:
Poprawiłem się, mam nadzieje.