⏩ Co to jest favicon? Jak zrobić favicon?

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 https://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 https://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” />

Jeśli chciałbyś zlecić jakieś prace graficzne, projektowe napisz do mnie poprzez formularz kontaktowy z tej strony >>

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

o autorze

Sławomir Gdak

"Pomagam właścicielom małych i średnich firm w generowaniu ruchu z wyszukiwarek, aby ich biznes był stabilniejszy i bardziej dochodowy, za pomocą każdego rodzaju produktów i usług, jakie w danym momencie pozwalają mi ten cel realizować najlepiej."

37 komentarzy

napisz komentarz
  • 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ą “https://”.

    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 🙂

  • 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 🙂

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

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

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

  • 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 i kod: <link rel="shortcut icon" type="image/x-icon" href="request->baseUrl; ?>favicon.ico” />. Co jest nie tak?
    Pozdrawiam

  • 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.

  • @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.

  • 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 https://www.wp.pl/favicon.ico, którego nie potrafię zamienić na ikonkę wp. Dziękuję za pomoc Kiprinski

  • 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.

  • 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

  • wszyscy to wszyscy

    głupia jestem i zabieram sie za rzeczy z ktorymi sobie nie radze. pomożesz?

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

  • 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

  • Witam 🙂
    Chciałem przy okazji dodać też stronkę gdzie online można tworzyć favicony https://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 🙂

  • Metoda z "shortcut link" oraz plikiem favicon jest niepoprawna z punktu widzenia W3C. Konkretnie niezalecana. Sam tag w HEAD z "shortcut link" jest wykorzystywany tylko przez MSIE, a przez resztę "z rozpędu". Co ciekawe producenci przeglądarek i OS też niechętnie stosują się do zaleceń W3C, więc jest z tym mały miszmasz. Zebrałem to i opisałem wszystko na stronie https://www.creamsoft.com/blog/jak-poprawnie-dodac… gdzie zapraszam 🙂

  • Na blogerze minimalny rozmiar to chyba 32px, a teraz niby Google rekomenduje 192px, chociaż nie wiem po co takie wielkie, pewnie pod jakieś urządzania mobilne.

Skomentuj Endriu Cancel Reply

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Wyrażam zgodę na przetwarzanie danych osobowych przez firmę GDAQ.PL Multimedia Sławomir Gdak. Zgoda może zostać anulowana w dowolnym momencie. Szczegółowe informacje dotyczące danych osobowych są umieszczone na stronie polityki prywatności.

Wszelkie prawa zastrzeżone. Zabrania się wykorzystywania jakichkolwiek treści bez zgody autora.

Slawek Gdaq

Chcesz, żebym pomógł Ci zwiększyć pozycje, ruch i przychody z Twojej strony?

Sprawdź moją propozycję pozycjonowania.