Favicon Nasıl Oluşturulur

Modern bir favicon, 16×16 görselden daha fazlasıdır. Her tarayıcıda, işletim sisteminde ve cihazda net görünen bir kurulumun tam iş akışını burada bulabilirsiniz.

6 dk okuma

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

Site simgesi nedir?

Favicon, tarayıcının sekmede, yer işareti çubuğunda ve geçmiş listesinde gösterdiği küçük simgedir. Mobil cihazlarda bu, ana ekran simgesidir. Windows'te kısayol simgesidir.

Modern siteler, her yüzeyin net bir görüntü elde etmesi için birden fazla çözünürlük ve format sunar.

Kaynak görselinizi hazırlayın

En az 512×512 boyutunda kare bir resimle başlayın; ideal olarak kare viewBox içeren bir SVG. Daha küçük olan her şey küçültüldüğünde bulanıklaşacaktır.

İnce çizgilerden ve küçük metinlerden kaçının. 16×16’da kayboluyorlar.

Çok boyutlu bir .ico oluşturun

Tek bir favicon.ico içinde 16, 32, 48, 64, 128 ve 256'yı paketleyin. Tarayıcılar doğru boyutu otomatik olarak seçer.

Favicon oluşturucumuz bunu istemci tarafında bir saniyeden kısa sürede yapar.

HTML etiketlerini ekleyin

favicon.ico'i sitenizin kök dizinine bırakın. Daha sonra eksiksiz bir kurulum için SVG, apple-touch-icon ve bildirim simgelerini <head>'e ekleyin.

Her tarayıcıda doğrulayın

Chrome, Safari, Firefox ve Edge'te kalıcı yenileme. Yer imi çubuğunu, sekmeyi ve ana ekran kurulumunu kontrol edin.

SSS

What is a favicon?

A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes and formats for crisp rendering everywhere.

What size should my favicon source image be?

Start from a square image at least 512×512 pixels. SVG with a square viewBox works best for sharp downscaling.

Do I need both favicon.ico and PNG files?

Yes — ship a multi-size favicon.ico for universal fallback plus PNGs (180×180 and 192/512) for Apple, Android, and PWAs.

Where do I put favicon files on my website?

Place favicon.ico in your site root and add <link rel="icon"> tags in <head> for SVG and PNG variants.

İlgili kılavuzlar

Araçları deneyin

Okumaya devam et