Favicon & Site İkonu Yapma
Logonuzu veya istediğiniz bir görseli yükleyin; web siteniz için gerekli olan klasik favicon.ico, Apple touch icon ve Android PWA uygulama ikonlarını tarayıcınızdan çıkmadan saniyeler içinde ücretsiz oluşturun.
Logonuzu Buraya Sürükleyin veya Dosya Seçin
PNG, JPG, JPEG, WebP veya SVG (Maksimum 8MB). İşlem tamamen tarayıcınızda yapılır.
HTML Favicon Entegrasyon Kodu
Oluşturduğunuz ikonları sitenizin HTML kodundaki <head> alanına yerleştirin.
<!-- Standart Faviconlar --> <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16"> <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32"> <!-- Apple Cihazları İçin İkon --> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- Android / PWA İçin Manifest Dosyası Tanımı --> <link rel="manifest" href="/site.webmanifest">
Next.js App Router Entegrasyon Notu:
Next.js 13+ App Router projelerinde klasik HTML kodlarını eklemenize gerek yoktur. İndirdiğiniz apple-touch-icon.png ve favicon.ico dosyalarını doğrudan projenizin app/ klasörü altına kopyalamanız yeterlidir. Next.js bu dosyaları otomatik algılayıp gerekli link etiketlerini sayfaya otomatik enjekte eder.
Marka Kimliği
Favicon Nedir?
Favicon (Favorite Icon - Sık Kullanılan İkonu), bir web sitesinin kimliğini temsil eden ve tarayıcı sekmelerinde sayfa başlığının solunda gösterilen kare biçimindeki küçük simgedir. Ayrıca tarayıcı yer işaretlerinde, arama geçmişinde, tarayıcı kısayollarında ve Google arama sonuçlarındaki site isminin hemen solunda listelenir.
Tıpkı bir şirketin logosu gibi, favicon da web sitenizin dijital dünyadaki imzasıdır. Ziyaretçilerin tarayıcılarında çok sayıda sekme açıkken sitenizi görsel olarak hızlıca bulmasını kolaylaştırır ve marka bütünlüğü oluşturur.
Teknik SEO
Site İkonu Nedir?
Site ikonu, modern web standartlarında ve özellikle mobil arama motoru optimizasyonunda (SEO) favicon'un karşılığı olarak kullanılan bir terimdir. Google, hem mobil hem de masaüstü arama sonuç sayfasında (SERP) web sitelerinin başlıklarının solunda site ikonlarını gösterir.
Arama sonuçlarında kaliteli, net ve şeffaf bir site ikonuna sahip olmak, web sitenizin güvenilirliğini artırır. Kullanıcıların arama yaparken sitenizi hızlıca fark edip tıklamasını sağlayarak organik tıklama oranınızı (CTR) artırmaya yardımcı olur.
Adım Adım Kılavuz
Favicon ve Site İkonu Nasıl Yapılır?
Logonuzu Yükleyin
Tasarım stüdyomuza logonuzu sürükleyip bırakın veya dosya seçin.
Ayarları Yapılandırın
İç boşluk (padding), arka plan rengi ve köşe yuvarlaklığı ayarlarını sürgülerle anlık düzenleyin.
Canlı Önizleyin
İkonun Chrome sekmesinde ve mobil ekranda nasıl görüneceğini açık/koyu temalarda test edin.
Tek Tıkla İndirin
'Tüm İkonları İndir' butonuna basarak tüm boyutları ve favicon.ico dosyasını sırayla indirin.
Çözünürlük Standartları
Favicon Ölçüleri Nelerdir?
Eski web ekosisteminde yalnızca 16x16 piksel boyutunda tek bir `favicon.ico` dosyası yeterliydi. Ancak günümüzde retina ekranlar, mobil tarayıcılar, tabletler ve PWA (Progressive Web Apps) teknolojileri farklı çözünürlüklerde ikon dosyaları talep etmektedir.
Modern bir web sitesinde klasik tarayıcı sekmeleri için **16x16** ve **32x32**, Apple cihazları için **180x180** Apple Touch Icon, Android manifest tanımları için ise **192x192** ve **512x512** piksel çözünürlüğünde PNG ikon dosyalarının barındırılması ve HTML kodlarında doğru tanımlanması gerekir.
Dosya Biçimleri
PNG, SVG ve ICO Favicon Farkları Nedir?
Web siteniz için ikon oluştururken 3 farklı dosya formatıyla karşılaşırsınız. İşte bu biçimlerin özellikleri:
- ICO Formatı: İçerisinde birden fazla çözünürlükteki resmi (örn: 16x16, 32x32) barındırabilen eski nesil Windows ikon formatıdır. Tarayıcıların ve arama motorlarının kök dizinde (`/favicon.ico`) otomatik aradığı ilk dosyadır.
- PNG Formatı: Şeffaflık (transparency) desteği mükemmel olan, yüksek renk doğruluğuna sahip ve modern tarayıcıların öncelikli olarak tercih ettiği hafif resim formatıdır.
- SVG Formatı: Vektörel bir format olduğu için dosya boyutu son derece küçüktür ve kalitesi bozulmadan sonsuz ölçeklenebilir. Modern SEO çalışmalarında en güncel standarttır.
Mobil Uyumluluk
Apple Touch Icon ve Android İkonu Nedir?
Mobil cihazların yaygınlaşmasıyla birlikte web siteleri birer mobil uygulama gibi ana ekrana eklenebilir hale gelmiştir. Ziyaretçi sitenizi telefonunun ekranına kaydettiğinde, siteniz için atanmış yüksek çözünürlüklü bir uygulama simgesine ihtiyaç duyulur.
iOS (Safari) bu amaçla **Apple Touch Icon** adı verilen 180x180 piksel çözünürlüğündeki simgeleri arar. Android (Chrome) ve PWA altyapıları ise `site.webmanifest` dosyası içinde tanımlanmış olan 192x192 ve 512x512 piksel çözünürlüğündeki Android simgelerini çeker. Bu simgelerin eksik olması durumunda telefonlar sitenizi kalitesiz bir ekran görüntüsüyle ana ekrana ekler.
Geliştirici Rehberi
Next.js (App Router) Projesine Favicon Nasıl Eklenir?
Next.js 13 ve üzeri App Router projelerinde favicon yönetimi son derece kolaylaştırılmıştır. HTML kodları yazmak yerine dosya tabanlı metadata yapısı kullanılır:
- İndirdiğiniz **favicon.ico** dosyasını doğrudan projenizin
app/dizinine kopyalayın. - İndirdiğiniz **apple-touch-icon.png** dosyasını adını değiştirmeden
app/apple-icon.pngolarak app dizinine yerleştirin. - Standart **icon.png** (örn: 32x32) dosyasını
app/icon.pngolarak kaydedin. - Next.js build esnasında bu dosyaları tarayarak web sitenizin head alanına en uygun meta ikon linklerini otomatik ekleyecektir.
Kullanım Alanlarına Göre Favicon Boyutları
| Boyut | Format | Kullanım Alanı / Cihaz | Gereklilik |
|---|---|---|---|
| 16 x 16 piksel | PNG | Klasik tarayıcı sekmesi | Zorunlu (Tüm Tarayıcılar) |
| 32 x 32 piksel | PNG | Yüksek çözünürlüklü tarayıcılar, görev çubuğu | Zorunlu (Retina Ekranlar) |
| 48 x 48 piksel | PNG / ICO | Windows masaüstü kısayolları ve sistem arayüzleri | Önerilir |
| 180 x 180 piksel | PNG | iOS (iPhone/iPad) Ana Ekran Uygulama Simgesi | Zorunlu (Apple Cihazları) |
| 192 x 192 piksel | PNG | Android Chrome ana ekran kısayolu ve PWA | Zorunlu (PWA / Manifest) |
| 512 x 512 piksel | PNG | Android PWA Açılış Ekranı (Splash Screen) | Zorunlu (PWA) |
ICO, PNG ve SVG Favicon Karşılaştırması
| Format | Şeffaflık | Kalite | Avantajı | Dezavantajı |
|---|---|---|---|---|
| ICO | Orta | Düşük/Orta | Geriye dönük tüm tarayıcı uyumluluğu (IE dahil) | Büyük dosya boyutu, sınırlı renk derinliği |
| PNG | Mükemmel (Alpha) | Yüksek | Mükemmel şeffaflık, hafif dosya boyutu, zengin renkler | SVG kadar esnek değil (ölçeklenemez) |
| SVG | Mükemmel (Vektör) | Kusursuz | Sonsuz ölçeklenebilirlik, tek dosya çözümü, çok hafif | Eski tarayıcılarda desteklenmez |
Hataları Önleyin
Sık Yapılan Favicon ve Site İkonu Hataları
Karmaşık logoları favicon olarak kullanmak: Çok ince detaylar veya yazılar 16x16px boyutunda çamur gibi görünür.
Şeffaflık (transparency) kontrolü yapmamak: Şeffaf arka planı olmayan beyaz kutulu ikonlar tarayıcıların koyu temalarında çirkin durur.
favicon.ico dosyasını sunucu root dizinine eklememek: Arama motoru örümcekleri tarama yaparken direkt root dizinindeki /favicon.ico adresini arar, bulamazsa 404 hatası kaydeder.
Farklı cihazlar için apple-touch-icon ve manifest tanımlarını atlamak: Siteniz mobil cihazlarda ana ekrana eklendiğinde düzgün görünmez.
Koyu temada (dark mode) kontrast testi yapmamak: Siyah ağırlıklı şeffaf bir ikon, tarayıcının dark mode arayüzünde tamamen kaybolur.
Next.js projelerinde klasik link etiketleri ekleyerek hydration hatalarına yol açmak (Next.js'in kendi dosya tabanlı favicon yapısı kullanılmalıdır).
SSS
Favicon Oluşturucu Hakkında Sıkça Sorulan Sorular
Favicon nedir?
Favicon (Favorite Icon), bir web sitesinin tarayıcı sekmelerinde, yer işaretlerinde (bookmarks), arama sonuçlarında ve tarayıcı geçmişinde görünen küçük, kare biçimindeki simgedir. Marka bütünlüğünü ve sitenin profesyonelliğini gösteren önemli bir detaydır.
Site ikonu nedir?
Site ikonu, favicon terimiyle aynı anlamı taşır. Google arama sonuçlarında (SERP) site adının solunda listelenen ve kullanıcıların mobil veya masaüstü aramalarda sitenizi görsel olarak tanımasını sağlayan marka simgesidir.
Favicon nasıl yapılır?
Startonal Favicon Yapma aracını kullanarak logonuzu veya bir görselinizi yükleyin. Arka plan rengi, padding ve köşe yuvarlaklığı ayarlarını yapıp tarayıcı/mobil simülasyonlarında canlı inceleyin. Ardından 'Tüm İkonları Sırayla İndir' butonuna basarak tüm boyutları ve favicon.ico dosyasını ücretsiz indirin.
Favicon ölçüleri nelerdir?
Favicon ölçüleri kullanım alanına göre değişir. Klasik tarayıcı sekmeleri için 16x16, 32x32 veya 48x48 piksel, Apple iOS ana ekranlar için 180x180 Apple touch icon, Android/PWA açılışları için ise 192x192 ve 512x512 piksel standart boyutlardır.
Favicon için hangi dosya formatı kullanılmalı?
Modern web dünyasında PNG ve SVG formatları yaygın olarak tercih edilmektedir. Ancak eski tarayıcılarla tam uyumluluk sağlamak amacıyla root dizininde bir adet favicon.ico dosyasının da yer alması önerilir. Bu araç size hem klasik .ico hem de modern .png formatlarını üretir.
PNG favicon mu ICO favicon mu daha iyi?
İkisi de gereklidir. PNG formatı yüksek renk derinliği ve şeffaflık kalitesi sunar; bu nedenle modern tarayıcılar (Chrome, Firefox, Safari) PNG faviconları tercih eder. ICO formatı ise Microsoft Internet Explorer gibi eski sistemler için yedek (fallback) uyumluluk sağlar.
SVG favicon kullanılabilir mi?
Evet. Modern tarayıcılar SVG favicon formatını tamamen destekler. SVG ikonlar vektörel olduğu için ne kadar büyütülürse büyütülsün pikselleşme yapmaz, tek bir dosya ile tüm ekran çözünürlükleri mükemmel çözülür. Ancak tarayıcı uyumluluk yedekleri için PNG/ICO dosyaları da sunulmalıdır.
Apple touch icon nedir?
Apple touch icon, web sitenizi iPhone veya iPad ana ekranına 'Ana Ekrana Ekle' seçeneğiyle kısayol olarak kaydeden kullanıcılar için gösterilen 180x180 piksel çözünürlüğündeki mobil uygulama simgesidir.
Android ve PWA icon nedir?
Android cihazlarda Google Chrome tarayıcısı üzerinden sitenizi ana ekrana kaydeden veya PWA (Progressive Web App) olarak kullanan ziyaretçilere gösterilen, manifest dosyasında tanımlanan 192x192 ve 512x512 piksel çözünürlüğündeki uygulama simgeleridir.
Next.js projesine favicon nasıl eklenir?
Next.js App Router (13+) projelerinde, indirdiğiniz favicon.ico, apple-touch-icon.png ve favicon-32x32.png (veya icon.png) dosyalarını doğrudan projenizin app/ klasörü altına taşımanız yeterlidir. Next.js dosyaları otomatik tanıyarak head alanına gerekli bağlantı kodlarını kendisi enjekte eder.
Favicon SEO’yu etkiler mi?
Evet, dolaylı olarak etkiler. Google, mobil ve masaüstü arama sonuçlarında site adlarının yanında faviconları gösterir. Dikkat çeken, kaliteli ve marka kimliğini yansıtan bir favicon arama sonuçlarındaki tıklama oranınızı (CTR) artırır. Ayrıca Google botları tarama yaparken favicon dosyalarının varlığını denetler.
Bu araç yüklediğim görseli kaydeder mi?
İkon dönüştürme işlevi seçtiğiniz görseli FileReader ve Canvas API ile tarayıcıda işler; dönüştürme için sunucuya yüklemez. İndirdiğiniz çıktılar cihazınızda saklanabilir.
Favicon küçük görünüyorsa ne yapmalıyım?
Faviconlar 16x16 gibi çok küçük boyutlarda render edilir. Bu nedenle logolarınızdaki ince detaylar veya küçük yazılar favicon boyutunda okunamaz hale gelebilir. İdeal bir favicon için karmaşık tasarımlar yerine markanızın harf logosunu veya belirgin bir simgesini (ikonunu) tercih etmelisiniz.
DİĞER ARAÇLAR VE HİZMETLER
Profesyonel Marka ve Web Tasarım Çözümleri
Web sitenizin teknik SEO'sunu ve görünümünü optimize ettikten sonra, Google Başlık & Meta Testi aracımızı kullanarak arama sonuçlarındaki (SERP) görünümünüzü test edebilir, Kelime & Karakter Sayacı ile içeriklerinizi analiz edebilirsiniz. Kurumsal web tasarım ve grafik tasarım ihtiyaçlarınız için yanınızdayız.