O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

favikonka - krok po kroku czyli instrukcja dla początkujących

Favikonka (favicon) czyli z angielskiego ikonka ulubionych to ikona, która pojawia się na pasku adresu przeglądarki internetowej. Ikonka ma postać niewielkiego obrazka i znana jest także jako ikona strony (jest powiązana ze stroną internetową).
Źródło: Wikipedia (anglojęzyczna)

Gdzie się wyświetla favikonka:

  • przed adresem w polu adresowym przeglądarki internetowej (IE wyświetli ją dopiero gdy będzie w Ulubionych)
  • na pasku ulubionych/osobistych (mam na myśli pasek tabów, Bookmarks Toolbar, tabbed document interface – nie mam pojęcia jak to nazwać po polsku ;) może pasek zakładek?)
  • w zakładkach
  • obok tytułu na karcie (czy IE ma możliwość otwierania kilku kart w jednym oknie?)

Na stronie favicon.pl jest niewielki flash pokazujący gdzie ta ikona będzie widoczna w przeglądarce polecam wzrokowcom zajrzeć właśnie tam.

Dlaczego warto stosować favikonki:

Po pierwsze większość ludzi jest wzrokowcami – zapamiętuje to co widzi. Dzięki korzystaniu z favikonki Twoja strona jest lepiej zapamiętywana.

Po drugie większość ludzi jest wzrokowcami i ma problemy z minimalizmem. Gdy twoja strona posiada favikonkę czytelnikowi łatwiej będzie ją znaleźć w otchłani zakładek.

Po trzecie większość ludzi jest wzrokowcami i preferuje rozwiązania ułatwiające dotarcie do celu. Riddle na swojej stronie napisał, że codziennie korzysta z wielu stron i aby mieć łatwy dostęp do swoich zakładek musi oszczędnie używać paska zakładek. Wyświetla więc tylko ikony bez opisu tytułu strony.

Jak dodać favikonkę

Aby dodać favikonkę wgraj do zasobów plik o nazwie "favicon", o rozmiarze 16x16px, w formacie (z rozszerzeniem) ico, png lub jpg.
(od czerwca 2008)

Ikony zazwyczaj określa się w formacie .ico ale dla bloksa wystarczy zwykły plik graficzny a więc bez problemu można popracować nad własnym prostym znakiem. W przypadku pliku ikon (.ico) pamiętaj o ograniczonym rozmiarze pliku jaki możesz dodać do zasobów - to 250KB. Pamiętaj też, że im mniejszy plik tym szybciej sie ładuje.

Krok pierwszy - wybierasz grafikę
  • Może to wyć odpowiednio pomniejszony fragment grafiki z topu twojego bloga. Lubię to rozwiązanie bo wyraźnie nawiązuje do szablonu. Przykłady:
    szablon na bloga zadymiony perfumy szablon na bloga malarski szablon na bloga japoński szablon na bloga rysunkowy szablon na bloga siostry szablon na bloga kubki herbata szablon na bloga filiżanka kawy szablon na bloga filiżanka kawy szablon na bloga szablon na bloga szablon na bloga szablon na bloga szablon na bloga 
  • Może to być specjalnie stworzona grafika wykorzystująca jakiś prosty łatwo rozpoznawalny znak:
    34 35 36 33
  • Albo prawdziwa, dokładnie zaprojektowana ikonka. Pszeszukałam www.iconarchive.com i wybrałam sobie kilka przykładowych ikone, które podzieliłam według kolorów:
Krok drugi - zapisujesz grafikę
  • Grafika powinna być kwadratowa więc należy ją przyciąć tak aby boki były równe a następnie zmniejszyć do rozmiaru 16x16px.
  • Zapisujesz grafikę w formacie png lub jpg.
  • Jako nazwę koniecznie wpisz  „favicon” w innym przypadkuikonka nie wyświetli się

Krok trzeci - ładujesz plik do swoich zasobów i gotowe

Jeżeli chcesz wstawić favikonę na stronie innej niż bloksowy blog to polecam instrukcję jak przypisać favikonkę  napisaną przez Eskey'a na blogu experymenty informatyczne. Instrukcja jest jasna i zrozumiała więc do niej odsyłam.
PS. ikonkowy dodatek dla zaawansowanych w stopniu średnim zobacz
piątek, 09 listopada 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
2007/11/09 17:16:41
Dodałam, dzięki! :)
-
2007/11/10 16:06:38
Kate, mam trzy blogi i na każdym z nich umieściłam identyczną favikonkę. W każdym przypadku czynności były takie same. Dzisiaj zauważyłam, że tylko jeden z trzech blogów w zakładkach przelądarki ma ją przed tytułem, pozostałe blogi mają znaczek bloxa. Czy wiesz może dlaczego tak jest? Czy to znaczy, że każdy blog musi mieć inną favikonkę, a jeśli tak, to dlaczego akurat ten (Zmagania)został wyróżniony?
-
kate_mac
2007/11/10 16:33:36
jak domyślam się masz na myśli Operę - nie wiem ale np. w FF jest tak że zaraz po dodaniu favikonka się nie pojawia - zmienia się gopiero po skorzystaniu z zakładki
jeżeli w Operze jest tak samo to wejdz na pozostałe dwa blogi korzystając z ich przeglądarkowej zakładki i może wtedy się zmienią
Z całą pewnością nie musi być tak że każdy blog ma mieć inną favikonkę
-
2007/11/10 21:16:35
Skoro miało być dla początkujących to nie krępuję się zadać pytanie: jak usunąć tło w gif'ie?
-
kate_mac
2007/11/10 22:26:53
wszystko zależy od programu graficznego z którego korzystasz - np. w paincie tego nie zrobisz
generalnie jeżeli program graficzny ma możliwość usuwania tła to do tego celu służyć będzie jakiś rodzaj gumki
można też robić ładne kwadratowe favikonki np. lubię ikonkę rzepy www.rp.pl

-
kolia_things
2007/12/27 12:42:25
Dziekuję, za świetną instrukcję oraz za linki do szablonów. Jednak kobiecy mózg, łatwiej zrozumieć:)
Pozdrawiam!
-
kate_mac
2007/12/27 17:40:14
"kobiecy mózg" nie wiem czy potraktować to jako komplement czy zniewagę (szczególnie biorąc pod uwagę, że książka "płeć mózgu" metodologicznie jest zupełnie niewiarygodna)
ja u siebie staram się stosować łopatologię stosowaną ponieważ uważam że jest wiele osób które dopiero zaczynają blogowe zabawy i nie zawsze wyjaśnienia "starych blogowiczów" są dla nich zrozumiałe; po drugie to nie są moje pomysły, ja jedynie tłumaczę "z polskiego na nasze" i opisuję jak sama korzystam;

»kolia_things
ciesze się, że łatwo Ci zrozumieć moje opisy - o to wszak chodzi
pozdrawiam
-
2007/12/28 17:18:15
kate_mac, potraktuj to jako komplement. Blogi pisane zrozumiale ( jak instrukcje) świadczą,ze są dla zwyklego czytelnika - takiego jak ja:)
O to mi chodziło, jesli uraziłam I'm sorry:)
-
kate_mac
2008/01/02 12:19:56
Nie uraziłaś ;)
I cieszę się, że moje instrukcje są zrozumiałe. Ja sama wolę jak trudne do zrozumienia instrukcje tłumaczą mi osoby dla których logika nie jest niezrozumiałą abstrakcją (także logika matematyczna)
sama natomiast w instrukcjach staram się aby było jak najmniej wątpliwości "co dalej"

widzę, że wybrałaś sobie jedną z Avatar Girls Icons z Fast Icon mnie też sie ona spodobała ;)
-
ikroopka
2009/03/19 15:36:30
Wgrałam sobie favikonkę i w jednym blogu się wyświetla, a w drugim nie;(
-
szablonykatemac
2009/03/19 17:04:39
@ikroopka
jeżeli rzeczywiście oczekujesz jakiejś rady czy wniosków to powinnaś zostawić adres do obu blogów... tak byłoby dla mnie wygodniej

zarówno na blogu klimaty jak i zbliżenia favikonkę widzę więc albo coś poprawiłaś, albo cały problem ograniczył się do pamięci podręcznej przeglądarki - przeglądarki często otwierają strony częściowo 'z pamięci' tak jest prościej i szybciej dlatego czasami nie wszystko jest od razu widoczne na stronie która często odwiedzasz - bez obaw jednak mimo wszystko przeglądarki dość szybko aktualizują pamięć podręczną
-
nairth
2010/01/27 20:47:46
świetna instrukcja, tak jak i Twoje szablony. Zabrałam jeden na nowo otwartego bloga.
Bardzo dziękuję za łatwą do zrozumienia instrukcję, dzięki której udało mi się ustawić śliczną favikonkę.
Kłaniam się nisko,
Nairth
-
moniazo
2010/03/16 15:18:04
a ja sobie wgrałam i nie widać jej niestety :(
Zrobiłam sobie sama w paincie zapisałam jak kazali, i nie wyświetla się
-
kate_mac
2010/03/16 17:33:51
@moniazo
a zapytam się: kto kazał w paincie?
najpierw oczywistość: plik o nazwie favicon znajduje się w zasobach blogu?
a jako jaki typ pliku zapisałaś tą swoja grafikę? z tego co pamiętam paint automatycznie zapisuje grafiki jako mapy bitowe (bmp); w instrukcji od bloksa wyraźnie napisane jest że:
Aby dodać favikonkę wgraj do zasobów plik o nazwie "favicon", o rozmiarze 16x16px, w formacie (z rozszerzeniem) ico, png lub jpg.
czyli nie może to być dowolny typ pliku graficznego...
wydaje mi się, że paint zapisuje też pliki jako jpg więc może spróbuj wybrać taki typ pliku choć z drugiej strony nie jestem pewna jaki wizualnie efekt to będzie... wydaje mi się, że zamiana bmp na jpg w paincie kończy się kłopotami z kolorami

jest też druga możliwość: pamięć przeglądarki; czami nowe rzeczy nie od razu można zobaczyć ponieważ niektóre elementy strony przeglądarka ładuje ze swojej pamięci jeżeli strona była już odwiedzana; jak tylko przeglądarka zaktualizuje pamięć Twojej strony to brakujący element może się pojawić ale biorąc pod uwagę, że ja na Twoim blogu favikony nie widzę to nie sądzę aby przeglądarka była problemem
-
moniazo
2010/03/17 15:13:12
paint pozwala zapisać plik w formacie png i tak też zapisałam. zmniejszyłam sobie obrazek do rozmiaru 16x16 px (rozumiem, że to o piksele chodzi, bo ja ciemna jestem w tym temacie), po czym wgrałam na bloxa ale na www.trzypomidory.blox.pl, a nie na ten który jest podpięty pod mój nick :(
może zapisałam w złym miejscu, ale innego nie widziałam. Zrobiłam to w miejscu
wpisy
pliki
dodaj plik
-
kate_mac
2010/03/17 16:04:28
@moniazo
wygląda na to że wszystko zrobiłaś dobrze; jeżeli jest png to ok; 16x16 rzeczywiście oznacza piksele i miejsce wpisy- pliki- dodaj plik też jest dobre
sprawdź może czy na pewno ten plik jest w zasobach Twojego bloga... bo pod adresem trzypomidory.blox.pl/resource/favicon.png nic mi sie nie wyświetla a z tego co piszesz to taki powinien być adres Twojej favikony; jeżeli plik jest w zasobach to podaj mi jego adres tutaj, będziemy myśleć dalej...
-
moniazo
2010/03/17 17:20:56
weszłam tam gdzie zapisałam plik kliknęłam na ten plik i skopiowałam adres, który wyświetlił mi się na pasku. wklejam go poniżej
trzypomidory.blox.pl/resource/favicon.PNG
zasadniczo, nie różni się od tego co wpisałaś, więc chyba niewiele to wnosi do sprawy.
-
moniazo
2010/03/17 17:23:12
problem jest w rozszerzeniu. to według mnie głupie jest, ale jak zapisałam małymi literami to mi się też nie wyświetliło. spróbuję zmienić wielkość liter w rozszerzeniu pliku
-
moniazo
2010/03/17 17:32:15
POMOGŁO!!!
-
moniazo
2010/03/17 17:53:11
A ja bym jeszcze chciała, żeby mi się ta favikonka wyświetlała przy moich komentarzach, a ona nie chce. Czy ja za dużo wymagam, czy to zależy od czegoś jeszcze o czym nie wiem?
-
kate_mac
2010/03/17 18:45:45
@moniazo
więc tak: wielkość liter ma znaczenie; tzn. to jest ten sam plik ale przeglądarka inaczej na niego reaguje...
oj wymagająca jesteś ;) ikonka przy komentarzach zależy od czegoś jeszcze :)
masz trzy możliwości:
1. Wyróżnienie własnych komentarzy - najwygodniejsze rozwiązanie gdy jest kilku autorów bloga albo jeden autor ale posługujący się rożnymi loginami
2. Komentarze autora najbardziej automatyczne rozwiązanie i prosto wyjaśnione; jeżeli się na nie zdecydujesz to nie zapomnij przeczytać komentarzy, zwłaszcza drugiego
3. Awatary w komentarzach rozwiązanie zastosowane u mnie; troszkę inne niż dwa poprzednie; przy okazji dodaj do zasobów bloga który jest "przypisany" do Twojego loginu plik avatar.jpg a w komentarzach u mnie także pojawi się przy Twoim komentarzu Twoja ikonka :D
-
moniazo
2010/03/21 14:15:45
Dzięki, jesteś skarbnicą wiedzy. Zamiast pracować, czytam twojego bloga i usiłuję ulepszyć swój, żeby był ładny i miał różne bajery. Udało mi się wstawić plik, który ma robić rozwijane archiwum, ale nie chce się rozwijać, jest tylko wypunktowaną listą, ale coś nie doczytałam pewnie. Niemniej chciałabym zapytać o coś innego. Pod swoje notki chciałabym dodawać opcję wydruku ale kurczę nie wiem jak. czy piszesz gdzieś o tym jak to zrobić?
-
kate_mac
2010/04/29 20:40:05
@moniazo
W sprawie archiwum nie doczytałaś faktycznie. Na blogu Szymona, na końcu notki są dwa przykładowe opisy, które trzeba wstawić do arkusza. Kolory możesz sobie potem odpowiednio dostosować. Widzę, że jednak skorzystałaś z rozwiązania Eskey'a, które daje mniej możliwości ale jest od razu gotowe-do-użycia.
opcja wydruku... domyślam się, ze chodzi Ci o osobny link do jakiejś "oszczędnej" wersji bloga z konkretna notką; nie wiem czy coś takiego istnieje; dorota na mojewypieki.blox.pl używa w tym celu dodatkowego bloga pozbawionego całej szaty graficznej;
opcja wydruku każdego bloga istnieje zupełnie niezależnie, to jedna z możliwości przeglądarki; można też "uszczuplić" szablon korzystając z możliwości jakie daje medium; dla ekranu to będzie screen dla drukarki print; nigdy się tym nie interesowałam więc nie znajdziesz u mnie żadnej notki na ten temat ale to jest w zasadzie proste więc poszukaj sobie tylko informacji które doprecyzują, możesz zacząć od tego: www.kurshtml.boo.pl/css/media.html samo wybranie medium i umieszczenie informacji o tym to nie problem; więcej trudności sprawi Ci zapewne przygotowanie odpowiedniego arkusza dla wyszukiwarki
-
2011/10/18 15:53:11
dodałam faviconkę, dziękuję! z pewnością będę tu jeszcze zaglądać, pozdrawiam serdecznie!
-
2012/01/05 12:21:23
udało mi się ją w końcu dodać dzięki Twojej instrukcji, dziękuję
-
Gość: Basia, *.play-internet.pl
2016/01/13 11:05:22
Bardzo dobrze opisane, każdy może mieć w końcu favikonka :D
-
totinosa
2018/03/19 15:43:25
W tym przypadku Lepsza Fotografia wydaje się być zbawienna. Dobra instrukcja, pozdrawiam ;)
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...