Favicon oluşturucu

Logonuzdan sitenizin tüm simgeleri, yüklemeye hazır.

Diğer araçlar: JPEG’den JPG’ye JPG sıkıştır PNG sıkıştır WebP sıkıştır Resim boyutlandır Resim kırp Resimleri birleştir

PNG, JPG, WebP veya SVG resminizi seçin

Tek seferde bir dosya, en fazla 20 MB.

Kareye sığdırma

Sığdır Resmin tamamı Doldur Kenarları kırpar

Simgeler karedir. Resminiz kare değilse, şeffaf kenar boşluklarıyla tamamının mı görüneceğini yoksa kareyi mi dolduracağını seçin.

Arka plan rengi

Şeffaf olamayan Apple simgesi için ve Android’de tema rengi olarak kullanılır.

Dosyalarınız dönüştürmeden sonra ve en geç yüklemeden bir saat sonra otomatik olarak silinir. Dosyalarınızı nasıl işliyoruz

Logonuzdan sitenizin eksiksiz favicon’unu oluşturun: tarayıcı sekmesindeki simge, iPhone ve Android ana ekran simgeleri, manifest ve hepsini bağlayan HTML kodu. PNG, JPG, WebP veya SVG resim yükleyin ve her şeyi içeren bir ZIP dosyasını üyeliksiz ve filigransız indirin.

Favicon nasıl oluşturulur

Logonuzu veya simgenizi PNG, JPG, WebP ya da SVG olarak seçin; tercihen kare ve en az 512 piksel.
Resmin tamamen mi görüneceğini yoksa kareyi mi dolduracağını ve Apple simgesinin arka plan rengini seçin.
“Favicon oluştur” düğmesine tıklayın ve ZIP dosyasını indirin.
Dosyaları sitenizin kök dizinine koyun ve head.html’deki kodu sayfalarınızın head etiketine yapıştırın.

Pakette neler var

Dosya	Ne işe yarar
`favicon.ico`	16, 32 ve 48 piksel boyutlarını tek dosyada içeren klasik sekme simgesi. Bağlamasanız bile tarayıcılar onu arar.
`favicon-16x16.png` ve `favicon-32x32.png`	Güncel tarayıcılarda sekme ve yer imi simgeleri.
`apple-touch-icon.png`	Biri sitenizi ana ekrana eklediğinde iPhone ve iPad’in kullandığı 180 piksellik simge.
`android-chrome-192x192.png` ve `android-chrome-512x512.png`	Android ve yüklenebilir web uygulamaları için simgeler.
`site.webmanifest`	Android simgelerini ve sitenizin rengini bildiren manifest.
`head.html`	Simgeleri sayfalarınıza bağlayan etiketler.

Sitenize nasıl kurulur

ZIP dosyasını açın ve head.html dışındaki tüm dosyaları sitenizin kök dizinine (ana sayfanın bulunduğu yere) koyun.
head.html içinde de bulunan bu etiketleri sayfalarınızın head etiketine kopyalayın:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

İsterseniz site.webmanifest dosyasındaki name ve short_name alanlarına sitenizin adını yazın.

Tarayıcılar favicon’u önbellekte tutar: yenisini hemen görmezseniz sayfayı zorla yenileyin veya biraz bekleyin.

Sığdır veya doldur

Tüm simgeler karedir. Resminiz kare değilse onu şeffaf kenar boşluklarıyla tamamen görünecek şekilde sığdırabilir veya kenarlardan taşan kısmı kırparak kareyi doldurabilirsiniz. Yazılı yatay bir logo için genellikle yalnızca logonun simgesini kare olarak kırpıp kullanmak daha iyidir.

Apple simgesi şeffaf olamaz: iOS arka planı siyahla doldururdu. Bu yüzden onu seçtiğiniz arka plan rengiyle oluştururuz; bu renk Android’de sitenizin rengi olarak da kullanılır. Diğer simgeler şeffaflığını korur.

İyi bir sonuç için ipuçları

Büyük bir resimle başlayın, en az 512 × 512 piksel, daha da iyisi bir SVG: küçük simgeler ondan hesaplanır.
Sade tutun: 16 pikselde yazılar ve ince ayrıntılar okunmaz. Zıt renklerde bir simge veya baş harf çok daha iyi çalışır.

Yalnızca .ico dosyasına ihtiyacınız varsa PNG’nizi ICO’ya çevirebilirsiniz.

Sınırlar

Tek seferde bir resim, en fazla 20 MB ve 100 megapiksel.
Sitenize dokunmayız: dosyaları kendiniz yüklemeli ve etiketleri eklemelisiniz ya da sitenizi yöneten kişiden isteyebilirsiniz.

Sık sorulan sorular

Favicon oluşturmak için resim ne boyutta olmalı?

Ne kadar büyükse o kadar iyi: en az 512 × 512 piksel veya bir SVG. 512’den 16 piksele kadar tüm simgeler ondan hesaplanır.

Favicon dosyalarını nereye koymalıyım?

Sitenizin kök dizinine, ana sayfayla aynı klasöre. Ardından head.html’deki etiketleri sayfalarınızın head etiketine yapıştırın.

Yeni favicon’u tarayıcımda neden göremiyorum?

Çünkü tarayıcılar favicon’u önbellekte tutar. Sayfayı zorla yenileyin, gizli pencerede açın veya biraz bekleyin.

Apple simgesinin arka planı neden renkli?

Çünkü iOS ana ekran simgelerinde şeffaflığı kabul etmez ve arka planı siyahla doldururdu. İyi görünmesi için onu seçtiğiniz arka plan rengiyle oluştururuz.

WordPress sitemin favicon’unu bununla oluşturabilir miyim?

WordPress’in kendi seçeneği vardır: “Site simgesi” (Görünüm › Özelleştir › Site kimliği altında veya sürüme ve temaya göre genel ayarlarda). Kare bir resim yüklersiniz, WordPress boyutları oluşturur. Bu aracın paketi, dosya yükleyip kodu düzenleyebildiğiniz siteler içindir.