Co to jest favicon? Jak zrobić favicon?

Webdesign Zostaw komentarz

Favicon to niewielka ikona w postaci pliku graficznego o rozmiarach 16x16px, która pojawia się:
- w polu adresowym przeglądarki internetowej przed adresem
- na karcie w przeglądarce internetowej
- w zakładkach ulubionych

Dzięki faviconie odróżnimy naszą stronę wśród standardowych icon stron i zwrócimy uwagę internautów. Favicony nie są stosowane nagminnie więc zastosuj ją póki nie zrobiła tego twoja konkurencja. Zrobieniu favicona nie poświęcimy zbyt wiele, a możemy zyskać całkiem sporo.

Jak zrobić favicon?

Są na to dwa sposoby.

1. Favicon można wykonać w dowolnym programie graficznym. Plik graficzny z ikonką powinien mieć rozszerzenie *.ico. Photoshop ani Fireworks nie obsługuje tego formatu jednak można sobie z tym poradzić. Najpierw zapisujemy plik graficzny z ikoną do formatu jpg, png lub gif. Następnie, albo skorzystamy z Gimpa, IrfanView, które mają możliwość zapisu do formatu ico, albo co łatwiej skorzystamy na przykład ze strony favicon.pl gdzie zrobimy to on-line.

2. Druga możliwość jest dla osób nie posiadających programu graficznego. Na stronie http://www.favicon.cc/ dostępny jest generator gdzie możemy samodzielnie zrobić ikonę. Możliwości moim zdaniem są bardzo duże. Możemy rysować ikonę, możemy zaimportować obrazek z którego chcemy uzyskać ikonę, a to wszystko podglądamy w okienku poniżej na żywo i widzimy jak będzie wyglądać nasz favicon w przeglądarce. Po skończeniu favicona wystarczy ściągnąć go do siebie na dysk (jako alternatywa www.degraeve.com/favicon).

W sieci znalazłem jeszcze jeden adres http://www.genfavicon.com/ pod którym można zaimportować obrazek i zrobić z niego automatycznie favicona. Prosto szybko w 3 krokach, ale bez możliwości samodzielnego rysowania.

Mam favicona i co dalej?

Jak już mamy favicona to umieszczamy go w głównym katalogu z naszą stroną www i w kodzie strony (w górnej części sekcja head) umieszczamy do niej link w postaci:

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

VN:F [1.9.22_1171]
Rating: 4.5/5 (43 votes cast)
Co to jest favicon? Jak zrobić favicon?, 4.5 out of 5 based on 43 ratings

Frazy wpisywane przez użytkowników wyszukiwarek internetowych:

  • favicon
  • jak zrobić favicon
  • favicon ico
  • co to jest favicon
  • yhs-002
  • favicon jak zrobić
  • favicona
  • favico
  • jak stworzyc favicon
  • co to favicon
30 BEZPŁATNE
SEO PORADY

Wpisz Email Aby Otrzymać
NATYCHMIASTOWY Dostęp:

Komentarze (35) do “Co to jest favicon? Jak zrobić favicon?”

  1. 4Avatars v0.3.1 Michał Says:

    Bardzo przydatny wpis:)

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  2. 4Avatars v0.3.1 Endriu Says:

    Jak już mamy favicona to umieszczamy go w głównym katalogu z naszą stroną www i w kodzie strony (w górnej części sekcja head) umieszczamy do niej link w postaci:

    z tego co zrozumiałem to tylko, ze trzeba wrzucić swoje logo na jakaś stronę i (chyba) skopiować ten adres i wkleić go do :
    Adres ikonki forum (favicon)
    Ikonka powinna mieć rozmiary 16×16 pikseli i być w formacie .ico, .gif lub .png. Link poprzedź frazą „http://”.

    a później już nie wiem nie mogę zrozumieć tego co tu napisałeś :/
    rozumiem ze się z tym namęczyłeś ale gdybyś dodał do tego zdjęcia bylo by to łatwiejsze :)

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  3. 4Avatars v0.3.1 admin Says:

    1. Umieszczasz plik z faviconem na serwerze w katalogu głównym
    2. W sekcji head umieszczasz link <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    i to tyle nie ma nic później :)

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  4. 4Avatars v0.3.1 adro Says:

    Zrobilem wszystko co trzeba, ale to i tak nie dziala. Prosze o pomoc!

    Piszcie na adres: "adriancinal@onet.eu".

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  5. 4Avatars v0.3.1 admin Says:

    Adro podaj link do strony gdzie nie działa Ci favicon i powiem Ci co nie tak zrobiłes.

    VN:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
  6. 4Avatars v0.3.1 Kate Says:

    hej, próbowałam zrobić favicona dla myforum.pl ale nie mogę. tu jest link, pomóż [url=http://49forum.myforum.pl]49FU[/url]

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  7. 4Avatars v0.3.1 admin Says:

    Kate, a w czym konkretnie mogę Ci pomóc?

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  8. 4Avatars v0.3.1 Grzegorz Says:

    Pozwolę sobie skorzystać z uprzejmości admina i prosić o pomoc w identycznej sprawie. Miałem w poprzednim hostingu działający favicon.ico (działał też, nieco zmieniony przez https). Po przeniesieniu zasobów do innego hostingu przestał działać. Mam w głównym katalogu plik favicon.ico (widoczny przez http://ipoba.pl/favicon.ico) i kod: <link rel="shortcut icon" type="image/x-icon" href="request->baseUrl; ?>favicon.ico” />. Co jest nie tak?
    Pozdrawiam

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  9. 4Avatars v0.3.1 Grzegorz Says:

    Już znalazłem rozwiązanie problemu.
    GBK

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  10. 4Avatars v0.3.1 de_mon Says:

    Do Photoshopa jest plugin, który umożliwia zapisywanie *.ico i *.cur.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  11. 4Avatars v0.3.1 admin Says:

    Też kiedyś z tym pluginem się spotkałem aczkolwiek sam to najczęściej robiłem plik png i wrzucałem do IrfanView, a on „wypluwał” mi ico.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  12. 4Avatars v0.3.1 joomlab Says:

    @Sławek, ta metoda z png i Irfanview działa, jest szybka i skuteczna, choć ludzie mało uwagi zwracają na favicony, ale dla mnie są bardzo ważne;) Są użyteczne.

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
  13. 4Avatars v0.3.1 admin Says:

    Ja az tak nie zwracam na nie uwagi, ale warto bo duzo roboty z tym nie ma, choc zrobienie ladnego favicona to tez nie lada sztuka :)

    VN:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
  14. 4Avatars v0.3.1 Kiprinski Says:

    witam, proszę o pomoc. Korzystam z przeglądarki Mozilla. Wczoraj na stronie startowej http://www.wp.pl pojawiły mi się pocięte obrazki, jakby się strona posypała. Dziś bez zmian toteż zadzwoniłem do helpdesku wp, a tam zalecono mi wyczyszczenie wszystkich ciasteczek i historii przeglądania z zakładki "narzędzia", co uczyniłem. Ku mojemu zdumieniu zamiast ikony wp pojawił się obrazek http://www.wp.pl/favicon.ico, którego nie potrafię zamienić na ikonkę wp. Dziękuję za pomoc Kiprinski

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  15. 4Avatars v0.3.1 gdaq Says:

    favicon musi znajdować się w katalogu głównym domeny.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  16. 4Avatars v0.3.1 gdaq Says:

    Strona WP wygląda poprawnie wraz z faviconem więc także podejrzewam, że kwestia cookies. Sprawdz też w innej przeglądarce.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  17. 4Avatars v0.3.1 Kamil Says:

    Nie działa mi niestety, może ktoś rzucić okiem? :( Mam wszystko tak jak jest tutaj napisane…
    http://www.morecolor.pl

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  18. 4Avatars v0.3.1 gdaq Says:

    Kamil odśwież stronę, usuń pliki tymczasowe sprawdziłem działa Ci w ie, ff, operze, chrome więc wszystko jest ok.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  19. 4Avatars v0.3.1 Bodzio Says:

    Wpis w headzie powoduje błąd po sprawdzeniu przez W3C.org – sprawa kodowania UTF-8.
    Jednak działa w chromie i IE bez dodawania wpisu,jedynie umieszczenie favicona w katalogu głównym jest wystarczające.Należy pamiętać o kilkakrotnym odświeżeniu strony,ponieważ za piewszym razem pobiera cookie z pamięci przeglądarki.Na innych przeglądarkach nie sprawdzałem.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  20. 4Avatars v0.3.1 Iwona Sobieraj Says:

    Jeśli korzystacie z Worpressa można zrobić favicon za pomoca wtyczki. Na przykład takiej: http://wordpress.org/extend/plugins/favicon-gener
    pozdrawiam
    Iwona Sobieraj

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  21. 4Avatars v0.3.1 kuba Says:

    ja mam taki sam problem zrobiłem na stronie strone http://www.vgh.pl a moja strona to radiofile.ubf.pl POMOCY!!!!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  22. 4Avatars v0.3.1 Sariel Says:

    Witajcie,
    bardzo Was proszę a przede wszystkim Pana administratora o pomoc.
    Problem tkwi oczywiście w faviconie. Mam już odpowiednią grafikę, kod i gdzie mam to teraz wrzucić? Robię stronę na serwisie bnx.pl
    17961081

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  23. 4Avatars v0.3.1 jak zrobić Says:

    Mozna też dodać zwykly png 16×16 lub 32×32 i osadzic go w meta :
    <link rel="icon" type="image/png" href="icon.png"/> :)

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  24. 4Avatars v0.3.1 Janusz Says:

    jaką ma nazwę główny katalog ?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  25. 4Avatars v0.3.1 gdaq Says:

    Janusz nie rozumiem pytania.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  26. 4Avatars v0.3.1 Aśka Says:

    wszyscy to wszyscy

    głupia jestem i zabieram sie za rzeczy z ktorymi sobie nie radze. pomożesz? http://www.hillhostel.pl/hill-hostel-poznan-home….

    próbowałam wielu sposobów, i w png i w ico i nic ;/

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  27. 4Avatars v0.3.1 Mati Says:

    Dzięki za wpis :)

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  28. 4Avatars v0.3.1 Michał Skoczyński Says:

    Nie wiedziałem jak, ale już wiem. Wpis jak widać ponadczasowy. Dziękuję

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  29. 4Avatars v0.3.1 Estera Says:

    Bardzo proszę o pomoc – nie wiem co robię źle. Zrobiłam wszystko zgodnie z opisem -i nie działa :(

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  30. 4Avatars v0.3.1 gdaq Says:

    Estera napisz do mnie na prive na email.

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  31. 4Avatars v0.3.1 Estera Says:

    Wysłałam maila na adres z google+ :)

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  32. 4Avatars v0.3.1 Fikas Says:

    Sławek ;) trafiłem z TOP1 w Google, skorzystałem i działa ;) dzięki!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  33. 4Avatars v0.3.1 腕時計 BREITLING Says:

    我々 は本当にこの季節のバケット バッグを愛しています。このクールなシルエット ボヘミアン スタイルに会釈を与えます、ヒッピー 70 年代 vibe を放ちます。これらのバッグはそのクールな置かれたバック スタイルを与えるための素晴らしい-今落下に夏を取るし、一年中このバッグを使用することができます !ファンキーなパターンまたは神経質な固体黒バケット ・ バッグは、かどうか彼らその汎用性だし、外観に、余分な火花を追加します。我々 は本当にこの週末の外観を好き- それは週の間に良いバケットに頼ることはできません意味しない

    腕時計 BREITLING

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  34. 4Avatars v0.3.1 Kingston1967 Says:

    Ja tam odpalam Paint , wklejam coś albo rysuję i zapisuję.
    Zapisuję obraz jako mapa bitowa 24-bitowa BMP i zapisuję nazwę pliku ale na końcu dopisuję .ico

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  35. 4Avatars v0.3.1 Darek Says:

    Witam :)
    Chciałem przy okazji dodać też stronkę gdzie online można tworzyć favicony http://www.xiconeditor.com/
    Po wygenerowaniu icony, wrzuceniu jej do głównego katalogu witryny i dodaniu takiego wpisu <link rel="shortcut icon" href="favicon.ico"/> w sekcji head strony – favicon zadziała na wszystkich rodzajach przeglądarek :)
    Pozdrawiam :)

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)

Zostaw komentarz