Bir sitenin kendi sayfaları dışında nasıl göründüğünü iki küçük görsel grubu belirler: tarayıcı sekmesinde, yer imlerinde, Google sonuçlarında ve telefonun ana ekranında görünen favicon (site simgesi) seti ile bağlantı Facebook, X, LinkedIn, WhatsApp ya da Slack'te paylaşıldığında beliren paylaşım görseli. İkisini de sizin denetlemediğiniz botlar okur, ikisi de uzun süre önbellekte kalır ve ikisi de bozulduğunda ses çıkarmaz: sekmede gri bir dünya simgesi ya da resimsiz bir bağlantı kartıyla karşılaşırsınız. Bu rehberde AIOR ekibi olarak kullandığımız dosya setini, ölçüleri ve HTML etiketlerini, ayrıca önizlemeleri nasıl test edeceğinizi ve her platformun önbelleğini nasıl tazeleyeceğinizi bir araya getirdik. Ölçüleri ve sınırları Ekim 2026'da platformların kendi belgelerinden kontrol ettik; belgelenmemiş noktaları ayrıca belirttik.
Kısa cevap: hangi dosya, hangi ölçü?
| Dosya | Ölçü | Nerede kullanılır |
|---|---|---|
| favicon.ico (site kökünde) | Tek dosyada 16x16, 32x32 ve 48x48 katmanlar | Tarayıcılar, eski istemciler ve /favicon.ico adresini doğrudan isteyen her araç |
| icon.svg | Vektör, kare viewBox | Güncel tarayıcı sekmeleri; koyu temada renk değiştirebilir |
| favicon-96x96.png | 96x96 | Google arama sonuçları (Google 48x48 pikselden büyük simge öneriyor) |
| apple-touch-icon.png | 180x180, opak zemin | iPhone ve iPad ana ekranı; Google da okur |
| icon-192.png, icon-512.png | 192x192 ve 512x512 | Web uygulaması manifesti: Android ana ekranı, yüklenmiş web uygulamaları |
| icon-maskable-512.png | 512x512, logo ortadaki güvenli alanda | Android'in daire, yuvarlatılmış kare gibi simge biçimleri |
| Paylaşım görseli (og:image) | 1200x630 (1,91:1), JPEG veya PNG, 600 KB altında | Facebook, LinkedIn, X, WhatsApp, Telegram, Slack, Discord |
Favicon seti: dosya dosya
favicon.ico site kökünde durmalı: https://example.com/favicon.ico. Sayfada simge bağlantısı yoksa tarayıcılar bu adresi kendiliğinden ister; RSS okuyucular ve pek çok başka araç da aynısını yapar. Dosyaya 16, 32 ve 48 piksellik katmanları koyun; dosya yine de küçük kalır.icon.svg, Chrome, Edge ve Firefox'un sekmede gösterdiği simgedir; Safari ise SVG favicon'ları 26. sürümden beri destekliyor. Her piksel yoğunluğunda keskin kalır ve koyu tema için ayrı renkler taşıyabilir. İki şartı var: sunucu dosyayı image/svg+xml türüyle göndermeli ve dosya dışarıdaki hiçbir şeye bağımlı olmamalı. Tarayıcılar favicon olarak kullanılan SVG'yi başka dosya yükleyemeyen düz bir görsel gibi işler; bu yüzden metinleri dış hatlara (outline, path) dönüştürün, SVG'nin içinden web fontu ya da harici bir bitmap görsel çağırmayın.
En az 96x96 piksellik bir PNG dosyasını Google için ekliyoruz. Google'ın favicon yönergeleri (son güncelleme Ağustos 2026) en az 8x8 piksel boyutunda kare bir görsel istiyor, 48x48 pikselden büyük bir simge öneriyor ve desteklenen biçimleri BMP, GIF, ICO, PNG, JPEG, PPM ve TIFF olarak sayıyor. SVG bu listede yok; yalnızca SVG simgesi sunan bir site arama sonuçlarında simgesiz kalabilir.
apple-touch-icon.png dosyası için 180x180 piksel, güncel iPhone ve iPad modellerinin hepsine yeter; daha küçük boyut gereken yerde iOS dosyayı kendisi küçültür. Zemini dolu (opak) yapın ve kenarlarda pay bırakın: 180 piksellik tuvalde yaklaşık 140 piksellik bir logo iyi sonuç verir. iOS köşeleri kendi maskesiyle yuvarlar; saydam alanlar ise beklediğiniz gibi görünmez. Sayfada bağlantı etiketi yoksa iOS kök dizinde /apple-touch-icon.png dosyasını arar; dosyanın en doğru yeri zaten orasıdır.
Manifest simgeleri: 192x192 ve 512x512 PNG, bunlara ek olarak ayrı bir 512x512 maskelenebilir (maskable) sürüm. Android bu simgeyi kendi biçimlerine göre kırpar; bu yüzden maskable simge, normal simgede olmayan bir iç boşluğa ihtiyaç duyar. Dosya bu boşlukla tasarlanmadıysa maskable girişini normal simgeyle aynı dosyaya bağlamayın.
Artık gerek olmayanlar: browserconfig.xml ve msapplication-* kutucuk (tile) etiketleri (Next.js belgeleri, Chromium tabanlı Edge'in bunları artık desteklemediğini belirtiyor), Safari'nin sabitlenmiş sekmeleri için tek renkli mask-icon (güncel Safari orada normal favicon'u kullanıyor), apple-touch-icon-precomposed ve 57, 72, 114, 144 piksellik eski dokunmatik simge listesi. Sitenizde zaten duruyorlarsa zararları yok, ama yeni bir projede hiçbirine ihtiyaç yok.
HTML etiketleri ve manifest dosyası
Aşağıdaki satırları her sayfanın head bölümüne bu sırayla ekleyin:
Code:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">ICO satırına sizes="any" yazmayın. Evil Martians'ın çok kopyalanan favicon rehberi bu değeri 2021'de ICO satırına eklemiş, 2023'te ise Chrome hem ICO'yu hem SVG'yi indirdiği için yerine 32x32 yazmış. ICO'ya somut bir boyut verin: 16/32/48 katmanlı bir dosya için RealFaviconGenerator'ın kendi sitesinde kullandığı 48x48 uygundur. "Ölçeklenebilir" anlamına gelen sizes="any" ise SVG satırında kalsın. theme-color konusunda HTML standardı net: tarayıcı, media koşulu uyan ilk etiketi kullanır. media niteliği olmayan bir etiketi bu ikilinin üstüne koyarsanız ikisini de sessizce devre dışı bırakır. Destek de tarayıcıdan tarayıcıya değişir: Android'deki Chrome ve yüklenmiş web uygulamaları bu rengi kullanır, Firefox yok sayar. Safari rengi 15. sürümden itibaren kullanıyordu; MDN uyumluluk verilerine göre Safari 26'dan beri yalnızca yüklenmiş web uygulamalarında kullanıyor.
Manifest dosyası:
Code:
{
"name": "Örnek Stüdyo",
"short_name": "Örnek",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0f172a",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}Dosyayı application/manifest+json türüyle sunun; W3C belirtimi bu türü öneriyor, ama herhangi bir JSON türünü de kabul ediyor. nginx ile gelen MIME listesi de, Apache httpd kaynak kodundaki liste de .svg ve .ico uzantılarını tanıyor ama .webmanifest uzantısını tanımıyor (Ekim 2026'da kontrol ettik). Bazı Linux dağıtımları bu eşlemeyi kendileri ekliyor; curl -sI ile kontrol edin, eksikse kendiniz ekleyin:
Code:
# nginx, server bloğunun içinde
location = /manifest.webmanifest {
default_type application/manifest+json;
}
# Apache, .htaccess ya da vhost dosyasında
AddType application/manifest+json .webmanifestİki kural daha var. Birincisi, Googlebot ana sayfanızı, Googlebot-Image da favicon dosyasını tarayabilmeli; robots.txt dosyanızın /favicon.ico adresini ya da simgelerin durduğu klasörü engellemediğinden emin olun. İkincisi, Google favicon adresinin sabit kalmasını istiyor. Tarayıcılar simgeleri inatla önbellekte tuttuğu için her yayına alma (deploy) işleminde adrese ?v=123 eklemek cazip gelir. Bunun yerine adresi yalnızca simgenin kendisi değiştiğinde değiştirin (elle verilen bir ?v=2 ya da dosya içeriğinden üretilen bir özet değeri, yani hash) ve /favicon.ico adresine hiç sürüm eklemeyin.
16 pikselde okunan bir simge tasarlamak
16x16 pikselde ayrıntılı bir logo lekeye dönüşür. Yazılı logo (wordmark) yerine logonun simge kısmını kullanın, iki üç dolu şekille yetinin, ince çizgileri ve sloganı çıkarın; sonucu hem açık hem koyu sekme çubuğunda, gerçek boyutunda kontrol edin. Simgeniz koyu renkliyse SVG, kullanıcı koyu temayı tercih ettiğinde renklerini değiştirebilir:
Code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
.bg { fill: #0f172a; }
.fg { fill: #ffffff; }
@media (prefers-color-scheme: dark) {
.bg { fill: #e2e8f0; }
.fg { fill: #0f172a; }
}
</style>
<rect class="bg" width="32" height="32" rx="7"/>
<circle class="fg" cx="16" cy="16" r="7"/>
</svg>Maskelenebilir simgelerin güvenli alanını W3C manifest belirtimi tanımlıyor: merkezde duran ve yarıçapı simge boyutunun yüzde 40'ı olan bir daire. 512 piksellik bir simgede bu dairenin çapı 409,6 pikseldir; kare bir logo, genişliği yaklaşık 290 pikseli (409,6 / √2 ≈ 289,6) aşmadığı sürece dairenin içinde kalır. Tuvalin tamamını zemin rengiyle doldurun, saydam alan bırakmayın. Chrome DevTools'ta Application > Manifest altındaki "Show only the minimum safe area for maskable icons" seçeneği ve maskable.app sitesi hızlı bir önizleme sunar.
Aşağıdaki Python betiği (Pillow kütüphanesi) saydam zeminli, kare tek bir logo-512.png dosyasından bütün raster dosyaları üretir. Betiği Pillow 11 ile çalıştırarak denedik:
Python:
from PIL import Image
logo = Image.open("logo-512.png").convert("RGBA") # kare, en az 512x512
BG = (15, 23, 42, 255) # marka zemin rengi, #0f172a
# 16, 32 ve 48 piksellik katmanlarla favicon.ico
logo.save("favicon.ico", sizes=[(16, 16), (32, 32), (48, 48)])
# düz PNG simgeler; burada saydamlık sorun değil
for size, name in [(96, "favicon-96x96.png"), (192, "icon-192.png"), (512, "icon-512.png")]:
logo.resize((size, size), Image.LANCZOS).save(name, optimize=True)
def on_background(size, logo_size, path):
canvas = Image.new("RGBA", (size, size), BG)
mark = logo.resize((logo_size, logo_size), Image.LANCZOS)
offset = (size - logo_size) // 2
canvas.alpha_composite(mark, (offset, offset))
canvas.convert("RGB").save(path, optimize=True)
on_background(180, 140, "apple-touch-icon.png") # opak, kenarlarda yaklaşık 20 piksel pay
on_background(512, 288, "icon-maskable-512.png") # kenara kadar dolu kare logo bile güvenli alanda kalırOpen Graph ve X kartı etiketleri
Bağlantı önizlemesi, sayfanın HTML kodundaki meta etiketlerinden oluşur. Open Graph protokolü bunlardan dördünü zorunlu sayar (og:title, og:type, og:image ve og:url) ve og:image kullanan bir sayfanın og:image:alt da vermesi gerektiğini belirtir. Bir makale için eksiksiz bir set şöyle görünür:
Code:
<meta property="og:type" content="article">
<meta property="og:site_name" content="Örnek Stüdyo">
<meta property="og:title" content="Favicon ve paylaşım görseli kontrol listesi">
<meta property="og:description" content="Bir sitenin ihtiyaç duyduğu simge dosyaları, paylaşım görseli ölçüleri ve test yöntemleri.">
<meta property="og:url" content="https://example.com/blog/favicon-kontrol-listesi/">
<meta property="og:locale" content="tr_TR">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:image" content="https://example.com/og/favicon-kontrol-listesi.jpg?v=2">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="1200x630 paylaşım görseli şablonunun yanında favicon ölçüleri">
<meta name="twitter:card" content="summary_large_image">Platformlar bu etiketleri şöyle okur:
- X önce twitter:title, twitter:description, twitter:image ve twitter:image:alt etiketlerine bakar, bulamazsa og: karşılıklarını kullanır; farklı bir metin istemiyorsanız bunları eklemenize gerek yok. Büyük görselli kartın ise Open Graph karşılığı yok: X'in belgesine göre twitter:card etiketi yoksa og:type, og:title ve og:description etiketlerinden ancak küçük "summary" kartı oluşturulabilir. Büyük kart için twitter:card değerini summary_large_image yapın.
- LinkedIn yardım sayfası ihtiyaç duyduğu etiketleri og:title, og:image, og:description ve og:url olarak sayıyor.
- WhatsApp og:title, og:description ve og:url etiketlerinin head içinde ve dolu olmasını istiyor; head bölümü de HTML kodunun ilk 300 KB'ı içinde yer almalı. Meta'nın botunda sınır daha geniş: Open Graph etiketlerinin sayfanın ilk 1 MB'ı içinde yer alması gerekiyor, sonrası kesiliyor.
- Meta, og:image:width ve og:image:height etiketlerini öneriyor; böylece bot dosyayı indirip işlemeden de görsel ilk paylaşımda gösterilebiliyor.
- Slack oEmbed, Twitter Card ve Open Graph etiketlerini okur; robots.txt kurallarına uymadığını da belgeliyor.
- Aynı etiket sayfada iki kez yer alıyorsa (örneğin hem tema hem SEO eklentisi og:image yazıyorsa) Open Graph ilk etiketi esas alır; X ise birden fazla twitter:card olduğunda sonuncusunun geçerli olduğunu belgeliyor. Her etiketi yalnızca bir kez yazdırın.
- facebookexternalhit gibi botlar JavaScript çalıştırmaz. Tek sayfalı bir uygulamanın (SPA) tarayıcıda sonradan eklediği etiketleri göremezler; etiketleri sunucu tarafında üretin.
Platformların kendi rehberlerinden birkaç içerik kuralı da ekleyelim. Marka adını og:title içine yazmayın (Meta da WhatsApp da markasız başlık istiyor), onu og:site_name etiketine bırakın. og:description metninin ilk 80 karakteri kendi başına anlam taşısın; WhatsApp bir iki satır gösteriyor, X ise açıklamayı 200 karakterle sınırlıyor. Her sayfaya kendi görselini verin; X, site logosu yerine sayfaya özgü bir görsel istiyor. og:image adresi her zaman https:// ile başlayan mutlak bir adres olsun: WhatsApp mutlak adresi açıkça şart koşuyor, göreli yollar başka platformlarda da güvenilir biçimde çözülmüyor. Türkçe ve İngilizce yayın yapan sitelerde og:locale ile og:locale:alternate etiketlerini (tr_TR ve en_US) birlikte kullanın. WhatsApp, alıcının seçtiği dili Accept-Language başlığında gönderiyor; dili bu başlığa göre seçen bir site önizlemeyi alıcının dilinde üretebilir.
Platformlara göre paylaşım görseli ölçüleri
| Platform | Belgede yazanlar | Pratik notlar |
|---|---|---|
| Facebook (Meta) | Yüksek çözünürlüklü ekranlar için en az 1200x630; büyük yerleşim için en az 600x315; mutlak alt sınır 200x200; en fazla 8 MB; 1,91:1 oranına yakın kalın | Görseller adrese göre önbelleğe alınır; yeni görsel yeni adres ister |
| X | summary_large_image: 2:1, en az 300x157, en fazla 4096x4096, 5 MB altında; JPG, PNG, WEBP veya GIF (yalnızca ilk kare); SVG desteklenmiyor; alternatif metin en fazla 420 karakter | Küçük summary kartı bunun yerine kare bir kırpma gösterir |
| En az 1200x627, oran 1,91:1, en fazla 5 MB; 401 pikselden dar görseller küçük resim olarak görünür | 1200x630 olduğu gibi uyar | |
| Mutlak adres, 600 KB altı, en az 300 piksel genişlik, en/boy oranı en fazla 4:1; önizleme en iyi çaba esasıyla gösterilir, garanti yok | Dosya boyutunda en sıkı sınır bu | |
| Telegram | Kamuya açık bir ölçü belgesi yok | og: etiketlerini okur; aynı 1200x630 ana görseli kullanın |
| Slack, Discord | Slack oEmbed, Twitter Card ve Open Graph okur, boyut sınırı yayımlamıyor; Discord'un açık bir belgesi yok | Discord'un summary_large_image ile büyük görsel gösterdiği ve kart kenarının rengini theme-color etiketinden aldığı sıkça bildiriliyor |
| Google Discover | En az 1200 piksel genişlik, toplamda 300.000 pikselden fazla, tercihen 16:9, max-image-preview:large ayarı; görseli og:image ya da schema.org işaretlemesiyle önerebilirsiniz | Site logosu gibi genel görseller ve yazı ağırlıklı görseller kullanmayın |
Tek bir 1200x630 ana görsel, kırpmalar hesaba katılarak tasarlanırsa bu platformların hepsini karşılar. 2:1 kırpma üstten ve alttan 15'er piksel, 16:9 kırpma iki yandan 40'ar piksel keser; kare küçük resim ise yalnızca ortadaki 630x630 alanı bırakır. Yazıları ortalanmış, yaklaşık 1080x510 piksellik bir alanın içinde tutun; kare küçük resimler sizin için önemliyse logoyu ya da ana görseli ortadaki 630 piksellik bölgeye yerleştirin.
Biçim seçimi: fotoğraflar ve renk geçişli zeminler için JPEG, JPEG sıkıştırma izlerinin göze batacağı düz renkli grafikler için PNG. X WebP kabul ediyor, ama Meta'nın paylaşım rehberi og:image türü olarak yalnızca JPEG, GIF ve PNG sayıyor; bu yüzden og:image görselini JPEG ya da PNG olarak hazırlayın, SVG'yi hiç kullanmayın. En sıkı dosya sınırı WhatsApp'ın 600 KB'lık sınırı olduğu için ana görseli bunun altında tutmak, dosya boyutu sorununu bütün platformlar için birden çözer.
Görselleri hazırlamak
Figma'da 1200x630 bir çerçeve (frame) açın; başlık, alt başlık ve logo için yer tutucuları olan bir bileşen (component), sonraki yazılarda ciddi zaman kazandırır. Çerçeveyi 1x olarak dışa aktarın; 2x aktarırsanız aşağıdaki komut görseli 1200 piksel genişliğe indirir. Canva'da özel boyut (Custom size) seçeneğiyle 1200 x 630 piksel girin. Ardından sıkıştırın: tarayıcıda Squoosh iş görür, Mac'te ise yerleşik sips aracı ek kurulum gerektirmez:
Bash:
sips --resampleWidth 1200 -s format jpeg -s formatOptions 82 og-master.png --out og-home.jpgBlog, e-ticaret ve forum sitelerinde her görseli tek tek çizmek yerine şablondan üretin. Başlığı sunucuda sabit bir zeminin üzerine yazdırın (Next.js'te bunun için next/og var; diğer altyapılarda arayüzsüz çalışan bir headless tarayıcı ya da bir görsel servisi kullanılır), sonucu saklayın ve dosya adına bir sürüm ya da hash ekleyin ki başlık değiştiğinde adres de değişsin. İki tuzak var: üretim hızlı olmalı, çünkü botlar uzun süre beklemez; yüklediğiniz font da Türkçe karakterleri kapsamalı. Google Fonts ç, ö, ü ve ı harflerini "latin" alt kümesine, ğ, Ğ, ş, Ş ve İ harflerini ise yalnızca "latin-ext" alt kümesine koyuyor. Sadece "latin" yüklerseniz "Ağ Güvenliği" gibi bir başlıkta ğ harfleri eksik ya da başka bir yazı tipiyle çıkar. Google Discover trafiği sizin için önemliyse bir noktaya daha dikkat edin: Google, og:image için yazı ağırlıklı görsellerden kaçınmayı öneriyor; şablonda başlığı kısa tutun ya da görseli fotoğraf veya illüstrasyon ağırlıklı tasarlayın.
Test etmek ve önbelleği tazelemek
İşe, botun gerçekte ne aldığını görerek başlayın:
Bash:
# Facebook botu gibi istek atıp ham HTML'deki meta etiketlerini listeleyin
curl -s -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" \
https://example.com/blog/favicon-kontrol-listesi/ | grep -Eio '<meta[^>]+(og|twitter):[^>]+>'
# görselin kendisi: 200, image/jpeg ve makul bir Content-Length bekleyin; giriş sayfasına yönlendirme olmamalı
curl -sI "https://example.com/og/favicon-kontrol-listesi.jpg?v=2"
# simgeler ve manifest: durum kodunu ve Content-Type başlığını kontrol edin
curl -sI https://example.com/icon.svg
curl -sI https://example.com/manifest.webmanifestArdından platform platform ilerleyin:
- Facebook: adresi Sharing Debugger aracına girin, uyarıları giderin ve Scrape Again düğmesiyle sayfayı yeniden taratın. Daha önce yapılmış paylaşımlar kendiliğinden güncellenmez. Meta görselleri adrese göre önbelleğe aldığı için değişen görsel yeni bir dosya adı ya da sorgu parametresi (query string) ister.
- LinkedIn: Post Inspector, LinkedIn'in bulduğu etiketleri gösterir ve sayfayı yeniden çeker.
- X: Card Validator'ın önizleme özelliği Ağustos 2022'de kaldırıldı. Bağlantıyı yeni bir gönderiye yapıştırın ve yayımlamadan, yazma ekranındaki kartı inceleyin. X kart bilgisini yaklaşık yedi günde bir yeniden tarar. Değişikliği yedi günü beklemeden görmek için X'in sorun giderme rehberi, sayfa adresinin sonuna ?x=test1 gibi zararsız bir parametre ekleyip o adresi paylaşmayı öneriyor; görseller de adrese göre önbelleğe alındığından görsel adresine de bir parametre ekleyin.
- Slack bağlantı önizlemelerini yaklaşık 30 dakika önbellekte tutar. Telegram kullanıcıları önizlemeyi yenilemek için adresi @WebpageBot'a gönderir, ancak sonuç her zaman tutarlı değil. WhatsApp'ın belgelediği bir yenileme aracı yok; görsel değiştiğinde ona yeni bir adres vermek en sağlam yol.
- Favicon: gizli pencerede kontrol edin, /favicon.ico adresini doğrudan açın ve Chrome DevTools'ta Application > Manifest bölümüne bakın. Google için Search Console'da ana sayfayı URL denetimi (URL Inspection) aracıyla inceleyip dizine eklenmesini isteyin; Google'a göre yeniden tarama birkaç günden birkaç haftaya kadar sürebilir.
WordPress, XenForo ve Next.js notları
WordPress: Site simgesi (Site Icon) alanı 6.5 sürümünden beri Ayarlar > Genel sayfasında yer alıyor; Özelleştirici'yi (Customizer) kullanan temalar onu Görünüm > Özelleştir > Site kimliği altında da gösteriyor. WordPress buraya en az 512x512 piksel boyutunda kare bir görsel istiyor ve bu görselden 32 ve 192 piksellik iki simge, 180 piksellik bir apple-touch-icon ve 270 piksellik bir msapplication kutucuğu üretip sayfaya ekliyor. Site simgesi seçilmemişse ve kökte gerçek bir favicon.ico dosyası yoksa WordPress /favicon.ico isteğini kendi gri "W" logosuna yönlendirir; bazı sitelerin sekmesinde WordPress logosunun görünmesinin nedeni budur. Open Graph işini tek bir SEO eklentisine (Yoast SEO, Rank Math ve benzerleri) bırakın, temanın ikinci bir etiket seti eklemediğinden emin olun.XenForo: Style properties > Basic options bölümünde Favicon URL ve Metadata logo URL alanları var (adlar sürüme ve dil paketine göre biraz farklı olabilir). Metadata logosu, kendi görseli olmayan sayfalarda og:image olarak kullanılır; bu yüzden buraya https:// ile başlayan tam adresiyle 1200x630 bir JPEG verin ve sayfa kaynağında og:image değerinin mutlak adres olarak çıktığını kontrol edin. XenForo bu yedek görselin yanına twitter:card olarak summary yazıyor; X görseli kare bir küçük resme kırpacağı için logoyu görselin ortasında tutun. Ana ekran simgeleri Setup > PWA setup bölümünde ayarlanır: 192x192 ve 512x512 PNG, maskable onay kutusu, tema rengi ve en fazla 12 karakterlik kısa forum adı. Kendi forumumuzda maskable kutusu işaretlendiğinde aynı dosyalar iki amaç için de listeleniyor; bu yüzden kutuyu yalnızca simgeler güvenli alan boşluğuyla tasarlandıysa işaretleyin.
Next.js (App Router): favicon.ico, app/ klasörünün köküne konur (izin verilen tek yer orası); icon.svg ya da icon.png ve apple-icon.png herhangi bir segmentte durabilir; opengraph-image.jpg ya da görseli kodla üreten opengraph-image.js ise ilgili rota segmentine konur. Next.js, favicon.ico için ürettiği etikete sizes="any" ekler; bunun bilinen yan etkisi Chrome'un ICO ve SVG dosyalarını birlikte indirmesi, yani fazladan bir istek. Paylaşım görseli etiketlerini de width, height ve type dâhil kendisi yazar; opengraph-image 8 MB'ı, twitter-image 5 MB'ı aşarsa derleme (build) başarısız olur. Göreli yolların mutlak adrese dönüşmesi için kök layout dosyasında metadataBase tanımlayın; bu ayar olmadan göreli adres kullanmak derleme hatası verir. theme-color ise artık viewport dışa aktarımında (export) tanımlanıyor.
Code:
// app/blog/[slug]/opengraph-image.js
import { ImageResponse } from 'next/og'
import { getPost } from '@/lib/posts' // kendi veri fonksiyonunuz
export const alt = 'Blog yazısı kapak görseli'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
export default async function Image({ params }) {
const { slug } = await params
const post = await getPost(slug)
return new ImageResponse(
(
<div style={{ display: 'flex', alignItems: 'center', width: '100%', height: '100%',
padding: 80, background: '#0f172a', color: '#ffffff', fontSize: 60 }}>
{post.title}
</div>
),
{ ...size } // Türkçe başlıklar için fonts: [...] ile ğ, ş, İ içeren bir font dosyası ekleyin
)
}Sık yapılan hatalar
| Belirti | Olası neden | Çözüm |
|---|---|---|
| Önizlemede görsel yok | Göreli ya da http ile başlayan og:image, oturum açmayı gerektiren görsel, hotlink koruması ya da botu engelleyen bir güvenlik duvarı kuralı | Herkese açık dosyaya https ile başlayan mutlak adres; botlara izin verin |
| X'te kart ya da görsel çıkmıyor | robots.txt sayfayı (kart hiç çıkmaz) ya da görseli (kart görselsiz çıkar) engelliyor; X robots.txt kurallarına uyar | Sayfa ve görsel yolu için Twitterbot'a izin verin |
| Görseldeki yazı kırpılıyor | Yazı kenarlara çok yakın ya da görselin oranı 1,91:1 değil | Ortasında güvenli alan bırakılmış 1200x630 ana görsel |
| Görsel yalnızca WhatsApp'ta çıkmıyor | Dosya 600 KB'ın üstünde ya da satır içi betik ve stiller meta etiketlerini HTML'in ilk 300 KB'ının dışına itmiş | JPEG dosyasını sıkıştırın; meta etiketlerini head bölümünün en üstüne alın, büyük satır içi betik ve stilleri ayrı dosyalara taşıyın |
| Güncellemeden sonra eski görsel görünüyor | Görsel adresi aynı kaldı, platform önbellekteki kopyayı gösteriyor | Yeni dosya adı ya da ?v=, ardından yeniden taratma |
| Google sonuçlarında favicon yok | Yalnızca SVG var, simge ya da ana sayfa robots.txt ile engelli ya da simge yalnızca alt klasördeki bir sayfada (örneğin /magaza/) tanımlı | Kök ana sayfadan bir ICO ya da PNG simgeye bağlantı verin, robots.txt engelini kaldırın |
| SVG favicon görünmüyor | Dosya text/plain ya da application/octet-stream olarak sunuluyor; Content-Type verilmeden nesne depolamaya (object storage) yüklenen dosyalarda sık görülür | Content-Type: image/svg+xml |
| Önizleme yalnızca Facebook'ta bozuk | Sunucu, botun istemediği bir sıkıştırma gönderiyor (örneğin isteğe bakmadan Brotli); Meta'nın bot (crawler) belgesi sunucunun gzip ve deflate kodlamalarını kullanmasını istiyor | Accept-Encoding başlığına uyun; bota gzip ya da sıkıştırılmamış yanıt verin |
Alt klasör konusuna bir not: Google her ana makine adı (hostname) için tek favicon destekler ve simgeyi o ana makinenin kök ana sayfasından okur. magaza.example.com kendi simgesini kullanabilir, ama example.com/magaza kullanamaz; yalnızca /magaza/ sayfalarında tanımlanan bir simge dikkate alınmaz. Simge dosyasının kendisi ise herhangi bir klasörde, hatta bir CDN'de durabilir; önemli olan, kök ana sayfadaki bağlantı etiketidir.
Kontrol listesi
- Kökte, sürüm parametresi olmadan favicon.ico (16/32/48)
- image/svg+xml olarak sunulan ve koyu sekme çubuğunda da okunan icon.svg
- Google için 96x96 PNG; ana sayfa ve simgeler robots.txt ile engellenmemiş
- Opak zeminli 180x180 apple-touch-icon.png
- 192, 512 ve ayrı bir maskable 512 içeren, application/manifest+json olarak sunulan manifest
- og:title, og:description, og:url, og:type, og:image (https ile mutlak adres), og:image:width, og:image:height, og:image:alt ve twitter:card
- 600 KB altında, yazıları güvenli alanda duran 1200x630 JPEG ya da PNG
- Sunucu tarafında üretilen, head bölümünün başında yer alan ve her biri yalnızca bir kez geçen etiketler
- curl, Sharing Debugger, Post Inspector ve X yazma ekranıyla yapılmış kontrol
Sık sorulan sorular
Open Graph görseli için 1200x630 hâlâ doğru ölçü mü?Evet. Meta'nın önerisini ve LinkedIn'in 1200x627 alt sınırını karşılıyor; X'in 2:1 kartı da üstten ve alttan yalnızca 15'er piksel kırpıyor. Daha büyük görsel kullanmak serbest, ama getirdiği ek dosya boyutuna nadiren değer.
Google için favicon boyutu ne olmalı?
En az 8x8 piksel, kare bir görsel. Google 48x48 pikselden büyüğünü öneriyor ve listelediği biçimlerden birini istiyor (ICO, PNG, JPEG, GIF ve birkaç biçim daha; SVG değil). 96x96 bir PNG ya da 180x180 apple-touch-icon bu ihtiyacı karşılar.
SVG simgem varken favicon.ico dosyasına yine de gerek var mı?
Evet. Google'ın listesinde SVG olmadığı için PNG ya da ICO biçiminde bir simge zaten gerekiyor; ayrıca pek çok istemci HTML kodunuza hiç bakmadan /favicon.ico adresini ister.
Simgeyi ya da paylaşım görselini değiştirdim, neden hâlâ eskisi görünüyor?
Önbellek yüzünden. Tarayıcılar favicon'u ayrı bir önbellekte tutar; gizli pencerede kontrol edin. Sosyal platformlar görselleri adrese göre önbelleğe alır; yeni görsele yeni bir adres verin ve sayfayı yeniden taratın. Google ise favicon'u ancak ana sayfanızı yeniden taradıktan sonra günceller.
WhatsApp'ta paylaşınca neden görsel çıkmıyor?
WhatsApp'ın belgelediği şartları sırayla kontrol edin: mutlak og:image adresi, 600 KB altında ve en az 300 piksel genişliğinde bir dosya, dolu og:title, og:description ve og:url etiketleri ve HTML'in ilk 300 KB'ı içinde yer alan bir head bölümü. WhatsApp, önizlemeleri en iyi çaba esasıyla gösterdiğini de belirtiyor.
Sonuç ve sonraki adımlar
Simgeleri ve paylaşım görsellerini yayın kontrol listesinin bir parçası sayın: simgeleri tek bir logo dosyasından, paylaşım görsellerini tek bir şablondan üretin, sunucu tarafında oluşturulan sayfa koduna mutlak adreslerle yerleştirin ve bir lansmandan ya da kampanyadan önce her platformun kendi aracıyla test edin. İlk adım olarak en çok paylaşılan üç sayfanızda yukarıdaki curl kontrollerini çalıştırın ve Sharing Debugger'ın işaretlediği sorunları giderin. Konunun geniş çerçevesi için 2026'da web tasarımı, 2026'da SEO ve organik sosyal büyüme yazılarımıza göz atabilirsiniz. Logodan simge setine ve paylaşım şablonlarına kadar bu işi devretmek isterseniz AIOR'un tasarım ve marka ekibi yardımcı olabilir. Belirli bir platform ya da içerik yönetim sistemiyle ilgili sorularınızı bu konuya yazabilirsiniz.Two sets of small images decide how a site looks outside its own pages: the favicon set that shows up in browser tabs, bookmarks, Google results and phone home screens, and the share image that appears when someone posts a link on Facebook, X, LinkedIn, WhatsApp or Slack. Both are read by bots you don't control, both are cached hard, and both fail silently: you just get a grey globe in the tab or a link card with no picture. This guide lists the files and sizes the AIOR team uses, the exact markup, how to test previews and how to refresh each platform's cache. Sizes and limits come from each platform's own documentation as checked in October 2026; where something isn't documented, we say so.
Quick answer: which file, which size
| File | Size | Used by |
|---|---|---|
| favicon.ico at the site root | 16x16, 32x32 and 48x48 layers in one file | Browsers, older clients, anything that requests /favicon.ico directly |
| icon.svg | Vector, square viewBox | Modern browser tabs; can switch colours for dark mode |
| favicon-96x96.png | 96x96 | Google Search, which recommends a favicon larger than 48x48 |
| apple-touch-icon.png | 180x180, opaque background | iPhone and iPad home screens; Google reads it too |
| icon-192.png, icon-512.png | 192x192 and 512x512 | Web app manifest: Android home screen, installed web apps |
| icon-maskable-512.png | 512x512, logo inside the central safe zone | Android's circle, squircle and rounded-square icon shapes |
| Share image (og:image) | 1200x630 (1.91:1), JPEG or PNG, under 600 KB | Facebook, LinkedIn, X, WhatsApp, Telegram, Slack, Discord |
The favicon set, file by file
favicon.ico belongs at the root: https://example.com/favicon.ico. When a page has no icon link, browsers request that path on their own, and so do feed readers and plenty of other tools. Pack 16, 32 and 48 px layers into it; the file still stays small.icon.svg is what Chrome, Edge and Firefox show in the tab, and Safari has supported SVG favicons since version 26. It stays sharp at any pixel density and can carry a dark-mode style. Two conditions: the server must send it as image/svg+xml, and the file must not depend on anything external. Browsers treat a favicon SVG as a plain image that can't load other files, so convert text to outlines (paths) and don't reference web fonts or external bitmaps from inside it.
A PNG of at least 96x96 is there for Google. Google's favicon guidelines (last updated August 2026) require a square image of at least 8x8 px, recommend one larger than 48x48 px and list BMP, GIF, ICO, PNG, JPEG, PPM and TIFF as supported formats. SVG is not on that list, so a site that only ships an SVG may end up without an icon in search results.
apple-touch-icon.png at 180x180 covers current iPhones and iPads; iOS scales it down wherever it needs a smaller size. Give it a solid background and some breathing room (a logo of about 140 px on the 180 px canvas works well), because iOS applies its own rounded mask and transparent areas don't come out the way you expect. When there is no link tag, iOS looks for /apple-touch-icon.png in the root, which is the best place for the file anyway.
Manifest icons: 192x192 and 512x512 PNGs, plus a separate 512x512 maskable version. Android crops maskable icons into its own shapes, so they need padding that the regular icon doesn't have. Don't point the maskable entry at the same file as the regular icon unless that file was designed with the padding.
Legacy you can skip: browserconfig.xml and the msapplication-* tile tags (the Next.js documentation notes that Chromium-based Edge no longer supports them), the monochrome mask-icon for Safari pinned tabs (current Safari uses the regular favicon there), apple-touch-icon-precomposed, and the long list of 57, 72, 114 and 144 px touch icons. They do no harm if they are already in place, but a new site needs none of them.
Markup and the manifest
Put these lines in the head of every page, in this order:
Code:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">Don't put sizes="any" on the ICO line. Evil Martians' widely copied favicon guide added it there in 2021 and replaced it with 32x32 in 2023, because Chrome then downloaded both the ICO and the SVG. Give the ICO a concrete size instead: 48x48 suits a 16/32/48 file and is what RealFaviconGenerator uses on its own site. Keep sizes="any", which means "scalable", on the SVG line. For theme-color, the HTML standard says browsers use the first tag whose media condition matches, so a tag without a media attribute placed above this pair silently overrides both. Support also varies: Chrome on Android and installed web apps use the colour, and Firefox ignores it. Safari used it from version 15, but according to MDN's compatibility data, since Safari 26 only installed web apps use it.
The manifest file:
Code:
{
"name": "Example Studio",
"short_name": "Example",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0f172a",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}Serve it as application/manifest+json; the W3C specification encourages that type, though it also accepts any JSON type. The MIME list that ships with nginx, and the one in the upstream Apache httpd source, map .svg and .ico but not .webmanifest (we checked in October 2026). Some Linux distributions add it, so check with curl -sI and add the mapping if it's missing:
Code:
# nginx, inside the server block
location = /manifest.webmanifest {
default_type application/manifest+json;
}
# Apache, in .htaccess or the vhost
AddType application/manifest+json .webmanifestTwo more rules. First, Googlebot has to be able to crawl your home page and Googlebot-Image the favicon file, so make sure robots.txt doesn't block /favicon.ico or the folder your icons live in. Second, Google asks for a stable favicon URL. Because browsers cache icons stubbornly, it's tempting to append ?v=123 on every deploy. Change the URL only when the icon itself changes instead (a manual ?v=2 or a content hash), and leave /favicon.ico without a version.
Designing an icon that works at 16 px
At 16x16 a detailed logo turns into a smudge. Use the symbol rather than the wordmark, keep it to two or three solid shapes, drop thin strokes and taglines, and check the result at real size on both light and dark tab bars. If your symbol is dark, the SVG can switch colours when the user prefers a dark theme:
Code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
.bg { fill: #0f172a; }
.fg { fill: #ffffff; }
@media (prefers-color-scheme: dark) {
.bg { fill: #e2e8f0; }
.fg { fill: #0f172a; }
}
</style>
<rect class="bg" width="32" height="32" rx="7"/>
<circle class="fg" cx="16" cy="16" r="7"/>
</svg>For maskable icons the W3C manifest specification defines the safe zone as a centred circle whose radius is 40% of the icon size. On a 512 px icon that circle is 409.6 px across, and a square logo stays inside it as long as it is no wider than about 290 px (409.6 / √2 ≈ 289.6). Fill the whole canvas with your background colour and avoid transparency. Chrome DevTools has a "Show only the minimum safe area for maskable icons" option under Application > Manifest, and maskable.app gives a quick preview.
This Python script (Pillow) builds all the raster files from one square logo-512.png with a transparent background. We ran it with Pillow 11:
Python:
from PIL import Image
logo = Image.open("logo-512.png").convert("RGBA") # square, 512x512 or larger
BG = (15, 23, 42, 255) # brand background colour, #0f172a
# favicon.ico with 16, 32 and 48 px layers
logo.save("favicon.ico", sizes=[(16, 16), (32, 32), (48, 48)])
# plain PNG icons; transparency is fine here
for size, name in [(96, "favicon-96x96.png"), (192, "icon-192.png"), (512, "icon-512.png")]:
logo.resize((size, size), Image.LANCZOS).save(name, optimize=True)
def on_background(size, logo_size, path):
canvas = Image.new("RGBA", (size, size), BG)
mark = logo.resize((logo_size, logo_size), Image.LANCZOS)
offset = (size - logo_size) // 2
canvas.alpha_composite(mark, (offset, offset))
canvas.convert("RGB").save(path, optimize=True)
on_background(180, 140, "apple-touch-icon.png") # opaque, about 20 px margin
on_background(512, 288, "icon-maskable-512.png") # even a full-bleed square logo stays in the safe zoneOpen Graph and X card tags
Link previews are built from meta tags in the page's HTML. The Open Graph protocol makes four of them required (og:title, og:type, og:image and og:url) and says a page with og:image should also provide og:image:alt. A complete set for an article:
Code:
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example Studio">
<meta property="og:title" content="Favicon and share image checklist">
<meta property="og:description" content="The icon files and share image sizes a site needs, and how to test them.">
<meta property="og:url" content="https://example.com/blog/favicon-checklist/">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://example.com/og/favicon-checklist.jpg?v=2">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Favicon sizes next to a 1200x630 share image template">
<meta name="twitter:card" content="summary_large_image">How the platforms read them:
- X looks for twitter:title, twitter:description, twitter:image and twitter:image:alt first and falls back to the og: versions, so add those only when you want different text. The large card has no Open Graph equivalent: according to X's documentation, a page without twitter:card can at most get the small summary card, built from og:type, og:title and og:description. Set twitter:card to summary_large_image for the large one.
- LinkedIn's help page names og:title, og:image, og:description and og:url as the tags it needs.
- WhatsApp wants og:title, og:description and og:url inside the head and not empty, and the head has to appear within the first 300 KB of the HTML. Meta's crawler is more lenient: Open Graph tags that come after the first 1 MB of the page are cut off.
- Meta recommends og:image:width and og:image:height so that even the first share can show the image before the crawler has downloaded and processed it.
- Slack reads oEmbed, Twitter Card and Open Graph tags, and documents that it does not honour robots.txt.
- If a tag is printed twice (say, the theme and an SEO plugin both write og:image), Open Graph gives the first one preference, while X documents that the last twitter:card wins. Print each tag once.
- Crawlers such as facebookexternalhit don't run JavaScript. Tags that a single-page app adds in the browser are invisible to them, so render the tags on the server.
A few content rules from the platforms' own guides. Leave the brand out of og:title (Meta and WhatsApp both ask for a title without branding) and put it in og:site_name. Make the first 80 or so characters of og:description work on their own, because WhatsApp shows one or two lines and X caps descriptions at 200 characters. Give each page its own image; X asks for one unique to the page rather than a site logo. Always use an absolute https:// URL for og:image: WhatsApp requires an absolute URL, and relative paths aren't resolved reliably elsewhere either. On a bilingual site, add og:locale and og:locale:alternate (en_US and tr_TR, for example). WhatsApp sends the recipient's chosen language in the Accept-Language header, so a site that picks its language from that header can build the preview in the recipient's language.
Share image sizes by platform
| Platform | What the documentation says | Practical notes |
|---|---|---|
| Facebook (Meta) | At least 1200x630 for high-resolution displays; 600x315 minimum for the large layout; 200x200 absolute minimum; up to 8 MB; stay close to 1.91:1 | Images are cached by URL, so a new image needs a new URL |
| X | summary_large_image: 2:1, minimum 300x157, maximum 4096x4096, under 5 MB; JPG, PNG, WEBP or GIF (first frame only); no SVG; alt text up to 420 characters | The small summary card shows a square crop instead |
| Minimum 1200x627, ratio 1.91:1, up to 5 MB; images under 401 px wide show as a thumbnail | 1200x630 fits as it is | |
| Absolute URL, under 600 KB, at least 300 px wide, no wider than 4:1; previews are best effort, not guaranteed | The tightest file-size limit of the lot | |
| Telegram | No public specification | Reads og: tags; use the same 1200x630 master |
| Slack, Discord | Slack reads oEmbed, Twitter Card and Open Graph and publishes no size limits; Discord has no public spec | Discord is commonly reported to show a large image with summary_large_image and to colour the embed bar from theme-color |
| Google Discover | Images at least 1200 px wide, over 300,000 pixels in total, 16:9 preferred, with max-image-preview:large; og:image or schema.org markup suggests the image | Avoid generic images such as the site logo, and text-heavy images |
One 1200x630 master covers all of these if you design for crops. A 2:1 crop removes 15 px at the top and bottom, a 16:9 crop removes 40 px on each side, and a square thumbnail keeps only the central 630x630. Keep text inside a centred area of roughly 1080x510, and if square thumbnails matter to you, put the logo or main visual inside the middle 630 px.
Format: JPEG for photos and gradients, PNG for flat graphics where JPEG artefacts would show. X accepts WebP, but Meta's sharing guide lists only JPEG, GIF and PNG as og:image types, so keep og:image in JPEG or PNG and never use SVG. Because WhatsApp's 600 KB limit is the tightest, keeping the master under it settles the file-size question for every platform.
Producing the images
In Figma, create a 1200x630 frame (a component with slots for title, subtitle and logo makes later posts quick) and export at 1x (if you export at 2x, the command below scales it back to 1200 px wide). In Canva, choose Custom size and enter 1200 x 630 px. Then compress: Squoosh works in the browser, and on a Mac the built-in sips tool needs nothing extra:
Bash:
sips --resampleWidth 1200 -s format jpeg -s formatOptions 82 og-master.png --out og-home.jpgFor blogs, shops and forums, generate share images from a template instead of drawing each one. Render the title onto a fixed background on the server (Next.js has next/og for this; other stacks use a headless browser or an image service), store the result, and put a version or hash in the file name so that an edited title produces a new URL. Two traps: generation has to be fast, because crawlers don't wait long, and the font you load must cover Turkish if your titles are Turkish. Google Fonts puts ç, ö, ü and ı in the "latin" subset but ğ, Ğ, ş, Ş and İ only in "latin-ext"; load "latin" alone and every ğ in a title like "Ağ Güvenliği" goes missing or falls back to another font. If Google Discover traffic matters to you, note one more point: Google advises against text-heavy images in og:image, so keep the title on the template short or make the image photo- or illustration-led.
Testing and refreshing caches
Start with what the crawler actually receives:
Bash:
# meta tags in the raw HTML, fetched as Facebook's crawler
curl -s -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" \
https://example.com/blog/favicon-checklist/ | grep -Eio '<meta[^>]+(og|twitter):[^>]+>'
# the image: expect 200, image/jpeg and a sensible Content-Length, not a redirect to a login page
curl -sI "https://example.com/og/favicon-checklist.jpg?v=2"
# icons and manifest: check the status and the Content-Type
curl -sI https://example.com/icon.svg
curl -sI https://example.com/manifest.webmanifestThen platform by platform:
- Facebook: run the URL through the Sharing Debugger, fix the warnings and press Scrape Again. Posts that were already shared don't update by themselves. Meta caches images by URL, so a changed image needs a new file name or query string.
- LinkedIn: Post Inspector shows the tags LinkedIn found and fetches the page again.
- X: the Card Validator lost its preview in August 2022. Paste the link into a new post and look at the card in the composer without publishing. X re-crawls card data roughly every seven days. To see a change sooner, X's troubleshooting guide suggests sharing the page URL with a harmless placeholder parameter such as ?x=test1; images are cached by URL too, so add a parameter to the image URL as well.
- Slack caches link previews for around 30 minutes. Telegram users send the URL to @WebpageBot to refresh a preview, with mixed results. WhatsApp documents no refresh tool, so giving a changed image a new URL is the safest route.
- Favicon: check in a private window, open /favicon.ico directly, and look at Application > Manifest in Chrome DevTools. For Google, inspect the home page with URL Inspection in Search Console and request indexing; Google says recrawling can take anywhere from several days to several weeks.
WordPress, XenForo and Next.js
WordPress: since version 6.5 the Site Icon field sits under Settings > General, and themes that use the Customizer still show it under Appearance > Customize > Site Identity. It asks for a square image of at least 512x512. WordPress then prints a 32 px and a 192 px icon, a 180 px apple-touch-icon and a 270 px msapplication tile. If no Site Icon is set and there is no physical favicon.ico, WordPress redirects /favicon.ico to its own grey "W" logo, which is how some sites end up with the WordPress logo in their tabs. Leave Open Graph to a single SEO plugin (Yoast SEO, Rank Math and the like) and make sure the theme doesn't print a second set.XenForo: Style properties > Basic options has Favicon URL and Metadata logo URL (labels can differ slightly between versions). The metadata logo becomes og:image on pages without an image of their own, so give it a 1200x630 JPEG with a full https:// address and check the page source to confirm that og:image comes out absolute. XenForo pairs this fallback with twitter:card summary, so X crops it to a square thumbnail; keep the logo in the centre. Home-screen icons are set under Setup > PWA setup: 192x192 and 512x512 PNGs, a maskable checkbox, the theme colour and a board short title of 12 characters or fewer. On our forum, ticking maskable lists the same files for both purposes, so tick it only when those icons already have safe-zone padding.
Next.js (App Router): favicon.ico goes in the root of app/ (the only place it's allowed), icon.svg or icon.png and apple-icon.png can sit in any segment, and opengraph-image.jpg, or an opengraph-image.js that generates the image, goes in the route segment it describes. Next.js adds sizes="any" to the favicon.ico link by itself; the known side effect of that markup is that Chrome downloads both the ICO and the SVG, which costs one extra request. For share images it writes all the tags, including width, height and type, and the build fails if opengraph-image is larger than 8 MB or twitter-image larger than 5 MB. Set metadataBase in the root layout so relative paths become absolute URLs; a relative URL without it is a build error. theme-color now belongs in the viewport export.
Code:
// app/blog/[slug]/opengraph-image.js
import { ImageResponse } from 'next/og'
import { getPost } from '@/lib/posts' // your own data function
export const alt = 'Blog post cover'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
export default async function Image({ params }) {
const { slug } = await params
const post = await getPost(slug)
return new ImageResponse(
(
<div style={{ display: 'flex', alignItems: 'center', width: '100%', height: '100%',
padding: 80, background: '#0f172a', color: '#ffffff', fontSize: 60 }}>
{post.title}
</div>
),
{ ...size } // add fonts: [...] with a font file that covers your language
)
}Common mistakes
| Symptom | Likely cause | Fix |
|---|---|---|
| No image in the preview | Relative or plain http og:image, an image behind a login, hotlink protection or a firewall rule that blocks the crawler | Absolute https URL to a public file; allow the crawlers |
| No card, or no image, on X | robots.txt blocks the page (no card at all) or the image (card without an image); X follows robots.txt | Allow Twitterbot for the page and the image path |
| Text in the image gets cropped | Text close to the edges, or an image that isn't 1.91:1 | 1200x630 master with a centred safe area |
| Image missing on WhatsApp only | File over 600 KB, or inline scripts and styles push the meta tags beyond the first 300 KB of the HTML | Compress the JPEG; move the meta tags to the top of the head and large inline scripts and styles into separate files |
| Old image after an update | Same image URL, so the platform serves its cached copy | New file name or ?v=, then scrape again |
| No favicon in Google results | SVG only, icon or home page blocked in robots.txt, or an icon declared only on a subdirectory page such as /shop/ | Link an ICO or PNG icon from the root home page and lift the robots.txt block |
| SVG favicon not shown | Served as text/plain or application/octet-stream, typical for files uploaded to object storage without a Content-Type | Content-Type: image/svg+xml |
| Previews fail only on Facebook | The server sends a compression the crawler didn't ask for (Brotli regardless of the request, for example); Meta's crawler documentation says the server must use gzip and deflate encodings | Honour the Accept-Encoding header; serve the crawler gzip or uncompressed responses |
On the subfolder point: Google supports one favicon per hostname and reads it from that hostname's root home page. shop.example.com can have its own icon, but example.com/shop cannot, so an icon declared only on /shop/ pages is ignored. The icon file itself can live in any folder or even on a CDN; what counts is the link tag on the root home page.
Checklist
- favicon.ico (16/32/48) at the root, without a version string
- icon.svg served as image/svg+xml and readable on a dark tab bar
- 96x96 PNG for Google; home page and icons not blocked in robots.txt
- apple-touch-icon.png at 180x180 with an opaque background
- Manifest with 192, 512 and a separate maskable 512, served as application/manifest+json
- og:title, og:description, og:url, og:type, og:image (absolute https), og:image:width, og:image:height, og:image:alt and twitter:card
- 1200x630 JPEG or PNG under 600 KB, with text inside the safe area
- Tags in server-rendered HTML, near the top of the head, each printed once
- Checked with curl, Sharing Debugger, Post Inspector and the X composer
FAQ
Is 1200x630 still the right Open Graph image size?Yes. It meets Meta's recommendation and LinkedIn's 1200x627 minimum, and X's 2:1 card only trims 15 px from the top and bottom. Larger images are allowed but rarely worth the extra weight.
What favicon size does Google need?
A square image of at least 8x8 px. Google recommends something larger than 48x48 px in a format it lists (ICO, PNG, JPEG, GIF and a few others, but not SVG). A 96x96 PNG or the 180x180 apple-touch-icon covers it.
Do I still need favicon.ico if I have an SVG?
Yes. Google doesn't list SVG, so you need a PNG or ICO icon anyway, and many clients request /favicon.ico without reading your HTML at all.
I changed the icon or the share image, so why do I still see the old one?
Caches. Browsers keep favicons in a cache of their own, so check in a private window. Social platforms cache images by URL, so give the new image a new URL and scrape again. Google refreshes the favicon only after it recrawls your home page.
Why does WhatsApp show no image?
Go through WhatsApp's documented requirements: an absolute og:image URL, a file under 600 KB and at least 300 px wide, og:title, og:description and og:url present and not empty, and a head that appears within the first 300 KB of the HTML. WhatsApp also says previews are best effort.
