Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Favicon

07 lipca 2005

Favicon, czyli mówiąc bardziej po polsku, favikona jest małym obrazkiem wyświetlanym na pasku adresu. Zwykle też bywa używana na tabach oraz po dodaniu strony do zakładek.

Informacje podstawowe: powinna mieć 16x16 pikseli. Może być w formacie .ico lub .png, .gif. Wstawia się ją na stronę w bloku <head/> w ten sposób:

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

Wszyscy to niby wiedzą, ale mało kto pamięta, żeby w ten sposób ozdobić stronę. I żeby tylko ozdobić - favikona jest bardzo dużym udogodnieniem w identyfikacji strony na tabach, w zakładkach. A co do zakładek, to jeszcze coś chciałem dodać.

Najczęściej odwiedzane strony trzymam na pasku narzędziowym Bookmarks Toolbar. Z uwagi na to, że korzystam z dużej ilości stron codziennie, jest tam masa linków. Gdy strona posiada favikonę, wystaczy że usunę opis zakładki i mam samą ikonkę oraz pełno wolnego miejsca na kolejne strony, ułatwiające życie. Także, moi drodzy... ułatwiajcie mi oraz sobie życie i dodawajcie do stron favikony. Nawet najprostsze.

Tagi wpisu:

Informacje i hiperłącza

To ja! Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

Informacje o wpisie

Napisał riddle 07 lipca 2005 o 12:51

Kategorie: Design, Użyteczność

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

Komentarze

  1. Rewolucjonista 1 07 lipca 2005, 12:53

    dzieki, jak znajde troche czasu to skorzystam

  2. nbw 2 07 lipca 2005, 12:55

    Można też dodać, że wcale nie musisz dopisywać link rel gdyż Fireworks bardzo brutalnie ZAWSZE szuka favicony. Niezależnie czy jest czy jej nie ma.

  3. riddle 3 07 lipca 2005, 12:55

    Firefox mniemam. Tak, wiem.. prawda to jest :)

  4. Paool 4 07 lipca 2005, 12:58

    eej, fajny pomysł z samymi ikonkami :D

  5. olórin 5 07 lipca 2005, 13:05

    http://www.winterdrache.de/freeware/png2ico/ <- jakby ktoś chciał konwertować png na ico :)

  6. Nickel 6 07 lipca 2005, 13:06

    Ja także używam samych ikonek, podpisy są nieestetyczne. ;>

    Próbowałeś dodać "A list apart" do swojej kolekcji? :)

  7. olórin 7 07 lipca 2005, 13:06

    Na pewnej stronie znalazłem propozyjce dodania 2 linijek w celu dodania ikony...

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

  8. riddle 8 07 lipca 2005, 13:07

    nickel: Oczywiście. Dupa, że tak powiem. Ich favicona jest z lekka dziwna, nawet jej otworzyć do edycji nie mogłem. Potem zrobiłem manewr z wycięciem z zrzutu ekranu i zapisaniem jako png... a FaviconPickerem ją dodałem do QB.
    olorin: Dzięki, dodam type do kodu.

  9. piko 9 07 lipca 2005, 13:08

    I wlasnie to, ze FF *zawsze* szuka tam tejze favikonki powoduje, ze mam ¶mieci w logach.

    Tutaj pisalem o tym wiecej:
    http://piko.jogger.pl/comment.php?eid=126802

  10. Nivertius 10 07 lipca 2005, 13:19

    Dlaczego niby favicona ma mieć 16x16? Dlaczego właśnie taki format? Wszystkie inteligentne przeglądarki sobie skalują, więc ja osobiście używam 64x64, bo lubię mieć duże ikonki gdzieniegdzie, a z oczywistych względów lepiej jest skalować w dół niż w góre.

  11. jachacy 11 07 lipca 2005, 13:38

    *Chyba* gify też mogą być, np.http://www.ad.art.pl/ .

  12. iss 12 07 lipca 2005, 13:41

    A jaka jest różnica między "shortcut icon" i "icon"?
    I jeśli się daje .png, to chyba powinno być type="image/png".

  13. riddle 13 07 lipca 2005, 13:43

    nivertius: Tylko, że skalowanie nie jest doskonałe. Najlepiej tworzyć coś dla danej reski. A zawsze możesz dodać 2, 3 wpisy shortcut icon... inteligentna oglądarka wybierze sobie 16x16.

  14. Nivertius 14 07 lipca 2005, 13:55

    No tak, skalowanie nie jest doskonałe, ale jak skalujesz przez całkowitą potęge dwójki [w tym przypadku 4] to nie ma szans, żeby były jakieś zniekształcenia przecież. Za to w przeciwną strone, czyli jakby przeglądarka obsługiwała obrazki 64x64 to wiadomo jaka 'pikseloza' wychodzi.
    Tak, wiem przeglądarki obsługują tylko 16x16... dochodzę do wniosku, że wszystkie są głupie ;-( [bynajmniej nie tylko z tego powodu].

  15. listek 15 07 lipca 2005, 14:17

    a jak greasemonkeyem dodasz favico to zadziała?

  16. riddle 16 07 lipca 2005, 14:27

    listek: pewnie

  17. olórin 17 07 lipca 2005, 16:15

    Nivertius - w .ico możesz mieć kilkanascie wersji jednej ikony - w różnych wymiarach i z różną ilością kolorów.

  18. Jam Łasica RF 18 07 lipca 2005, 22:00

    Można przekonwertować film DivX na pojedyncze klatki-pliki, a potem zapisać to jako animowaną faviconę w formacie GIF ;-)

  19. Patrys 19 08 lipca 2005, 01:12

    Ja i tak mam najlepszego fava ;)

  20. pandaboy.jogger.pl 20 10 lipca 2005, 15:17

    a wie ktos moze co zrobic i jak zeby to dzialalo pod jakas domena ?

  21. mik0laj 21 19 stycznia 2006, 01:12

    mam pytanie... nie wiecie moze jak zmienić favikone zeby wyswietlała sie w IE 6.0 [ciagle wyswietla mi sie favikona prv.pl na ktorej mam domene :( ].. w Firefoxie chodzi bez problemow. pozdro

    http://www.mik0laj.prv.pl/

  22. Riddle 22 19 stycznia 2006, 01:19

    Co do prv.pl to masz w panelu administracyjnym opcję podania ścieżki do pliku favikonki, bo prv.pl to ramka w której pokazuje się inną stronę. Dlatego przeglądarki biorą ikonę ramki a nie strony.

  23. dragon 23 10 czerwca 2006, 04:23

    witam a jak mam to zrobic np w jporalu da sie

  24. avalansz 24 02 września 2006, 12:56

    A ja wstawiłem coś takiego:
    <HEAD>
    <LINK REL="SHORTCUT ICON" HREF="http://www.czyscioch.cba.pl/favicon.ico">
    </HEAD>
    , zrobiłem ikonę i nie działa proszę o pomoc.

  25. Dominik 25 15 grudnia 2006, 20:54

    A jak zrobić żeby faviconka pokazywała się w IE??

  26. Riddle 26 15 grudnia 2006, 20:55

    A nie pokazuje? Masz plik .ico? Który IE?

  27. Dominik 27 15 grudnia 2006, 21:24

    No nie pokazuje!! Na żadnych stronach. Faviconka jest w formacie ico. IE wersja 6.0.2900.2180.xpsp_sp2_gdr… Jak zrobię za moment zrzut ekranu to podlinkuję.

  28. Dominik 28 15 grudnia 2006, 21:38

    Poniżej link do zrzutu ekranu

    http://www.dominik.napierala.biz/gimp/favicon.jpg

  29. Aga 29 04 stycznia 2007, 22:24

    pomozcie PROSZE
    zrobilam wszystko podrecznikowo i w przegladarce Moz. widac a w IE nie
    mam najnowsza wersje IE i na innych stronkach widac ikonke
    co zrobic??

  30. klisiu 30 11 stycznia 2007, 20:55

    Ja natomiast powklejałem oba kodu do head’a:
    <link rel=„icon” href=„favicon.ico” type=„image/x-icon”/>
    <link rel=„shortcut icon” href=„favicon.ico” type=„image/x-icon” />
    Niestety nie wiem czemu, ale nie działa mi ikona….

  31. klisiu 31 12 stycznia 2007, 14:37

    Dobra, sam już z tym poradziłem :)
    <link rel=„shortcut icon” href=„http://gda.jogger.pl/files/favicon.ico” />
    w/w kod wkleiłem do szablonu i wszystko działa ;)

  32. Daniel 32 02 marca 2007, 15:59

    Czytam Wasze komentarze, zobiłem wszystko tak jak opisane jest przez Was, podglądam jak wygląda to na innych stronach, a jednak u mnie nie chce to zadziałać :( dlaczego?

  33. Riddle 33 02 marca 2007, 16:00

    W IE6 favikonka pojawi się dopiero po zapisaniu strony do zakładek. W Operze bodaj dopiero jak będzie w sieci, nie na lokalu. Próbuj. :-)

  34. xxx 34 10 marca 2007, 19:00

    mam problem nie działają mi favicony w operze 9.1 poradźcie coś.

  35. Versus 35 09 stycznia 2008, 14:22

    U mnie na razie na stronie testowej ikona wyświetla sie prawidłowo w Mozilli ale już nie w IE (mam 7).

    Strona jest na razie testowa i znajduje sie pod adresem:
    http://www.versus-odszkodowania.pl/test/

    Czy może dlatego, że jest ma ona 9×6 pikseli?
    Wszystko inne sie zgadza. Ma rozszerzenie .ico i jest gifem przerobionym na .ico.
    Mam również wklejony kod:
    <link rel=„shortcut icon” href=„favicon.ico” type=„image/x-icon” />

    Pozdrawiam i proszę o pomoc.

  36. Riddle 36 09 stycznia 2008, 14:28

    Całkiem możliwe, że z powodu rozmiaru. Zrób sobie (np. w Photoshopie) PNG i przekonwertuj na .ico za pomocą png2ico (Google).

  37. Grzegorz 37 29 kwietnia 2008, 23:54

    W Firefoksie 2 można było sobie spokojnie poustawiać własne ikonki dla zakładek, np. za pomocą dodatku Favicon Picker 2 lub ręcznie edytując bookmarks.html.

    W Firefoksie 3 dodano mechanizm aktualizacji ikonek zakładek, każdorazowo podczas odwiedzin danego adresu aktualizowana jest ikonka w zakładkach na favikonę danej strony.

    W większości przypadków ten mechanizm nie szkodzi, ale… W przypadku własnych ikon dla zakładek nadpisuje nasze ustawienia. Jest to o tyle ważne, że czasem strona nie dysponuje favikonką albo cała domena dysponuje jedną, a chcemy jakoś rozróżniać odnośniki do podstron (przechowywane bez tytułu) na pasku zakładek.

    W zasadzie od wydania Firefoksa 3 szukam sposobu na zmianę ikonek za pomocą userjs. Może ma ktoś jakiś pomysł?

  38. Wrona` 38 01 października 2009, 14:55

    no ja mam maly problem mam stronkę z domena ww.fast-start.pl i nie dziala mi favico przez domene a bezposrednio czyli na www.krsite.elb.vectranet.pl gdzie strona lezy normalnie sie pokazuje