Siteniz için favicon ve uygulama ikonları oluşturma

Yayınlandı 2026-02-27 · 2 dk okuma

#Favicon #PWA #Design

Her ciddi projenin tarayıcı sekmesinde net bir favicon, iOS için Apple touch ikonu ve Android ile PWA için uygulama ikonlarına ihtiyacı vardır. Bu araç hepsini tek bir görselden üretmenize yardım eder: kare bir logo yükleyin, boyutları seçin, PNG'leri indirin ve HTML parçasını sitenize kopyalayın.

Favicon ve uygulama ikonları neden önemli

Favicon — tarayıcı sekmesindeki ve yer imlerindeki küçük ikon. Olmadan sekme sıradan görünür ve markanız daha az tanınır.
Apple touch ikonu — kullanıcı sitenizi iPhone ve iPad'de ana ekrana eklediğinde kullanılır. Doğru boyut (örn. 180×180) net bir ikon sağlar.
PWA / Android ikonları — "Ana ekrana ekle" ve kurulum için gerekir. Tipik boyutlar: 192×192 ve 512×512.

Tek bir kare kaynak görsel hepsini karşılayabilir. Oluşturucu tamamen tarayıcınızda çalışır; logonuz cihazınızdan ayrılmaz.

Önerilen kaynak görsel

En az 512×512 piksel kare bir görsel (PNG veya SVG) kullanın. Daha yüksek çözünürlük uygundur; araç küçültür. İkonların yüksek yoğunluklu ekranlarda net kalması için çok küçük veya bozuk görsellerden kaçının.

Araçla hızlı başlangıç

Yükle — "Dosya seç"e tıklayıp logonuzu seçin (PNG veya SVG, kare, 512×512 veya daha büyük).
Arka plan — Logonuz şeffaf alan içeriyorsa arka plan rengi seçin; snippet'ta theme-color olarak da kullanılır.
Boyutlar — İhtiyacınız olan boyutları işaretleyin (favicon 16/32, Apple 180, PWA 192/512 vb.).
İndir — Bir önizlemeye tıklayarak o boyutu PNG olarak indirin veya hepsini bir seferde almak için "Tümünü ZIP olarak indir"i kullanın.
Parça — HTML bloğunu kopyalayıp sitenizin <head> bölümüne yapıştırın. PNG'leri sunucuya yükleyin (örn. /assets/icons/) ve gerekirse snippet'taki yolları güncelleyin.

Dosyaları nereye koymalı

Yaygın bir düzen:

Favicon ve ikon PNG'lerini /assets/icons/ gibi bir klasöre veya köke koyun.
Snippet'taki href değerlerini bu yollara yönlendirin (örn. /assets/icons/favicon-32x32.png).
PWA için 192×192 ve 512×512 ikonlarına aynı yollarla bir site.webmanifest ekleyin.

Özet

Favicon ve uygulama ikonu oluşturucu, tek bir logodan tüm gerekli boyutları ve <head> için hazır bir parça üretmenizi sağlar. İyi çözünürlükte kare bir görsel kullanın, PNG'leri indirin ve parçayı projenize ekleyin.