Cum de a adăuga o filă browser pictograma (favicon) pentru un site web?

Am'am fost de lucru pe un site si mi-am'd place să adăugați o pictogramă mică la browser-ul tab.

Cum pot face acest lucru în HTML și în cazul în care în codul ar trebui să-l loc (de exemplu antet)? Am o .png logo-ul fișierului pe care am'd place să se convertească la o icoana.

Legate de: https://stackoverflow.com/questions/2359866/html-set-image-on-browser-tab.

Community
Întrebarea editată 23 mai 2017 в 11:54
Programare
icons html favicon
3 februarie 2011 в 3:55
13 vizualizări
Comentarii la întrebare (4)
  1. Utilizați un instrument pentru a converti png la un fișier ico. Puteți căuta "favicon generator" și puteți găsi multe instrumente online.
  2. Loc ico adresa în "capul" cu un "link" -etichetă:
Prusprus
Răspuns editat 7 decembrie 2015 в 2:14
Comentarii (3)
Soluția

Există de fapt două moduri de a adăuga un favicon pentru un site web.

<link rel="icon">

Pur și simplu adăugați următorul cod la ` element:

PNG favicons sunt acceptate de cele mai multe browsere, cu excepția IE <= 10. Pentru compatibilitate, puteți utiliza ICO favicons.

Rețineți că don't trebuie să preceadă icon în atribut " rel " cu "shortcut" mai. De MDN tipuri de Link:

"shortcut" de tip link-ul este de multe ori văzut înainte de icon, dar acest tip de legătură este non-conforme, ignorat și web autorii trebuie să nu-l mai folosesc.

favicon.ico în directorul rădăcină

De DECI un alt raspuns (cu @mercator):

Toate browserele moderne (testat cu Chrome 4, Firefox 3.5, IE8, Opera 10 și Safari 4) va solicita întotdeauna un favicon.icodacă nu&#39;am specificat o pictogramă de comandă rapidă prin`.

Deci, tot ce trebuie să faceți este de a face /favicon.ico cerere pentru site-ul tău întoarcerea ta favicon. Această opțiune, din păcate, nu't vă permite să utilizați un PNG pictograma.

A se vedea, de asemenea, https://stackoverflow.com/q/1344122/3853934

Michał Perłakowski
Răspuns editat 5 martie 2018 в 1:07
Comentarii (4)

Cel mai bun pe care l-am găsit este http://www.favicomatic.com/ Eu zic cel mai bine pentru că mi-a dat crispest favicon, și necesară nici o editare după transformarea lor. Acesta va genera favicon la 16x16 și 32x32 și să le citez "Fiecare al naibii de dimensiune, domnule!" De asemenea, site-ul lor arată bine și este ușor de utilizat.

Ei au, de asemenea, de a genera html-ul care aveți nevoie pentru a utiliza pentru fișierele pe care le generează.














<meta name="application-name" content=" "/>
<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" />

M-am uitat la primele 20 de rezultate google, iar acest lucru a fost de departe cel mai bun.

Jared Menard
Răspuns editat 27 aprilie 2015 в 8:04
Comentarii (3)

Există un număr de diferite icoane și chiar ecrane splash pe care le puteți seta pentru diverse dispozitive. Acest răspuns a merge prin modul de a le susține.

Aici sunt unele fragmente mi-au folosit cu link-uri relevante pentru a în cazul în care am adunat informații. Vedea pe blog pentru mai multe informații și mai multe informații despre ASP.NET MVC Șabloane model de proiect cu toate astea construit în drept afară de la cutie (Inclusiv proba de fișiere de imagine).

Se adaugă următorul text mark-up html, cap. A comentat secțiuni sunt în întregime opțională. În timp ce necomentate secțiuni sunt recomandate pentru a acoperi toate icon utilizări. Don't fi speriat, cele mai multe, dacă este de comentarii pentru a vă ajuta.















<meta name="theme-color" content="#1E1E1E">



















































<meta name="msapplication-TileColor" content="#5cb95c">

<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Mea browserconfig.xml fișierul. Explicație completă de mai sus.

<?xml version="1.0" encoding="utf-8"?>







      #5cb95c

Mi manifest.fișier json. Explicație completă de mai sus.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

O listă de fișiere în proiect (Rețineți că numele acestor fișiere sunt important, dacă vă decideți pentru a pune unele dintre ele, la rădăcina proiectului, pentru a evita utilizarea de mai sus meta tag-uri):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

Total Regie

Dacă luați comentariile pe care's 3KB de HTML suplimentare, dacă nu't de sprijin ecrane splash, care's 1.5 KB. Dacă sunteți folosind GZIP compression pe conținut HTML, pe care toată lumea ar trebui să fac în aceste zile, care te lasa cu aproximativ 634 de Bytes de deasupra capului per cerere pentru a sprijini toate platformele sau 446 Bytes fără ecrane splash. Eu personal cred ca merita sa-l sprijini IOS, dispozitive Android și Windows dar alegerea ta, I'm doar oferind opțiuni!

Notă Despre Actuala Web Icon/Splash Screen/Setări De Situație

Această situație cu vânzătorul de pictograme specifice, ecrane splash și etichete speciale pentru a controla browser-ul web sau fixate icoane este ridicol. Într-o lume perfectă, ne-ar folosi toate un favicon.fișier svg, care ar putea să arate bine la orice dimensiune și pot fi plasate la baza paginii. Doar FireFox suporta acest lucru la momentul de scris (a se Vedea CanIUse.com).

Cu toate acestea, icoanele nu sunt singurul cadru în aceste zile, există mai multe alte furnizor de setări specifice (prezentate mai sus), dar un favicon.fișier svg ar acoperi cele mai multe cazuri de utilizare.

Update

Actualizat pentru a include noul Android/Chrome versiunea M39+ favicon/temelor opțiuni. Interesant, ei au plecat cu o abordare similară la Microsoft, dar sunt folosind un fișier JSON în loc de XML.

Muhammad Rehan Saeed
Răspuns editat 16 martie 2015 в 4:36
Comentarii (0)

Am'am făcut acest lucru cu succes pentru site-ul meu.

Singura excepție este, Mozilla browser-ul necesită cod HTML introdus în <head>; întrucât, celelalte browsere va afișa în continuare favicon.ico fără nici un HTML de inserție. De asemenea, orice alt browser decat IE pot utiliza alte tipuri de imagini, nu doar .format ico. Sper că acest lucru ajută.

Emmet Arries
Răspuns editat 25 februarie 2016 в 11:47
Comentarii (0)

Am creat un on-line Favicon Generator cu care puteți crea un favicon la Icoane Awesome Font. Puteți previzualiza creat favicon live în browser-ul.

Dacă doriți caracteristici suplimentare, vă rugăm să nu ezitați să prezinte o problemă sau o cerere de tragere aici :).

Comentarii (0)

Există o mulțime de soluții complicate de mai sus. Pentru mine? Am folosit GIMP pentru a salva o copie a originalului PNG după schimbarea imaginii dimensiunea de 32 x 32 pixeli.

Doar asigurați-vă că să-l salvați ca un *.ico fișiere și de a folosi

enumerate mai sus

Comentarii (0)

Am'd vă recomandăm să încercați http://faviconer.com pentru a converti .PNG sau .GIF la un .Fișier ICO.

Puteți crea atât 16x16 " și " 32x32 (pentru noul retina display) într-o singură .Fișier ICO.

Nici probleme cu IE si Firefox

Alfred Huang
Răspuns editat 26 februarie 2016 в 12:46
Comentarii (0)

Pentru Chrome pentru a afișa pictograma paginii (favicon), aveți nevoie pentru a verifica site-ul de la un server de hosting sau puteți utiliza calculatorul local, în timp ce în curs de dezvoltare și de testare site-ul dvs. de pe PC.

Comentarii (0)

Dacă am putea adăuga mai multă claritate pentru cei dintre voi care sunt încă confuză. A .fișier ico tinde să ofere mai multă transparență decât .png, care este de ce am recomanda conversia imagine aici cum sa menționat mai sus: http://www.favicomatic.com/done de asemenea, în interiorul href este doar locația imaginii, poate fi orice locație de server, amintiți-vă pentru a adăuga http:// in fata, altfel nu o't de lucru.

Comentarii (0)