Skip to content

Favicon Oluşturucu

İçeri tek bir kare görsel, dışarı eksiksiz bir favicon seti. Hiçbir şey tarayıcınızdan çıkmaz.

2026’da modern bir favicon kurulumu tek bir dosya değil, küçük bir pakettir: eski tarayıcılar ve yer imleri için klasik bir favicon.ico, tarayıcı sekmeleri için 16 ve 32 piksellik PNG simgeler, iOS ana ekranları için 180 piksellik bir apple-touch-iconve web uygulaması manifestosu için 192/512 piksellik PNG’ler. İşin .ico kısmı göründüğünden daha zahmetsizdir: Windows Vista’dan bu yana ICO dizin girdileri doğrudan PNG kodlu görseller içerebildiğinden, bu araç görselinizi her boyutta bir canvas üzerinde işler, her birini PNG olarak kodlar ve 16/32/48 üçlüsünü görsel başına yalnızca 6 baytlık bir başlık ile 16 baytlık dizin maliyeti olan bir ICO kapsayıcısına sarar — tamamı istemci tarafında, hiçbir yere hiçbir şey yüklenmeden.

Drop one image here (PNG, SVG, JPEG, WebP…), or

One file, up to 16 MB. A square 512×512+ source works best. Stays in your browser — nothing is uploaded.

How to use

  1. Bir görsel bırakın

    Tarayıcınızın çözebildiği herhangi bir görseli — PNG, SVG, JPEG, WebP — bırakma alanına sürükleyin. En az 512×512 boyutunda kare bir kaynak en keskin sonucu verir; kare olmayan görseller otomatik olarak merkezden kırpılır.

  2. Küçük boyut önizlemelerini kontrol edin

    Araç, simgenizi hem açık hem koyu damalı arka plan üzerinde 16, 32 ve 48 pikselde işler — tarayıcı sekmelerinin kullandığı boyutlar tam olarak bunlardır. Tasarım 16 pikselde çorbaya dönüyorsa, yayınlamadan önce sadeleştirin.

  3. Seti indirin

    favicon.ico dosyasını (16, 32 ve 48 piksellik PNG girdilerini tek dosyada barındırır) ve tek tek PNG'leri alın: favicon-16x16.png, favicon-32x32.png, 180 pikselde apple-touch-icon.png ve manifestonuz için icon-192/icon-512.

  4. Head etiketlerini kopyalayın

    Hazır <link> parçacığını HTML head bölümünüze kopyalayın, dosyaları sitenizin kök dizinine bırakın ve web uygulaması manifestonuzun icons dizisinden icon-192.png ile icon-512.png dosyalarına referans verin.

Frequently asked questions

Görselim bir sunucuya yükleniyor mu?
Hayır. Çözme, merkezden kırpma, ölçekleme, PNG kodlama ve ICO kapsayıcısının bir araya getirilmesi tamamen tarayıcınızda, Canvas API ve düz JavaScript ile çalışır. Hiçbir aşamada yükleme isteği yoktur — Convertitive görselinizi asla görmez.
Hangi boyutlar gerçekten önemli ve neden bunlar?
16×16 ve 32×32; standart ve yüksek yoğunluklu ekranlarda tarayıcı sekmelerini, yer imi çubuklarını ve geçmiş listelerini kapsar. 48×48; Windows site kısayollarını ve bazı masaüstü bağlamlarını karşılar. 180×180, güncel iPhone ve iPad'lerin ana ekran simgeleri için istediği boyuttur. 192×192 ve 512×512 ise web uygulaması manifesto belirtiminin ve Android yükleme isteminin beklediği iki boyuttur. Tarayıcıların ihtiyaç duyduğu diğer her şey bunlardan birinden ölçeklenir.
2026'da hâlâ bir .ico dosyasına ihtiyacım var mı?
Evet, güvenlik ağı olarak. PNG favicon desteğinden eski tarayıcılar ve tarayıcı botları, /favicon.ico yolunu doğrudan kodlamış eski yer imleri, ayrıca akış okuyucular, bağlantı önizleyiciler ve izleme botlarından oluşan uzun bir kuyruk hâlâ site kökünden /favicon.ico dosyasını koşulsuz olarak ister. Oraya gerçek bir dosya koymanın maliyeti yoktur ve günlüklerinizde sürekli 404 birikmesini önler.
Şeffaf arka planlar korunuyor mu?
Evet. Her çıktı — .ico kapsayıcısı içindeki girdiler dahil — PNG olarak kodlanır ve PNG tam alfa kanalı taşır. Yukarıdaki damalı önizlemeler tam da bu yüzden var: şeffaf simgenizin hem açık hem koyu tarayıcı temalarında nasıl göründüğünü karar vermeden önce kontrol edebilirsiniz.
Apple touch icon neden 180 piksel?
180×180, iOS'un 3x Retina ekranlarda ana ekran simgeleri için istediği boyuttur (60pt × 3). 152 veya 167 piksel isteyen eski cihazlar 180 piksellik dosyayı basitçe küçültür; dolayısıyla tek bir en büyük boyutu sunmak tüm Apple ürün yelpazesini kapsar. iOS yuvarlatılmış köşe maskesini kendisi uyguladığından, kenardan kenara dolu bir kare verin — önceden yuvarlatılmış köşelere gerek yoktur.
Peki ya SVG faviconlar?
Modern masaüstü tarayıcılar <link rel=„icon” type=„image/svg+xml”> etiketini kabul eder ve bu harika bir eklemedir — her boyutta keskin tek bir dosya, üstelik gömülü CSS ile koyu moda bile uyum sağlayabilir. Ancak Safari'nin desteği tarihsel olarak geride kaldı ve tarayıcı olmayan pek çok istemci bunu yok sayar; bu yüzden PNG artı ICO seti güvenli taban olmayı sürdürüyor. SVG'yi bir yedek olarak değil, ek bir <link> olarak sunun.

About

ICO kapsayıcısı ve PNG girdilerinin neden çalıştığı

Bir .ico dosyası hâlâ günlük kullanımda olan en basit kapsayıcı formatlardan biridir: 6 baytlık bir ICONDIR başlığı (ayrılmış sözcük, simgeler için tip 1, girdi sayısı), ardından her görsel için genişlik ve yüksekliği (tek bayt olarak; 0 değeri 256 anlamına gelir), bit derinliğini, bayt uzunluğunu ve konumu kaydeden 16 baytlık bir ICONDIRENTRY, sonrasında da art arda dizilmiş ham görsel verisi. Başlangıçta bu verinin AND şeffaflık maskesi içeren başlıksız bir BMP olması gerekiyordu; Windows Vista'dan bu yana veri, işletim sisteminin imza baytlarından tanıdığı eksiksiz bir PNG akışı da olabiliyor. Bu kadar küçük, istemci tarafında çalışan bir oluşturucuyu mümkün kılan da tam olarak bu değişikliktir — piksel işini tarayıcının kendi canvas.toBlob PNG kodlayıcısı yapar, ICO katmanı ise bir DataView ile yazılan 6 + 16×n baytlık little-endian defter tutmadan ibarettir.

Tarayıcılar favicon kaynağını nasıl seçer

Birden fazla simge bağlantısı bildirildiğinde tarayıcılar rel tipine ve sizes özniteliğine göre seçim yapar: 2x bir ekranda sekme 32 piksel ister, bu yüzden <link rel=„icon” sizes=„32x32”> etiketi 16 piksellik olana karşı kazanır; bildirilenlerden hiçbiri uymuyorsa çoğu tarayıcı, link etiketi hiç olmasa bile site kökünden /favicon.ico dosyasını istemeye döner. Apple cihazları ana ekran simgeleri için rel=„icon” etiketini tamamen yok sayar ve rel=„apple-touch-icon” arar (bulamazsa kökteki /apple-touch-icon.png dosyasına döner). Yüklenebilir web uygulamaları ise ikisini de okumaz — 192 ve 512 piksellik girdileri manifestonun icons dizisinden alır. Sekmeler için link etiketleri, iOS için apple-touch-icon, yüklemeler için manifest — eksiksiz bir setin tek yerine üç dağıtım mekanizmasına sahip olmasının nedeni bu ayrımdır.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.