Favicon boyutları: hangi dosyalar gerekli, kaç px olmalı

Favicon dosyaları neden bu kadar çok?

Favicon, sitenizin küçük simgesidir: tarayıcı sekmesinde, yer imlerinde, arama sonuçlarında ve telefonun ana ekranında görünür. Sitenin yüzüdür; olmayınca site bitmemiş görünür.

Sorun şu ki bu yerlerin her biri farklı boyut ve biçim ister. Bu yüzden favicon tek bir dosya değil, küçük bir settir.

İhtiyacınız olan set

• •favicon.ico — 16, 32 ve 48px tek dosyada. Adres çubuğu, sekmeler ve yer imleri için; en eski standart ve hâlâ şart
• •16px ve 32px PNG — modern tarayıcıların sekmede kullandığı net sürümler
• •180px apple-touch-icon — site iPhone veya iPad ana ekranına eklenirken kullanılır
• •192px ve 512px PNG — Android ana ekranı ve PWA kurulumu için; site.webmanifest dosyasına kaydedilir

Kaynak görsel nasıl hazırlanır

Doğrusu, büyük ve kare bir görselden (512px ve üzeri) başlayıp küçültmektir. Küçük görseli büyütmek onu yalnızca bulanıklaştırır.

Simge 16px'te bile tanınmalı; ne kadar sade, o kadar iyi. Tek bir sembol, yazı dolu logodan iyidir; kenarlarda küçük bir boşluk sıkışık görünümü önler; saydam arka plan açık ve koyu temada da uyumlu durur.

HTML'e böyle eklenir

Dosyaları sitenin kök klasörüne yükleyin ve head içinde link etiketleriyle gösterin: ICO ve PNG'ler için rel="icon", 180px simge için rel="apple-touch-icon", site.webmanifest için rel="manifest".

Yedek olarak, kökteki favicon.ico dosyasını çoğu tarayıcı etiket olmadan da bulur. Ama boyutlu PNG'lerin ve ana ekran simgelerinin düzgün çalışması için etiketleri ekleyin.

Seti elle kurmayın

Görselleri tek tek küçültüp ICO'yu elle paketlemek zahmetlidir. Image Converter NOW'un favicon oluşturucusuna tek bir görsel bırakın: favicon.ico, tüm PNG boyutları, site.webmanifest ve yapıştırmaya hazır HTML etiketleri tek ZIP olarak hazırlanır.

Her şey tarayıcınızda çalışır — logonuz hiçbir sunucuya yüklenmez.