2020 itibariyle hangi favicon boyutları, dosya formatları ve meta / link etiketleri kullanılmalıdır? Buna elma simgesi, pencereler, android ve insanların bugün kullandığı diğer cihazlar dahildir.

Opera kullanıyorum ve svg formatını desteklediğini görebiliyorum. Günümüzde svg kullanmak en iyi çözüm mü? "Bir dosya hepsine uyar" seçeneği var mı?

Birçok web sitesine göz atıyorum ve farklı "favicon oluşturucuları" kontrol ettim. Hepsi yaşında ve çoğunlukla png dosyalarıyla çalışıyor.

Örneğin: ico ve svg için hangi kod kullanılmalıdır?

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

veya ico daha fazla boyut içeriyorsa boyutlar belirtilmeli mi? Tek bir iyi cevap bulamadım.

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

Lütfen hangi faviconların kullanılması gerektiğinin boyutlarını, dosya biçimlerini ve meta / bağlantı etiketlerini sağlayın.

Feragatname: Güncel olmasını beklediğim RealFaviconGenerator'ın yazarıyım (çoğunlukla aşağıya bakın). Bu cevap RFG'nin ürettiği ile eşleşirse şaşırmayın.

Herkese uyan tek beden efsanesi

"Herkese uyan tek boyut" simgesi yoktur. Tek bir SVG simgesi oluşturamaz ve her yerde çalışmasını bekleyemezsiniz.

Teknik açıdan bakıldığında, tek bir SVG simgesi iyi bir şey olacaktır. Ancak UI ve UX açısından bakıldığında, bu arzu edilen bir sonuç değildir. İOS ve Android'i karşılaştırın. İOS'ta, tüm ana ekran simgeleri yuvarlatılmış köşeli karelerdir ( iOS, Dokunmatik simgelerin saydam bölgelerini siyahla doldurur ). Android'de ana ekran simgeleri genellikle kare olmayan şekiller ve şeffaflık kullanır (Google uygulama simgeleri dahil). Tek bir dokunuş simgesi gönderin ve Android Chrome bunu kullanacaktır. Ancak Android simge kurallarına uyamayacaksınız , özel bir simge olabilirken, .

Bu yüzden kasıtlı olarak tek bir simge kullanmaktan kaçınmanızı tavsiye ederim. Bunun yerine, mümkün olduğunda her platformu ayrı ayrı hedefleyin (bu her zaman böyle değildir).

Simgeler, platform başına platform

iOS Safari

iOS Safari bir dokunma simgesi bekliyor . Bugün itibariyle bu, 180x180 PNG boyutunda bir resimdir. Bu resim saydamlık kullanmamalıdır ve ana ekrana eklendiğinde köşeleri otomatik olarak yuvarlanır. Bildirildi:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

Yıllar geçtikçe, bu simge birçok tarayıcı için "varsayılan yüksek çözünürlüklü simge" haline geldi. Böylece, yer imine eklerken vb. Başka bir yerde bulacaksınız.

Android Chrome

Android Chrome, Web Uygulaması Manifest'e dayanır . Bu manifesto Android Chrome'a ​​adanmamış olsa da, şu anda ana destekçisidir. Bu nedenle şu anda Web App Manifest'teki simgelerin Android Chrome için olduğunu düşünmek hala oldukça güvenlidir.

Adından da anlaşılacağı gibi, Web App Manifest web uygulamaları içindir. Ancak herhangi bir web sitesi bunu bazı simgelere başvurmanın bir yolu olarak kullanabilir.

Android, saydamlığa izin verilen ve teşvik edilen bir 192x192 PNG simgesi bekliyor.

Manifest şu şekilde beyan edilir:

<link rel="manifest" href="/icons/site.webmanifest">

Edge ve IE 12

Microsoft , Metro kullanıcı arayüzüne uyan çeşitli simgeleri listeleyen bir XML belgesi olan browserconfig'i tanıttı .

Dosya ve arka plan rengi şu şekilde bildirilir:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

Klasik masaüstü tarayıcılar

Windows / macOS Chrome, Windows / macOS Firefox, Safari, IE ... Bu, işler biraz daha bulanıktı. Tarihsel olarak favicon.ico, hala desteklenen tek bir dosya vardı . Bununla birlikte, en yeni tarayıcılar daha hafif olan PNG simgelerini seçmektedir. Ayrıca bazı tarayıcılar, ICO dosyasında uygun simgeyi seçemezler (bu format, bir simgenin birkaç sürümünü yerleştirebilir), bu da düşük çözünürlüklü bir simgenin yanlış kullanılmasına neden olur.

Eskiyi düşürmek cazip gelebilir favicon.ico tamamen . RFG'de bu sıçramayı yapmak istesem de eski tarayıcılar üzerindeki etkisini değerlendirmek için gerekli testleri yapmadım.

Bu nedenle, favicon.ico16x16, 32x32 ve 48x48 simgelerini katıştırarak bugün hala önerdiğim combo :

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

Diğer tarayıcılar

Diğer tarayıcıların özel simgeleri olabilir. Örneğin Coast by Opera, 228x228'lik bir simge arıyor . Bu tarayıcılara odaklanma ihtiyacı açık değil. "Kendi" simgelerini bulamadıklarında genellikle dokunmatik simgeyi veya diğer simgeleri kullanırlar.

Sonuç

Başlangıçta duyurulduğu gibi, bu tam olarak RealFaviconGenerator'ın yarattığı şeydir .

Ayrıca favicon ile birlikte OG etiketleri, Twitter kartları veya MS uygulaması gibi bazı diğer etiketlerin eklenmesi gerektiğini belirtmekte fayda var. Hepsi aynı amaca hizmet eder - markanızın görsel kimliği ve ayrıca dahil edilmelidir.

Twitter kartı BURADA bulunabilir

Aşağıdaki etiketleri ekliyorum

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

Birçok kullanıcının 1300px'e 650px ve jpg / png formatlarında resimler yaptığını buldum.

Tüm etiketleri ekledikten sonra BURADA doğrulanmalıdır

Facebook OG'nin daha fazla seçeneği vardır, ancak genel olarak aşağıdaki gibidir:

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

Facebook, görüntünün belirli bir oranını önerir ve dosya boyutu 8 Mb ile sınırlıdır. Benzer görüntüleri twitter kartıyla saklamak için 1240px'e 650px ve jpg / png formatını öneririm. Facebook ve twitter svg'yi kabul etmiyor ...

Bazı global markaların bu etiketi web sitelerinde kullandığını buldum. Biri 150x150 piksel boyutlarına ve png formatına sahipti. Bu görsel, tarayıcılar tarafından arama sonuçlarında görüntülenmek üzere kullanılabilir.

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

Real Favicon Generator ayrıca Microsoft faviconlarını da kapsar. MS uygulamasının sayfanın yayını optimize etmesi için birçok başka meta etiket vardır ve resim gibi diğer bilgiler görüntülenir. Bu konu da okumaya değer.

Umarım bu birileri için yararlıdır ve web sitenizi markalaştırma konusunu genişletir.