Tasarım Kodlama

HTML Favicon Ekleme

Bu makalede, HTML kullanarak web sayfanıza favicon eklemeyle ilgili adımları inceleyeceğiz. Site simgeniz için istediğiniz herhangi bir görüntüyü kullanabilirsiniz, ancak site simgesinin küçük boyutu göz önüne alındığında, basit, yüksek kontrastlı görüntülerin genellikle en iyi sonucu verdiğini unutmayın. Ayrıca favicon.cc gibi siteler aracılığıyla özel bir site simgesi oluşturabilirsiniz.

Favicon, bir web sayfasının başlığının solundaki tarayıcı sekmesinde bulunan küçük bir resimdir.

Aşağıdaki resim bir favicon’un konumunu göstermektedir.

Sitenize bir favicon eklemek için proje dizininizde resimler adında bir klasör oluşturun (yoksa) ve istediğiniz favicon görselini bu klasöre kaydedin. Bir resminiz yoksa favicon.io sitesine gidip PNG yada metinlerinizi favicona dönüştürebilirsiniz.

Ardından, <link> elementi ile favicon aşağıda uygulanmıştır. Aşağıdaki örnekte index.html dosyasında <title> öğesinin hemen altına aşağıdaki gibi ekleyin.

Kodunuz şöyle olmalıdır:

yada

resmintamyolu ifadesini favicon görüntünüzün görsel dosya yolu ile değiştirdiğinizden emin olun. index.html dosyasını kaydedin ve web tarayıcınızda yeniden yükleyin. Tarayıcı sekmeniz artık bir favicon görüntüsü içermelidir.

Artık HTML kullanarak web sitelerine favicon resimlerini nasıl ekleyeceğinizi biliyorsunuz.

Favicon Boyutları

Favicon icon eklerken dosya boyutuna dikkat etmelisiniz. Iconların iyi görünmesi için 16×16, 32×32, 64×64 ebatlarında tercih edin.

128 x 128 ölçülerinin üzerinde olmamasına dikkat edin. Daha yüksek boyutlar görselin yüklenmesini uzatacaktır.

Favicon dosya uzantıları

En çok kullanılan ve önerdiğim favicon dosya uzantısı .ico‘dur.

Önerilen dosya formatı .ico‘dur. (Buradan ico formatına çevirebilirsiniz. )

Animasyon favicon ekleme istiyorsanız .gif uzantılı resim dosyaları da kullanabilirsiniz.

Ayrıca .png.jpg ve .jpeg dosya formatlarını da desteklemektedir.

Yorum yap