Jak dodać favicon do strony na Framerze

Aby dodać faviconę we Framerze: otwórz Ustawienia witryny (⌘ + ,), przewiń do sekcji "Site Images" → "Favicon", prześlij plik PNG o wymiarach 64x64 pikseli, a następnie opublikuj stronę. To wszystko.

Poniżej znajdziesz szczegóły oraz rozwiązania problemów, które mogą się pojawić.

Specyfikacja favicony dla Framera

Framer wymaga określonej specyfikacji favicony:

• Rozmiar: 64 x 64 pikseli
• Format: PNG (zalecany)
• Tło: Przezroczyste

Krok 1: Otwórz ustawienia witryny

Dwa sposoby na otwarcie ustawień:

• Skrót klawiaturowy: Naciśnij ⌘ + , (Mac) lub Ctrl + , (Windows)
• Menu: Kliknij ikonę Framera → Site Settings → Open Settings

Krok 2: Znajdź sekcję Favicon

• Przewiń w dół do sekcji "Site Images"
• Znajdź obszar przesyłania "Favicon"

Krok 3: Prześlij swoją faviconę

Framer oferuje dwa sloty do przesyłania:

• Light Theme Favicon: Wyświetla się w jasnym trybie przeglądarki
• Dark Theme Favicon: Wyświetla się w ciemnym trybie przeglądarki

Prześlij ten sam obraz do obu slotów, jeśli masz tylko jedną wersję.

Krok 4: Opublikuj witrynę

• Kliknij przycisk Publish
• Favicona pojawia się tylko na opublikowanej stronie, nie w podglądzie

Obsługa trybu jasnego i ciemnego

Dlaczego warto mieć dwie wersje?

• Ciemne logo znika na ciemnych kartach przeglądarki
• Jasne logo znika na jasnych kartach przeglądarki
• Oddzielne wersje zapewniają widoczność we wszystkich trybach

Jak stworzyć warianty

1. Zacznij od swojej standardowej favicony
2. Odwróć kolory dla alternatywnej wersji
3. Zachowaj ten sam kształt i styl
4. Użyj przezroczystego tła w obu wersjach

Konfiguracja Apple Touch Icon

Od września 2024 Framer obsługuje ikony Apple Touch Icon:

• Lokalizacja: Ta sama sekcja Site Images
• Rozmiar: 180 x 180 pikseli
• Przeznaczenie: Ikona ekranu głównego na urządzeniach iOS

Rozwiązywanie problemów: Favicona się nie wyświetla

Sprawdź podstawy

• Czy opublikowałeś stronę?
• Wymuś odświeżenie: Cmd+Shift+R lub Ctrl+Shift+R
• Spróbuj w trybie incognito

Sprawdź lokalizację przesyłania

• Musi być w Site Settings, nie w ustawieniach strony
• Plik musi mieć prawidłowy format PNG

Rozwiązywanie problemów: Google pokazuje starą faviconę

Google aktualizuje favicony powoli (od kilku dni do kilku tygodni).

Jak przyspieszyć aktualizację

1. Upewnij się, że favicona jest dostępna na stronie
2. Otwórz Google Search Console
3. Użyj narzędzia Sprawdzanie adresów URL na stronie głównej
4. Poproś o indeksowanie

Rozwiązywanie problemów: Problemy z Safari

Safari agresywnie buforuje favicony.

Kroki naprawcze

1. Całkowicie wyczyść pamięć podręczną Safari
2. Usuń pamięć podręczną favicony: ~/Library/Safari/Favicon Cache/
3. Zamknij i ponownie otwórz Safari

Rozwiązywanie problemów: Wciąż widoczne logo Framera

Najczęstsze przyczyny:

• Strona nie została opublikowana po przesłaniu favicony
• Problem z pamięcią podręczną przeglądarki
• Wyświetlanie podglądu zamiast opublikowanej strony

Rozwiązanie: Opublikuj stronę i wyczyść pamięć podręczną przeglądarki.

Najlepsze praktyki

• Kopia zapasowa plików: Zachowaj oryginalne pliki favicony
• Testuj wszędzie: Sprawdź na Mac, Windows, iOS, Android
• Użyj narzędzi weryfikujących: Favicon.im waliduje Twoją konfigurację
• Dokumentuj kolory: Zapisuj dokładne kody hex dla spójności marki

FAQ

Jak dodać faviconę we Framerze?

Otwórz Ustawienia witryny za pomocą ⌘ + ,, przewiń do sekcji "Site Images", kliknij "Favicon", prześlij plik PNG o wymiarach 64x64, a następnie opublikuj stronę.

Jaki rozmiar powinna mieć favicona we Framerze?

Framer zaleca 64 x 64 pikseli w formacie PNG z przezroczystym tłem.

Dlaczego moja favicona we Framerze się nie wyświetla?

Najczęstsze przyczyny: strona nie została opublikowana, pamięć podręczna przeglądarki lub nieprawidłowa lokalizacja przesyłania. Opublikuj stronę, wymuś odświeżenie lub spróbuj w trybie incognito.

Jak długo Google potrzebuje na aktualizację favicony?

Google aktualizuje favicony powoli — zwykle od kilku dni do kilku tygodni. Poproś o ponowne indeksowanie przez Google Search Console, aby przyspieszyć proces.

Czy Framer obsługuje favicony dla trybu ciemnego?

Tak. Od września 2024 Framer pozwala przesyłać oddzielne favicony dla jasnego i ciemnego motywu w ustawieniach Site Images.

Źródła

1. How to set up a favicon in Framer - Oficjalna pomoc Framera
2. September 2024 Update: Apple Touch Icon and Favicons - Aktualizacje Framera
3. Why isn't Safari displaying the favicon? - Rozwiązywanie problemów Framera
4. Favicon.im - Narzędzie do testowania i walidacji favicony