Bir web sitesinde favicon oluşturmak için en iyi uygulama nedir?

103

Soru

  • Site ikonu oluşturmak için en iyi uygulama nedirBir web sitesinde ?
  • ve bir olan .ico iyi bir daha hem 16x16 ve 32x32 görüntülerle dosya .png yalnızca dosyasından ?
  • Bugün tercih edilen doğru yöntem oldukça eski tarayıcılarda çalışmıyor olabilir mi?

Yöntem 1

Adlı bir dosya yerleştirmek favicon.icoAna dizine yoldur. Tarayıcı her zaman bu dosyayı ister. Bunu apache günlük dosyalarında görebilirsiniz.

Yöntem 2

Bölümdeki HTML etiketi <head>:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
html  favicon 
— bayt kodu77
kaynak

Yanıtlar:

154

Bir favicon oluşturmanın birkaç yolu vardır. Sizin için en iyi yol çeşitli faktörlere bağlıdır:

  • Bu görev için harcayabileceğiniz zaman. Çoğu insan için bu "olabildiğince hızlı".
  • Yapmak istediğiniz çabalar. Daha iyi sonuçlar için elle 16x16 simge çizmek gibi.
  • Garip özelliklere sahip belirli bir tarayıcıyı desteklemek gibi belirli kısıtlamalar.

İlk yöntem: Bir site simgesi oluşturucu kullanın

İşi iyi ve hızlı bir şekilde yapmak istiyorsanız, bir favicon üreteci kullanabilirsiniz . Bu, tüm büyük masaüstü ve mobil tarayıcılar için resimleri ve HTML kodunu oluşturur. Tam açıklama: Bu sitenin yazarıyım.

Bu tür bir çözümün avantajları: hızlıdır ve tüm uyumluluk konuları sizin için zaten ele alınmıştır.

İkinci yöntem: Bir favicon.ico oluşturun (yalnızca masaüstü tarayıcılar)

favicon.icoÖnerdiğiniz gibi, 16x16 ve 32x32 resimler içeren bir dosya oluşturabilirsiniz ( Microsoft'un 16x16, 32x32 ve 48x48 önerdiğini unutmayın ).

Ardından, bunu HTML kodunuzda belirtin:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

Bu yöntem, eski ve yeni tüm masaüstü tarayıcılarda çalışacaktır. Ancak çoğu mobil tarayıcı favicon'u görmezden gelir.

favicon.icoDosyayı köke yerleştirip bildirmeme öneriniz hakkında : dikkatli olun, bu teknik çoğu tarayıcıda çalışsa da% 100 güvenilir değildir. Örneğin, Windows Safari onu bulamıyor (verilen: bu tarayıcı bir şekilde Windows'ta kullanımdan kaldırılmıştır, ancak siz anladınız). Bu teknik, PNG simgeleriyle (modern tarayıcılar için) birleştirildiğinde kullanışlıdır.

Üçüncü yöntem: Bir favicon.ico, bir PNG simgesi ve bir Apple Touch simgesi oluşturun (tüm tarayıcılar)

Sorunuzda mobil tarayıcılardan bahsetmiyorsunuz. Çoğu favicon.icodosyayı görmezden gelir . Siteniz masaüstü tarayıcılara ayrılmış olsa da, muhtemelen mobil tarayıcıları tamamen görmezden gelmek istemezsiniz.

Aşağıdakilerle iyi bir uyumluluk elde edebilirsiniz:

  • favicon.ico, yukarıyı görmek.
  • Android Chrome için 192x192 PNG simgesi
  • 180x180'lik bir Apple Touch simgesi (iPhone 6 Plus için; diğer cihaz gerektiğinde küçültülür).

Onları ile ilan et 

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

Hikayenin tamamı bu değil, ancak çoğu durumda yeterince iyi.

— philippe_b
kaynak
9
Aslında, hala sıklıkla kullanılan <link rel = "kısayol simgesi" href = "/ yol / to / icons / favicon.ico"> geçerli bir seçenek değildir. Standart bile değildir ve yalnızca IE desteklemektedir. Ve IE 9 itibariyle, IE varsayılan 'root at root' yöntemini desteklemektedir. Dolayısıyla, tüm tarayıcıları desteklemenin bir yolu değil, yalnızca IE'yi desteklemenin bir yolu <9. (artık standart) 'root in root' yöntemine güvenin veya ısrar ediyorsanız şunu ekleyin: <link rel = "icon" href = "/ favicon.ico"> (Bu da standart olmasa da)
— HappyMe
7
Favicon mekanizması yıllar içinde kesinlikle gelişti. Bugün MDN'deki spesifikasyonun şimdi şunu söylediğini fark ettim: Kısayol bağlantı türü genellikle simgeden önce görülüyor, ancak bu bağlantı türü uygun değil, yok sayılıyor ve web yazarlarının artık kullanmaması gerekiyor. Kullanımını Anlamı <link ref="icon" ...>yerine <link ref="shortcut icon" ...> developer.mozilla.org/en-US/docs/Web/HTML/Link_types
— broc.seib
1
Geri bildiriminiz için @ broc.seib'e teşekkür ederiz. Bu yorumu yazarken, neden "simge" değil de "kısayol simgesi" olduğunu unuttum. Elbette, Mozilla'nın bu hikayede sesi var. Ancak, bu bildirimin neden ilk başta burada olduğunu unutmamalıyız: IE 8 gibi eski tarayıcıları desteklemek için. Yeni tarayıcıların çoğu, ICO'dan daha temiz ve daha hafif olan PNG simgelerini kullanır. RealFavicon için planım, bu bildirimi tamamen kaldırmak. Bundan önce, IE 7, 8 ve 9'da testler yapmam gerekiyor
— philippe_b
Bu sayfada, Stack Overflow'da "kaynağı görüntülerseniz", ref="shortcut icon"kullandıkları şeyin tam olarak bu olduğundan bahsetmiyorum bile .
— Steven Ventimiglia
1
@laggingreflex /favicon.icotercih edilen yöntemdir. Ziyaret ettiğinizde aldığınız şey budur www.google.com. Yine de, kök dizininizi bir simge ile kirletmek istemeyebilirsiniz. Bu durumda, işaretleme gayet iyi çalışıyor.
— philippe_b
2
  1. favin.ico oluşturmak için bu web sitesiyle çalışabilirsiniz
  2. .İco biçimini kullanmanızı öneririm çünkü png yöntem 1 ile çalışmaz ve ico daha fazla ayrıntıya sahip olabilir!
  3. her iki yöntem de tüm tarayıcılarla çalışır, ancak otomatik olarak çalıştığında, bunun için bir kod yazın? bu yüzden yöntem 1'in daha iyi olduğunu düşünüyorum.
— a828h
kaynak
2

Https://iconifier.net kullandım Resmimi yükledim, görseller zip dosyası indirdim, sunucuma görseller ekledim, sitedeki linkleri index.html'ye eklemek dahil olmak üzere takip ettim ve işe yaradı. Favicon'um artık 'Ana ekrana ekle' olduğunda Safari'de iPhone'umda görünüyor

— Hblegg
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.