logo
  • Proces
  • Case studies
  • Blog
  • O nas
Napisz do nas
  1. Strona główna

  2. /

    Blog

  3. /

    Jak stworzyć oraz dodać favicon do swojej strony internetowej?

Jak stworzyć oraz dodać favicon do swojej strony internetowej?

front end

3 minuty czytania

Tomasz Kozon

2 lip 2022

Favicon to ikona, która pojawia się przed adresem strony internetowej w pasku adresu przeglądarki oraz jako ikona w zakładkach. Jest to mały, ale bardzo ważny element, który pozwala na łatwiejsze rozpoznawanie strony oraz zwiększa jej rozpoznawalność.

Spis treści

Czym jest favicon?

Jak zrobić i wstawić favicon na swoją stronę WWW?

Favicon w kodzie HTML

Favicon na stronie Wordpress

Najczęstsze problemy z dodawaniem favicon i jak je rozwiązać.

Ikony,  favicon

Powiązane oferty pracy

React.js developer (mid)

UOP:

7000 - 15000 PLN brutto

Pokaż wszystkie oferty

Powiązane case studies

Aplikacja webowa do nauki programowania

Web development, UX/UI

Prototyp aplikacji web

UX/UI, Web development

Pokaż wszystkie case study

Favicon to niewielki szczegół na stronach internetowych, o którego istnieniu nie zdaje sobie sprawy wielu właścicieli i użytkowników witryn. Niemniej jednak to on pozwala wyróżnić witrynę wśród innych oraz pokazuje profesjonalizm danej firmy. Dlatego też budując swoją markę i widoczność w sieci, nie można o nim zapomnieć.

 

Czym jest favicon?

Podczas otwierania stron internetowych można zauważyć, że posiadają one niewielką grafikę obok tytułu witryny, która pojawia się w otwartych zakładkach przeglądarek, dodanych zakładkach lub w historii przeglądarki internowanej. Jest to favicon, którego nazwa jest skrótem od angielskiego słowa favorite icon, czyli ulubionej ikony, choć można też spotkać się z innymi określeniami, takimi jak: ikona skrótu, ikonka zakładki czy ikona strony internetowej. Po raz pierwszy ikona ta pojawiła się w sieci w roku 1999 i była związana z publikacją przeglądarki Internet Explorer 5. 

Najczęściej stanowi ona logo firmy lub inną prostą grafikę, która ma za zadanie wzmocnić wizerunek marki i ułatwić jej identyfikację wśród otwartych zakładkach. Favicon jest szczególnie istotny w sytuacji, gdy użytkownik ma otwartych wiele stron jednocześnie, np. porównując ceny w sklepach online, może z łatwością przeklikiwać się pomiędzy nimi właśnie dzięki tej niewielkiej ikonce bez konieczności czytania tytułu strony czy jej adresu. Favicon przydaje się też w procesie pozycjonowania, ponieważ przeglądarka internetowa od razu pyta o obecność ikonki. Czasem przy jej braku może n a stronie może wystąpić błąd 404, który obniża jej pozycję w rankingu Google.

Strona, favicon

Jak zrobić i wstawić favicon na swoją stronę WWW?

Stworzenie ikonki strony nie jest wymagającym i czasochłonnym zadaniem. Można to zrobić w programie Photoshop lub Canva, jeśli ma się podstawową wiedzę na temat projektowania graficznego. W innym przypadku można skorzystać z usług agencji interaktywnej lub freelancera. Dobrym rozwiązaniem są także generatory ikonek, które pozwolą osobom nietechnicznym za darmowo stworzyć swoją ikonkę np. favicon.zyro.com, favicon-generator.org czy favicon.cc.

 

Tworząc favicon, należy jednak pamiętać o kilku zasadach:

  • zakładka przeglądarek wyświetla ikonkę w rozmiarze 16×16 pikseli; aby uzyskać najwyższą jakość obrazu i warto zastosować grafiki o wyższych rozdzielczościach, np. 512x512px, a w razie konieczności je zmniejszyć.
  • dopuszczalne formaty ikonki to PNG oraz .ico
  • brak zdjęć – favicon jest na tyle mały, że żadne zdjęcie nie będzie wystarczająco wyraźnie wyświetlane w zakładce przeglądarki;
  • najlepiej zamieścić sam sygnet (znak graficzny logo) bez żadnych słów;
  • zdecydowanie nie należy umieszczać w ikonce strony żadnych treści marketingowych.

 

Teraz, gdy favicon jest już poprawnie przygotowany pora wgrać go na stronę, a można to zrobić na kilka sposobów w zależności od wiedzy technicznej jej właściciela.

 

Favicon w kodzie HTML

Należy załadować ikonkę do plików strony, a następnie dodać kod HTML "link rel= shortcut icon" do pliku header.php witryny, a następnie w pliku header.php., po znaczniku </head> dodać następujący kod: <link rel=“shortcut icon” type=“image/ico” href=”/favicon.ico> lub <link rel=“shortcut icon” type=“image/png” href=”/favicon.png>.

 

Favicon na stronie Wordpress

Aby dodać favicon do strony zbudowanej w CMS WordPress, należy wykonać kolejne kroki:

  • zalogować się do panelu admina strony;
  • wgrać do biblioteki mediów ikonkę strony;
  • znaleźć zakładkę „Wygląd”, a następnie zakładkę „Dostosuj”, dzięki czemu CMS przekieruje na stronę skąd można dokonać zmian w wyglądzie witryny;
  • odnaleźć zakładkę „Tożsamość witryny”, w której można dodać tytuł strony, jej krótki opis, a także ikonkę witryny;
  • kliknąć „Wybierz ikonę witryny”, wybrać ikonkę z biblioteki mediów i kliknąć „Publikuj”.

 

Najczęstsze problemy z dodawaniem favicon i jak je rozwiązać.

Jednym z najczęstszych jest brak aktualizacji favicon po jego dodaniu. Może to być spowodowane przez przeglądarkę internetową, która przechowuje starszą wersję strony w pamięci podręcznej. W takim przypadku konieczne jest usunięcie pamięci podręcznej przeglądarki lub odświeżenie strony kilka razy, aby nowy favicon został poprawnie wyświetlony. Innym problemem może być nieprawidłowy format pliku lub jego rozmiar, co prowadzi do nieprawidłowego wyświetlania. Warto pamiętać, że favicon powinien być zapisany w formacie .ico o rozmiarze 16x16 pikseli lub 32x32 pikseli. W przypadku problemów z dodawaniem, warto dokładnie przeczytać instrukcje i wymagania danej przeglądarki internetowej oraz sprawdzić, czy jest on poprawnie zapisany i ma odpowiedni rozmiar.

 

 

Favicon to niewielka ikonka pojawiająca się w zakładach przeglądarki, która buduje tożsamość marki oraz wskazuje na jej profesjonalizm. Jej głównym zadaniem jest ułatwienie użytkownikom poruszania się po witrynach, ponieważ pozwala szybko zidentyfikować daną stronę spośród wielu otwartych stron widocznych w zakładce przeglądarki. Dodatkowo ikonka strony bierze udział w procesie pozycjonowania, dlatego warto poświecić chwilę temu tematowi oraz odpowiednio przygotować ten niewielki element graficzny. 

Powiązane artykuły

Jak uczyć się Reacta?

7 cze 2023

React to popularna biblioteka JavaScript do tworzenia interaktywnych interfejsów użytkownika. W tym artykule przedstawimy kilka sposobów, jak można nauczyć się Reacta i zacząć tworzyć swoje własne projekty.

Bartosz Wróblewski

#front-end

related-article-image-osoba używająca komputera, React

Dlaczego warto używać interceptorów w Axios

6 cze 2023

Interceptors są klasycznym narzędziem używanym w bibliotece Axios, który pozwala na kontrolę i zmianę żądań HTTP. W niniejszym artykule przedstawimy korzyści płynące z ich wykorzystania oraz przykłady sytuacji, w których możesz je użyć.

Dawid Kruk

#front-end

Zalety i wady CSS in JS

31 maj 2023

Artykuł porusza zagadnienie CSS in JS i analizuje zalety oraz wady stosowania tej technologii w projektach front-endowych.

Jan Rubel

#front-end

Wprowadzenie do React Hooks: Skróć swoje komponenty i zwiększ wydajność

29 maj 2023

Poznaj React Hooks, nowy sposób na skracanie kodu i zwiększanie wydajności komponentów. Zastąp stare metody i zdobądź cenne narzędzia, by tworzyć bardziej czytelne i efektywne aplikacje React.

Kamil Nahotko

#front-end

Wybór między Swift a React Native

29 maj 2023

Dla wielu firm i deweloperów wybór między Swift a React Native to trudna decyzja, gdyż każde z nich ma swoje zalety i wady. Jednak zrozumienie różnic między nimi oraz okoliczności, w jakich są najlepsze, może pomóc podjąć właściwą decyzję.

Sebastian Świtoń

#front-end

Jakie są różnice między atrybutami nofollow i dofollow?

4 lut 2023

W świecie SEO atrybuty nofollow i dofollow są pojęciami, z którymi każdy właściciel strony internetowej powinien się zapoznać. Oba atrybuty stanowią ważny element optymalizacji strony internetowej, wpływając na jej pozycję w wynikach wyszukiwania. Atrybut nofollow i dofollow oznaczają dwa różne podejścia do linkowania, a ich właściwe stosowanie może przynieść korzyści dla witryny internetowej w postaci zwiększenia ruchu i poprawy reputacji w oczach algorytmów wyszukiwarek.

Tomasz Kozon

#front-end

Jak wykorzystać pliki cookies do poprawy jakości działania strony internetowej?

1 lut 2023

W erze cyfrowej, gdzie użytkownicy oczekują szybkich, spersonalizowanych i bezproblemowych doświadczeń online, coraz więcej właścicieli stron internetowych poszukuje skutecznych sposobów na poprawę jakości swoich witryn. Jednym z narzędzi, które może przyczynić się do osiągnięcia tego celu, są pliki cookie.

Tomasz Kozon

#front-end

Zobacz wszystkie artykuły powiązane z #front end

Napisz do nas

hello@boringowl.io

Zadzwoń

+48 509 280 539

Znajdź nas

Newsletter
social iconsocial iconsocial iconsocial iconsocial icon
logo

Oferta

  • Web Development

  • Mobile Development

  • UI/UX Design

  • E-commerce

  • Team Extension

  • Body Leasing

Menu

  • O nas

  • Case studies

  • FAQ

  • Blog

  • Kariera

  • Kontakt

© 2023 - Boring Owl - Software House Warszawa

adobexd

adobexd

algolia

algolia

amazon-s3

amazon-s3

android

android

angular

angular

api

api

apscheduler

apscheduler

aws-amplify

aws-amplify

aws-lambda

aws-lambda

axios

axios

bash

bash

bootstrap

bootstrap

bulma

bulma

cakephp

cakephp

celery

celery

chartjs

chartjs

clojure

clojure

cloudinary

cloudinary

cms

cms

cobol

cobol

contentful

contentful

cpython

cpython

css3

css3

django

django

django-rest

django-rest

docker

docker

drupal

drupal

dynamodb

dynamodb

electron

electron

expo-io

expo-io

express-js

express-js

fakerjs

fakerjs

fastapi

fastapi

fastify

fastify

figma

figma

firebase

firebase

flask

flask

flutter

flutter

gatsbyjs

gatsbyjs

ghost-cms

ghost-cms

google-cloud

google-cloud

graphcms

graphcms

graphql

graphql

groovy

groovy

gulpjs

gulpjs

hasura

hasura

headless-cms

headless-cms

heroku

heroku

html5

html5

httpie

httpie

immutablejs

immutablejs

ios

ios

java

java

javascript

javascript

jekyll

jekyll

jekyll-admin

jekyll-admin

jenkins

jenkins

jquery

jquery

json

json

keras

keras

keystone5

keystone5

kotlin

kotlin

kubernetes

kubernetes

laravel

laravel

lodash

lodash

magento

magento

mailchimp

mailchimp

material-ui

material-ui

matlab

matlab

maven

maven

miro

miro

mockup

mockup

momentjs

momentjs

mongodb

mongodb

mysql

mysql

nestjs

nestjs

net

net

netlify

netlify

next-js

next-js

nodejs

nodejs

npm

npm

nuxtjs

nuxtjs

oracle

oracle

pandas

pandas

php

php

postgresql

postgresql

postman

postman

prestashop

prestashop

prettier

prettier

prisma

prisma

prismic

prismic

prose

prose

pwa

pwa

python

python

python-scheduler

python-scheduler

rabbitmq

rabbitmq

react-js

react-js

react-native

react-native

react-static

react-static

redis

redis

redux

redux

redux-saga

redux-saga

redux-thunk

redux-thunk

restful

restful

ruby-on-rails

ruby-on-rails

rust

rust

rxjs

rxjs

saleor

saleor

sanity

sanity

scala

scala

scikit-learn

scikit-learn

scrapy

scrapy

scrum

scrum

selenium

selenium

sentry

sentry

shodan

shodan

slack

slack

sms-api

sms-api

socket-io

socket-io

solidity

solidity

spring

spring

sql

sql

storyblok

storyblok

storybook

storybook

strapi

strapi

stripe

stripe

structured-data

structured-data

struts

struts

svelte

svelte

swagger

swagger

swift

swift

symfony

symfony

tensorflow

tensorflow

terraform

terraform

threejs

threejs

twig

twig

typescript

typescript

vercel

vercel

vue-js

vue-js

webpack

webpack

websocket

websocket

woocommerce

woocommerce

wordpress

wordpress

yarn

yarn

yii

yii

zend

zend

zeplin

zeplin

Zobacz więcej