Tema Rengi ve Uygulama Simgeleri

<meta name="theme-color" content="#1f2937"> etiketi, mobil cihazlarda tarayıcının adres çubuğu rengini ve masaüstü PWA'larında başlık çubuğu rengini belirler. Herhangi bir içeriği değiştirmeden sayfaya özenli, uygulama benzeri bir görünüm kazandırır.

Açık ve koyu modlar için ayrı renkler sağlayın: <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> ve koyu renge sahip ikinci bir etiket. Tarayıcılar, kullanıcının OS tercihine göre eşleşen rengi seçer.

Manifest dosyasının theme_color değeri, uygulama kurulu bir PWA olarak çalıştığında rengini belirler (bağımsız pencerenin başlık çubuğu). Tutarlılık için bunu sayfa içindeki tema rengi meta etiketiyle eşleştirin; tarayıcıda çalışırken veya kurulu durumdayken görsel kimlik aynı kalır.

<link rel="icon" href="/favicon.ico">, tarayıcı sekmesinde kullanılan klasik simgedir. Adında ICO geçmesine rağmen modern tarayıcılar ICO yerine PNG veya SVG'yi tercih eder. Daha net görüntüleme için <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> aracılığıyla 32x32 boyutunda bir PNG sağlayın.

Modern tarayıcılar SVG site simgelerini kabul eder: <link rel="icon" type="image/svg+xml" href="/icon.svg">. Her boyutta nettir ve dosyası küçüktür. Vektörel logolar için kullanın; SVG site simgelerini desteklemeyen tarayıcılar için bir PNG yedeği ekleyin.

iOS ana ekranda apple-touch-icon simgesini kullanır: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. 180x180 boyutunda bir PNG sağlayın. iOS, ana ekrana yükleme sırasında web manifestindeki simgeleri okumaz; apple-touch-icon bağlantısı gereklidir.

Android kurulumları simgeleri manifest dosyasındaki simgeler dizisinden okur. 192x192 (ana ekran) ve 512x512 (açılış ekranı, uygulama çekmecesi) boyutlarında PNG'ler ekleyin. Android'in simgeyi ana ekran simgesinin şekline (daire, yuvarlatılmış kare, kare) göre maskeleyebilmesi için "maskelenebilir" amaçlı bir kopya ekleyin.

Maskelenebilir simgelerin temel içeriği %80'lik merkezi güvenli alana sığmalıdır; dıştaki %20, cihazın maske şekline bağlı olarak kırpılabilir. Tasarım sırasında simgeyi farklı maske şekilleri altında önizlemek için maskable.app gibi araçları kullanın.

Windows 8/10'da sabitlenmiş kutucuk için: <meta name="msapplication-TileImage" content="/tile.png"> ve <meta name="msapplication-TileColor" content="#1f2937">. Günümüzde diğer platformlara göre önceliği daha düşük olsa da siteleri sabitleyen Windows kullanıcıları bunu hâlâ takdir eder.

Eski IE/Edge için <meta name="msapplication-config" content="/browserconfig.xml">, farklı boyutlarda kutucuk simgeleri içeren bir XML dosyasına işaret eder. Günümüzde büyük ölçüde gereksizdir; yeni siteler browserconfig.xml dosyasını herhangi bir sonuç doğurmadan kullanmayabilir.

Safari macOS sabitlenmiş sekmesi için: <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">. SVG tek renkli bir simge olmalıdır; renk, color özniteliği tarafından geçersiz kılınır. Bu özellik yalnızca macOS Safari'nin sabitlenmiş sekme işlevinde kullanılır.

Tek bir kaynaktan her simge çeşidini oluşturmak için realfavicongenerator.net adresini kullanın. Simgelerin doğru şekilde kırpıldığını ve pikselleşmediğini doğrulamak için gerçek bir iOS cihazında (Ana Ekrana Ekle) ve Android'de (uygulamayı tarayıcı menüsünden yükleyerek) sınama yapın.

Web uygulaması manifestindeki "maskelenebilir" simge amacının görevi nedir?

Tema rengi (medya sorgusu çeşitleriyle birlikte) adres çubuğunu renklendirir; manifest tema rengi ise kurulu uygulamanın başlık çubuğunu renklendirir. Simgeler; site simgelerini (SVG + PNG), apple-touch-icon simgesini (iOS, 180x180), manifest simgelerini (Android, 192 + 512 + maskelenebilir), Safari maske simgesini (tek renkli SVG) ve Windows sabitlenmiş kutucukları için kutucuk görselini kapsar. Tüm çeşitleri tek bir kaynaktan oluşturmak için realfavicongenerator.net adresini kullanın.