{"id":1031,"date":"2026-05-30T07:14:21","date_gmt":"2026-05-30T06:14:21","guid":{"rendered":"https:\/\/strony-www.tworze.com\/?p=1031"},"modified":"2026-05-30T07:14:21","modified_gmt":"2026-05-30T06:14:21","slug":"favicon","status":"publish","type":"post","link":"https:\/\/strony-www.tworze.com\/?p=1031","title":{"rendered":"Favicon"},"content":{"rendered":"\n<p>Favicon to ta ma\u0142a ikonka powi\u0105zana z witryn\u0105, wy\u015bwietlana na kartach przegl\u0105darki, w zak\u0142adkach, w historii przegl\u0105dania, a coraz cz\u0119\u015bciej tak\u017ce w wynikach wyszukiwania. Mam j\u0105 przy mojej stronie, ale przy te\u015bcie strony wysz\u0142o, \u017ce co\u015b mam z ni\u0105 nie tak. C\u00f3\u017c w HTML co\u015b si\u0119 czasem zmienia, m\u00f3j stary spos\u00f3b u\u017cywania si\u0119 zdezaktualizowa\u0142. Fajnie jest doda\u0107 ikonk\u0119 bo to pozwala pokaza\u0107 swoj\u0105 mark\u0119, pozwala u\u017cytkownikom skojarzy\u0107 stron\u0119 z Tob\u0105. Powiem wi\u0119c kr\u00f3ciutko jak to zrobi\u0107.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/strony-www.tworze.com\/domains\/tworze.ayz.pl\/strony-www\/wp-content\/uploads\/2026\/05\/JdiKHXCK94ImO7USppsy-0-K4Ewh.jpg\" alt=\"\" class=\"wp-image-1032\" style=\"width:363px;height:auto\" srcset=\"https:\/\/strony-www.tworze.com\/domains\/tworze.ayz.pl\/strony-www\/wp-content\/uploads\/2026\/05\/JdiKHXCK94ImO7USppsy-0-K4Ewh.jpg 1024w, https:\/\/strony-www.tworze.com\/domains\/tworze.ayz.pl\/strony-www\/wp-content\/uploads\/2026\/05\/JdiKHXCK94ImO7USppsy-0-K4Ewh-300x300.jpg 300w, https:\/\/strony-www.tworze.com\/domains\/tworze.ayz.pl\/strony-www\/wp-content\/uploads\/2026\/05\/JdiKHXCK94ImO7USppsy-0-K4Ewh-150x150.jpg 150w, https:\/\/strony-www.tworze.com\/domains\/tworze.ayz.pl\/strony-www\/wp-content\/uploads\/2026\/05\/JdiKHXCK94ImO7USppsy-0-K4Ewh-768x768.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Przygotuj obrazek w formacie kwadratu koniecznie! Przygotuj go w formacie wektorowym i oto dlaczego. Cho\u0107 to na ekranie ma by\u0107 wy\u015bwietlane wi\u0119c pikselowo to poniewa\u017c ro\u017cne przegl\u0105darki potrzebuj\u0105 r\u00f3\u017cnych wymiar\u00f3w, a czytaj\u0105 wektorowy format SVG, to najlepiej skorzysta\u0107 z tego formatu i wtedy same go przeskaluj\u0105. Darmowy program do grafiki wektorowej Inkscape generuje dobre pliki SVG, moim zdaniem lepsze do przegl\u0105darki ni\u017c du\u017ce, p\u0142atne programy graficzne.<\/p>\n\n\n\n<p>To mamy nasz plik favicon.svg, ale to nie wszystko. Dobrze teraz go zapisa\u0107 w formacie ICO, w formacie kt\u00f3ry pierwotnie wymy\u015blono dla ikonek i mo\u017ce by\u0107 dalej \u017c\u0105dany przez starsze przegl\u0105darki. Ta ikonka powinna mie\u0107 wymiary 48 x 48 pikseli i nazywa\u0107 si\u0119 favicon.ico. S\u0105 jeszcze specyficzni u\u017cytkownicy komputer\u00f3w od Apple, dla nich potrzebny jeszcze jeden plik apple-touch-icon.png czyli w formacie PNG i w wielko\u015bci 180 x 180 pikseli<\/p>\n\n\n\n<p>Gdy z grafik\u0105 zrobione, wrzucamy to do katalogu g\u0142\u00f3wnego. Mo\u017cna do  jakiego\u015b katalogu na. \/images, ale niekiedy przegl\u0105darki same szukaj\u0105 w katalogu g\u0142\u00f3wnym pliku favicon, wi\u0119c u\u0142atwmy im to. Teraz w kodzie strony w sekcji HEAD dodajemy taki kod:<\/p>\n\n\n\n<p><code>&lt;link rel=\"icon\" href=\"\/favicon.ico\" sizes=\"any\"> &lt;link rel=\"icon\" href=\"\/favicon.svg\" type=\"image\/svg+xml\"> &lt;link rel=\"apple-touch-icon\" href=\"\/apple-touch-icon.png\"><\/code><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Favicon to ta ma\u0142a ikonka powi\u0105zana z witryn\u0105, wy\u015bwietlana na kartach przegl\u0105darki, w zak\u0142adkach, w historii przegl\u0105dania, a coraz cz\u0119\u015bciej tak\u017ce w wynikach wyszukiwania. Mam&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1031","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/strony-www.tworze.com\/index.php?rest_route=\/wp\/v2\/posts\/1031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/strony-www.tworze.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/strony-www.tworze.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/strony-www.tworze.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/strony-www.tworze.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1031"}],"version-history":[{"count":1,"href":"https:\/\/strony-www.tworze.com\/index.php?rest_route=\/wp\/v2\/posts\/1031\/revisions"}],"predecessor-version":[{"id":1033,"href":"https:\/\/strony-www.tworze.com\/index.php?rest_route=\/wp\/v2\/posts\/1031\/revisions\/1033"}],"wp:attachment":[{"href":"https:\/\/strony-www.tworze.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/strony-www.tworze.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/strony-www.tworze.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}