Tarayıcı sekmesinde sayfa başlığının yanında bulunan resim - burada bir resmi nasıl bağlayabilirsiniz?
Tarayıcı sekmesinde sayfa başlığının yanında bulunan resim - burada bir resmi nasıl bağlayabilirsiniz?
Yanıtlar:
Bu görüntü ' favicon ' olarak adlandırılır ve .ico
faviconlar için standart dosya türü olan küçük kare şekilli bir dosyadır. .png
Ya .gif
da kullanabilirsiniz , ancak daha iyi uyumluluk için standardı takip etmelisiniz.
Web siteniz için bir tane ayarlamak için şunları yapmalısınız:
Logonuzun kare bir görüntüsünü yapın (maksimum boyut olmadığını bildiğim kadarıyla tercihen 32x32 veya 16x16 piksel) ve bir .ico
dosyaya dönüştürün . Bunu Gimp, Photoshop (bir eklenti yardımıyla ) veya Favicon.cc veya RealFaviconGenerator gibi bir web sitesinde yapabilirsiniz .
Ardından, bunu kurmanın iki yolu vardır:
A) Web sitenizin kök klasörüne / dizinine (yanında index.html
) adıyla yerleştirmek favicon.ico
.
veya
B) Sitenizdeki <head></head>
her .html
dosyanın etiketleri arasına şu şekilde bağlantı verin:
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
Herhangi favicon
bir web sitesinden görmek istiyorsanız , sadece yazın www.url.com/favicon.ico
ve (muhtemelen) göreceksiniz. Stackoverflow'un favicon'u 16x16 piksel ve Wikipedia 32x32'dir.
*: Dosya sınırı olmayan bir tarayıcı sorunu bile var. Bir tarayıcıyı son derece büyük bir favicon ile kolayca çökertebilirsiniz, daha fazla bilgi burada
Buna ' favicon ' denir ve web sitenizin başlık bölümüne aşağıdaki kodu eklemeniz gerekir .
Bunu <head>
bölüme eklemeniz yeterlidir .
<link rel="icon" href="/your_path_to_image/favicon.jpg">
Bu favicon'dur ve bağlantıda açıklanmıştır.
örneğin W3C'den
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
Artı, tabii ki resim dosyası uygun yerde.
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file:
'apple-touch-icon-retina.png')}">
veya bunu kullanabilirsin
<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">
Web sitenizin kök dizinine "favicon.ico" adlı bir simge dosyası ekleyin.
16x16
piksel olması gerektiğini unutmayın .
**<HEAD>**
< link rel="icon" href="directory/image.png">
O zaman koş ve tadını çıkar