Site simgesi oluşturma [kapalı]

94

Web sitem için nasıl favicon oluşturabilirim?

html favicon

— Ry-
kaynak

1

Olası yinelenen bir web sitesi için bir tarayıcı sekmesi simgesine (favicon) nasıl eklenir?

— Michał Perłakowski

@Gothdo Bu bir kopya değil! Gösterdiğin kişi IS! Bu, bundan bir buçuk yılda bir önceydi!

— Dov Miller

5

Bu soruyu konu dışı olarak kapatmak için oy kullanıyorum çünkü bu programlama değil, web tasarımı ile ilgili.

— Kyll

@DovMiller Daha iyi cevapları olan daha iyi soru, açık kalması gereken sorudur.

— mbomb007

101

Site simgeleri hakkında arama yaparken, tüm tarayıcılarda ve cihazlarda çalışmak için 10'dan fazla dosya türüne ihtiyacım olduğunu keşfettim :(

Sinirlendim ve tüm bu dosyaları ve her biri için doğru HTML başlığını oluşturan kendi favicon oluşturucumu yarattım : faviconit.com

Umarım tadını çıkarırsın.

— Eduardo Russo
kaynak

14

Mükemmel uygulama. Bu, gördüğüm en iyi favicon oluşturucu sitelerden biri.

— Chris Livdahl

1

Teşekkürler Chris! Yardımcı olmaktan memnuniyet duyarım!

— Eduardo Russo

3

@EduardoRusso bu gerçekten harika - teşekkürler!

— davnicwil

4

Aferin. Beklendiği gibi çalışıyor.

— Dilshan

1

Beklenenden daha iyi çalışıyor! Küçük hata (?): Gelişmiş kullanılırken, yol ve sürüm browserconfig.xml'de bulunmaz. Yine de seviyorum. : D

— mrjink

42

Zaten favicon'a dönüştürmek istediğiniz bir logo resminiz varsa, http://www.favicomatic.com/ kullanarak bunu dönüştürebilirsiniz . Keskin faviconlar yaratıyor ve onları oluşturduktan sonra düzenlemek zorunda kalmadım. 16x16 ve 32x32'de faviconlar oluşturacak ve bunları alıntılamak için: "Her boyutta, efendim!" Site ayrıca bazı pngs'de bulunan şeffaflığı destekler / korur. Ayrıca, siteleri havalı görünüyor ve kullanımı kolay.

Örneğin burada bir stackoverflow logosu: görüntü açıklamasını buraya girin

Oluşturulan faviconlardan bazıları şunlardır:

görüntü açıklamasını buraya girin

Ayrıca gerekli html'yi oluştururlar:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

İlk 20 kadar google sonucuna baktım ve bu açık ara en iyisiydi.

— Jared Menard
kaynak

1

Daha fazla olumsuz oy kullanmaktan kaçınmak için bu yanıtı nasıl iyileştirebilirim?

— Jared Menard

3

Bilmiyorum. Cevabınız bunu benim için beş dakikalık bir iş haline getirdi. Teşekkürler.

— andyb

1

bazı insanlar sebepsiz yere olumsuz oy kullanmayı sever. SO'nun buna karşı bir politikası olmalı. Btw, gerçekten çok farklı boyutlara mı ihtiyacımız var yoksa 16x16 ve 32x32 web sitesi oluştururken yeterliyiz

— Emil

Şahsen buradaki en iyi uygulamanın ne olduğunu bilmiyorum. Sitemde sadece bir tane kullandığımızı düşünüyorum. Bunlar, bir manifest.json ile birleştirildiğinde, krom aşamalı web uygulamaları için yararlı olabilir.

— Jared Menard

Bu kaynağı favicomatic.com'da buldum , adı "Favicon Hile Sayfası" github.com/audreyr/favicon-cheat-sheet

— Jared Menard

20

GIMP bunun için iyi bir programdır. Resmi PNG olarak kaydedin ve ardından

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

üzerinde <HEAD>sayfanızın kısmına.

— Stefano Borini
kaynak

7

Gimp ayrıca onu favicon.ico olarak kaydetme seçeneği sunar, bu da bağlantı ekleme zahmetinden kurtarır.

4

Eski MSIE'lerin (hala oldukça popüler olan) "uygun" ICO formatlı dosya yerine PNG'yi kabul etmemesi üzücü.

— Már Örlygsson

Web sitelerini görev çubuğuna sabitlemek için Windows da bir ico gerektirir.

— Necriis

8

16x16 veya 32x32 veya 64x64 boyutunda bir simge dosyası oluşturursunuz. Favicon.ico olarak adlandırın ve web sitenizin ortak klasörünün köküne yerleştirin.

Diğer grafik biçimlerini sizin için .ico'ya dönüştürecek web siteleri var. yani. http://tools.dynamicdrive.com/favicon/

— Jim
kaynak

4

Ayrıca: Bir eklerseniz favicon dosyası hiçbir yerinde kaydedebilirsiniz <link rel="shortcut icon" href="link/to/fav.ico" />için <head>sayfalarınızın bloğu.

— Már Örlygsson

1

tools.dynamicdrive.com/favicon ayrıca birden fazla boyutu tek bir favico'da birleştirmenize olanak tanıyacak ki bu harika

— hdorio

5

En iyi çevrimiçi favicon araçlarından biri FaviconGenerator.com'dur . Hızlı, modern tasarım, tüy bırakmaz.

— X vurur
kaynak

1

FaviconGenerator.com ayrıca API'larına node / grunt / gulp'dan erişim sağlar.

— Matt

3

Dosyaları .ico oluşturmak istiyorsanız, siz de kullanabilirsiniz GIMP faviconları oluşturun. Modern tarayıcılar normal görüntü dosyalarını kullanabilir, ancak aslında bunun sadece .ico dosyaları olduğunu düşünüyorum. Photoshop'a benzer açık kaynaklı bir görüntü düzenleyicidir. Doğru boyutta bir görüntü oluşturun ve düzenleyin (örneğin 32 x 32), tek bir katmana düzleştirin (aynı dosyada birden fazla simge istemiyorsanız) ve .ico olarak kaydedin. Doğru şekilde biçimlendirecek, ardından Stefano's'u <link rel="SHORTCUT ICON" HREF="/favicon.ico">web sayfanızda kullanmak için kullanacaktır.

— roket maymunları
kaynak

3

Açık kaynak Paint.net programını Icon eklentisiyle birlikte kullanıyorum .

Ardından, .ico dosyasına tüm farklı boyutlarda gömülü olarak .ico biçiminde bir görüntü oluşturabilir ve kaydedebilirsiniz.

— Matthew Lock
kaynak

Hmm, paint.net.amihotornot.com.au, Icon eklentisinin sunucusu olarak mı? Bu yasal mı?

— RonaldB

@RonaldB evet, bu eklentinin evi. Garip alan adı değil mi

— Matthew Lock

3

Bir favicon oluştururken, aşağıdaki faktörleri hesaba katmak istersiniz:

Desteklenen platformlar On yıl önce, yalnızca masaüstü tarayıcıları desteklemek istiyordunuz ve çözüm, klasik favicon.icoresmi oluşturmaktı . Günümüzde iOS (ve iOS Safari) ve Android (ve Android Chrome) 'u desteklemek istiyorsunuz. Belki Windows 10 (ve Edge) ve yeni Mac Book Pro Touch Bar da (macOS Safari). Artık "herkese uyan tek bir boyut" resmi kullanamazsınız.
Tasarım Birden çok platformu destekler desteklemez, birden çok tasarım yönergesiyle karşı karşıya kalırsınız. Örneğin Google, Android'de kendi yerel uygulamaları için şeffaf simgeler kullanırken, iOS simgeleri hiç şeffaf olamaz. "Her şeye uyan tek bir tasarım" yaklaşımını kullanamazsınız.
Oluşturulan simgeler ve HTML kodu İki veya üç yıl boyunca referans, tüm durumları kapsayacak şekilde olabildiğince çok simge üretmektir. Korkarım bu eğilimi tamamen kendim yarattım: - / Sorun şu ki, sonunda 20 şeylik satırlar veya HTML, ki bu çok fazla. Tatmin edici bir teknik çözüme sahip olmak için, oluşturulan simgelerin / HTML'nin miktarını ve desteklenen platformları dengelemeniz gerekir.

Her zaman olduğu gibi, tüm bu varlıkları manuel olarak oluşturabilirsiniz. Çok, çok özel ihtiyaçlarınız ve bir bütçeniz olmadıkça, bu kesinlikle yapılacak yol değildir.

Çoğu insan için doğru yol, tüm simgelerin görünümüne karar vermenizi sağlayan ve tüm ayrıntılarla ilgilenen bir favicon oluşturucu kullanmaktır. Bunu yapan tek kişi Real Favicon Generator . Tam açıklama: Bu sitenin yazarıyım.

— philippe_b
kaynak

1

Ve asp.net kullanıyorsanız, sayfanıza favicon uygulamak için şu yolu deneyin:

<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />

ancak burada daha fazla bilgi bulabilirsiniz: http://doctype.com/

— Tarık
kaynak

1

Bir not olarak, doctype.com 15 Şubat 2013 itibarıyla kapandı. Bununla ilgili daha fazla bilgi edinin .

— Krease

1

Photoshop kullanarak faviconlarımı 16 x 16 veya 32 x 32 yapıyorum. Daha sonra gif olarak kaydediyorum ve gif'i bir ico'ya dönüştürmek için IrfanView kullanıyorum .

— Max
kaynak