2025'te Favicon Nasıl Hazırlanır

xguru · 2025-02-13T10:02:02+09:00

Favicon oluşturma yöntemleri karmaşıklaştıkça, yalnızca tarayıcı sekmesinde veya dokunmatik ekranda web sitesi logosunu göstermek için 20'den fazla PNG dosyası kullanmak yaygın hale geldi. Bunun yerine, nispeten az sayıda ikon dosyası ve minimum ayarla çoğu ortamı kapsayabilen bir yöntem öneriliyor. Çok basit sürüm Karmaşık ayarlara gerek olmadan, temel beş ikon ve bir JSON dosyası yeterli. HTML'e eklenecek temel bağlantı örneği şöyle: <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> PWA (Progressive Web App) desteği varsa şunu da ekleyin: <link rel="manifest" href="/manifest.webmanifest"> Örnek manifest.webmanifest dosya yapısı: { "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] } Maskable ikonlarda kenarların bir kısmı kesilebileceği için 409×409 dairesel alanı güvenli bölge olarak bırakmak iyi olur. Yalnızca bu yapılandırmayla bile başlıca tarayıcı ve cihazların çoğunda favicon düzgün çalışır. Ayrıntılı açıklama sürümü Favicon, “favorite icon” ifadesinden gelir ve tarayıcı sekmeleri gibi yerlerde gösterilen küçük simgedir. Safari de artık favicon'u düzgün biçimde destekliyor. Farklı çözünürlükler için ayrı ikon setleri hazırlamak yerine, SVG, birkaç PNG ikon ve basit bir manifest ile bunu verimli biçimde yönetmek mümkün. Nihai Favicon yapılandırması Tek bir SVG dosyası, birkaç gerekli PNG dosyası ve bir web manifest dosyasıyla ikonları farklı tarayıcı ve cihazlarda tutarlı şekilde gösterebilirsiniz. SVG bir vektör formatı olduğu için gerektiğinde serbestçe ölçeklenebilir ve arka planda indirilmesi performans açısından da hafiftir. PNG tarafında yalnızca Apple için (apple-touch-icon) ve PWA için gereken boyutları hazırlamak yeterlidir. Windows tile ikonları, Safari Pinned Icon, rel=“shortcut” gibi eski formatlara güncel tarayıcılarda büyük ölçüde artık ihtiyaç kalmadı. Eski tarayıcılar veya araçlar bazı durumlarda ikonu doğrudan /favicon.ico yolundan çektiği için kök dizindeki favicon.ico hâlâ önemlidir. Ultimate Favicon Set nasıl oluşturulur Aşağıdaki adımlar ikonları doğrudan oluşturma ve optimize etme sürecidir. adım: SVG hazırlama Kare oranını koruyan bir icon.svg dosyası hazırlamanız gerekir. içinde CSS media query kullanarak light ve dark mode için renk geçişi uygulanabilir. Örnekte olduğu gibi @media (prefers-color-scheme: dark) ile dark mode renkleri tanımlanabilir. adım: ICO dosyası oluşturma icon.svg dosyasını 16×16 veya 32×32 boyutlarında raster görsele dönüştürüp favicon.ico oluşturun. GIMP ya da Inkscape+ImageMagick gibi araçlar kullanılabilir. Düşük çözünürlükte logonun fazla bulanıklaşmamasına dikkat edin. adım: PNG görseller oluşturma 512×512, 192×192, 180×180 ve 512×512 (maskable) boyutlarında PNG ikonlar hazırlayın. iOS için apple-touch-icon 180×180 olarak hazırlanmalı; arka plan rengi eklemek veya uygun boşluk bırakmak faydalıdır. Maskable ikonlarda 409×409 alan güvenli bölge olarak bırakılmalıdır. adım: PNG ve SVG optimizasyonu SVG'yi SVGO gibi araçlarla sıkıştırın, PNG'lerde ise Squoosh ile sıkıştırma oranını artırın. Kullanıcılar veri kısıtlı ortamlarda olabileceği için dosya boyutunu en aza indirmek avantaj sağlar. adım: İkonları HTML'e bağlama Temel olarak favicon.ico, icon.svg ve apple-touch-icon.png dosyalarını etiketine bağlayın. <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> Webpack gibi araçlar kullanıyorsanız build sırasında hash ekleyerek cache yönetimi de yapabilirsiniz. Staging (geliştirme) ortamı ile production ortamını ayırmak için farklı favicon'lar da kullanılabilir. adım: Web Manifest oluşturma manifest.webmanifest dosyasına PWA ikon bilgilerini ekleyin ve <link rel="manifest" href="/manifest.webmanifest"> ile bağlayın. Aşağıdaki örnekte 192×192, 512×512 (maskable) ve 512×512 ikonlar tanımlanıyor. { "name": "My website", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] } Webpack ortamında webpack-pwa-manifest gibi eklentilerle bunu otomatikleştirebilirsiniz. Bu süreçlerden geçildiğinde az sayıda dosyayla bile çoğu tarayıcı ve cihazda uygun favicon gösterilir. Süreci bir otomasyon aracıyla yönetirseniz daha da pratik olur.

(evilmartians.com)

50 puan yazan xguru 2025-02-13 | 4 yorum | WhatsApp'ta paylaş

Favicon oluşturma yöntemleri karmaşıklaştıkça, yalnızca tarayıcı sekmesinde veya dokunmatik ekranda web sitesi logosunu göstermek için 20'den fazla PNG dosyası kullanmak yaygın hale geldi.
Bunun yerine, nispeten az sayıda ikon dosyası ve minimum ayarla çoğu ortamı kapsayabilen bir yöntem öneriliyor.

Çok basit sürüm

Karmaşık ayarlara gerek olmadan, temel beş ikon ve bir JSON dosyası yeterli.

HTML'e eklenecek temel bağlantı örneği şöyle:

&lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; sizes=&quot;32x32&quot;&gt;  
&lt;link rel=&quot;icon&quot; href=&quot;/icon.svg&quot; type=&quot;image/svg+xml&quot;&gt;  
&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/apple-touch-icon.png&quot;&gt;&lt;!-- 180×180 --&gt;

PWA (Progressive Web App) desteği varsa şunu da ekleyin:

&lt;link rel=&quot;manifest&quot; href=&quot;/manifest.webmanifest&quot;&gt;

Örnek manifest.webmanifest dosya yapısı:

{  
  &quot;icons&quot;: [  
    { &quot;src&quot;: &quot;/icon-192.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;192x192&quot; },  
    { &quot;src&quot;: &quot;/icon-mask.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;512x512&quot;, &quot;purpose&quot;: &quot;maskable&quot; },  
    { &quot;src&quot;: &quot;/icon-512.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;512x512&quot; }  
  ]  
}

Maskable ikonlarda kenarların bir kısmı kesilebileceği için 409×409 dairesel alanı güvenli bölge olarak bırakmak iyi olur.
Yalnızca bu yapılandırmayla bile başlıca tarayıcı ve cihazların çoğunda favicon düzgün çalışır.

Ayrıntılı açıklama sürümü

Favicon, “favorite icon” ifadesinden gelir ve tarayıcı sekmeleri gibi yerlerde gösterilen küçük simgedir.
Safari de artık favicon'u düzgün biçimde destekliyor.
Farklı çözünürlükler için ayrı ikon setleri hazırlamak yerine, SVG, birkaç PNG ikon ve basit bir manifest ile bunu verimli biçimde yönetmek mümkün.

Nihai Favicon yapılandırması

Tek bir SVG dosyası, birkaç gerekli PNG dosyası ve bir web manifest dosyasıyla ikonları farklı tarayıcı ve cihazlarda tutarlı şekilde gösterebilirsiniz.
SVG bir vektör formatı olduğu için gerektiğinde serbestçe ölçeklenebilir ve arka planda indirilmesi performans açısından da hafiftir.
PNG tarafında yalnızca Apple için (apple-touch-icon) ve PWA için gereken boyutları hazırlamak yeterlidir.
Windows tile ikonları, Safari Pinned Icon, rel=“shortcut” gibi eski formatlara güncel tarayıcılarda büyük ölçüde artık ihtiyaç kalmadı.
Eski tarayıcılar veya araçlar bazı durumlarda ikonu doğrudan /favicon.ico yolundan çektiği için kök dizindeki favicon.ico hâlâ önemlidir.

Ultimate Favicon Set nasıl oluşturulur

Aşağıdaki adımlar ikonları doğrudan oluşturma ve optimize etme sürecidir.
1. adım: SVG hazırlama
- Kare oranını koruyan bir icon.svg dosyası hazırlamanız gerekir.
- <svg> içinde CSS media query kullanarak light ve dark mode için renk geçişi uygulanabilir.
- Örnekte olduğu gibi @media (prefers-color-scheme: dark) ile dark mode renkleri tanımlanabilir.
1. adım: ICO dosyası oluşturma
- icon.svg dosyasını 16×16 veya 32×32 boyutlarında raster görsele dönüştürüp favicon.ico oluşturun.
- GIMP ya da Inkscape+ImageMagick gibi araçlar kullanılabilir.
- Düşük çözünürlükte logonun fazla bulanıklaşmamasına dikkat edin.
1. adım: PNG görseller oluşturma
- 512×512, 192×192, 180×180 ve 512×512 (maskable) boyutlarında PNG ikonlar hazırlayın.
- iOS için apple-touch-icon 180×180 olarak hazırlanmalı; arka plan rengi eklemek veya uygun boşluk bırakmak faydalıdır.
- Maskable ikonlarda 409×409 alan güvenli bölge olarak bırakılmalıdır.
1. adım: PNG ve SVG optimizasyonu
- SVG'yi SVGO gibi araçlarla sıkıştırın, PNG'lerde ise Squoosh ile sıkıştırma oranını artırın.
- Kullanıcılar veri kısıtlı ortamlarda olabileceği için dosya boyutunu en aza indirmek avantaj sağlar.
1. adım: İkonları HTML'e bağlama
- Temel olarak favicon.ico, icon.svg ve apple-touch-icon.png dosyalarını <head> etiketine bağlayın.
```
&lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; sizes=&quot;32x32&quot;&gt;  
&lt;link rel=&quot;icon&quot; href=&quot;/icon.svg&quot; type=&quot;image/svg+xml&quot;&gt;  
&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/apple-touch-icon.png&quot;&gt;  
```
- Webpack gibi araçlar kullanıyorsanız build sırasında hash ekleyerek cache yönetimi de yapabilirsiniz.
- Staging (geliştirme) ortamı ile production ortamını ayırmak için farklı favicon'lar da kullanılabilir.

adım: Web Manifest oluşturma

manifest.webmanifest dosyasına PWA ikon bilgilerini ekleyin ve <link rel="manifest" href="/manifest.webmanifest"> ile bağlayın.

Aşağıdaki örnekte 192×192, 512×512 (maskable) ve 512×512 ikonlar tanımlanıyor.

{  
  &quot;name&quot;: &quot;My website&quot;,  
  &quot;icons&quot;: [  
    { &quot;src&quot;: &quot;/icon-192.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;192x192&quot; },  
    { &quot;src&quot;: &quot;/icon-mask.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;512x512&quot;, &quot;purpose&quot;: &quot;maskable&quot; },  
    { &quot;src&quot;: &quot;/icon-512.png&quot;, &quot;type&quot;: &quot;image/png&quot;, &quot;sizes&quot;: &quot;512x512&quot; }  
  ]  
}

Webpack ortamında webpack-pwa-manifest gibi eklentilerle bunu otomatikleştirebilirsiniz.

Bu süreçlerden geçildiğinde az sayıda dosyayla bile çoğu tarayıcı ve cihazda uygun favicon gösterilir.
Süreci bir otomasyon aracıyla yönetirseniz daha da pratik olur.

4 yorum

carnoxen 2025-02-15

SVG Favicon hâlâ Firefox'ta desteklenmiyor...

carnoxen 2025-02-15

Aa, Safari imiş.

yeppyshiba 2025-02-13

Önceki şirketimde yaptığım bir projede web oyunu geliştirmiştim.
Can sıkıntısından bir easter egg olarak animasyonlu bir favicon da eklemiştim.
Animasyonu sprite sheet ile yapınca oldukça inandırıcı görünüyordu.

xguru 2025-02-13

2021 için Favicon özeti
4 yıl önce bunu bir kez paylaşmıştım, şimdi günümüze uygun şekilde güncellendi.