Web siteme nasıl sık kullanılan simgesi ekleyebilirim?

Siteme bir favori simgesi eklemek için modern standart nedir? Standart görüntü formatı ve boyutu nedir?

Tüm tarayıcılarda çalışmak .icoiçin, boyut olarak olduğu gibi, 32x32 en yaygın kullanılanıdır, 16x16 da çalışır (bu, çoğu yerde tarayıcıda kullanılan gerçek boyuttur).

Ayrıca sorunuzda değil, 8 veya 24bit renk derinliği olmalıdır.

Kullanıcıların sitenize yer işareti koyduğu her ne olursa olsun, bu <link>görüntü için ayrı bir şeydir , örneğin StackOverflow'un:

<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">

Hangisi:

Bir resmi içe aktarmak ve bir favicon'a dönüştürmek veya sadece sıfırdan oluşturmak için http://www.favicon.cc/ gibi bir araç kullanabilirsiniz .

Bundan sonra, dosyanızı adlandırır favicon.icove web sitenizin kök dizinine koyarsanız, web tarayıcılarının çoğu dosyayı otomatik olarak alır.

Ancak bunu html dosyalarınızda açıkça beyan edebilirsiniz:

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

icoFarklı formatları kullanmanın avantajları ile, farklı sayfalarda farklı favicons kullanın, favicon'unuzu başka bir yere koyun, vb. Dışında bir ad kullanın favicon.

http://en.wikipedia.org/wiki/Favicon

IE için tam etki alanı http yolu ile işaretleme ve favicon'u belge klasöründe tutma:

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

Standart görüntü formatı:

• .ico
• 16 x 16 piksel

Farklı cihazlar, tarayıcılar ve işletim sistemleri için farklı simgeler kullanabilirsiniz. Örneğin, size ilham verebilecek bir liste aşağıdadır. Her şeyi yapın, işler ilerledikçe listeyi düzeltin / düzenleyin.

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />

Artık bir bağlantıya ihtiyacınız yok, ama kullanışlı. Bunun yerine, favicon.ico (ve bir ico) adlı dosyayı kökünüzde bıraktığınız sürece, favicon olarak kullanılır.

GIMP ile .ico dosyamı oluştururken biraz sorun yaşadım, ancak bu yazı ayrıntılı talimatlar veriyor. Hile, dizinlenmiş bir renk tablosuna dönüştürmek için önce GIF biçimi olarak kaydediliyor ve ardından bunu ICO biçimine dönüştürüyor.