HTML: Erstellen und Hinzufügen eines Favicons. Welche Symbole sollten Sie zu Hause haben, wie Sie sie richtig platzieren und wo Sie die Symbole platzieren

Favicon (Favicon ist die Abkürzung für Favorite Icon) ist ein Symbol, das auch als Verknüpfung, Website-Symbol oder Lesezeichen-Symbol bekannt ist. Favicon ist normal grafisches Bild(Bild), das mit einer bestimmten Webseite oder Website verknüpft ist. Browser, die das Hinzufügen eines Favicons unterstützen, zeigen es normalerweise in der Adressleiste und in den Registerkarten neben dem Seitentitel an. Einige Browser verwenden es als Symbol für eine auf dem Desktop gespeicherte Verknüpfung. Suchmaschine Yandex legt großen Wert auf das Favicon und zeigt es zusammen mit den Suchergebnissen an.

Schaffung

Sie können fast jeden Grafikeditor verwenden, um ein Favicon zu erstellen. Das von Ihnen gewählte Bildformat muss jedoch 16 x 16, 32 x 32 oder 64 x 64 Pixel und 8-Bit- oder 24-Bit-Farbe sein. Das Bild muss eine PNG- (W3C-Standard), GIF- oder ICO-Erweiterung haben.

Beim Erstellen eines Bildes sollten Sie auf folgende Nuancen achten:

• Das Favicon sollte im gleichen Stil wie die Website gestaltet sein, da es eine Art Visitenkarte Ihres Projekts ist.
• Das Bild, das Sie als Favicon verwenden möchten, sollte äußerst einfach zu verstehen sein. Verwenden Sie besser nur wenige Elemente.
• Stellen Sie sicher, dass das Favicon die Essenz Ihrer Website, Ihres Unternehmens oder Ihres Projekts so gut wie möglich vermittelt.
• Besser ist es, ein Bild so zu gestalten, dass es bei den Besuchern Ihrer Seite Assoziationen weckt. Zum Beispiel ein Telefonsymbol für einen Mobiltelefonladen.

Ein Beispiel für ein Programm, mit dem Sie Symbole erstellen können, ist Favicon Create (Download) – das einfachste Programm. Um ein Symbol zu erstellen, benötigen Sie lediglich ein normales Bild im *.jpg- oder *.bmp-Format, das in jedem beliebigen Format erstellt werden kann Grafikeditor, sogar im gleichen Lack. Laden Sie das Bild in das Programm, wählen Sie dann Größe und Farbtiefe aus und drücken Sie die Starttaste. Alles ist fertig.

Ein Favicon hinzufügen

Um ein Favicon zu einer Webseite am Anfang eines HTML-Dokuments hinzuzufügen, müssen Sie nur eine Zeile mit dem Tag eingeben , in dem wir das rel-Attribut angeben müssen, das dem Browser anzeigt, dass wir ein Symbol hinzufügen, das href-Attribut, das die Adresse unseres Bildes enthält, und das type-Attribut, das angibt, welches Bildformat wir verwenden:

Hinweis: Bitte beachten Sie, dass Sie für jede Webseite oder für jeden Abschnitt der Website ein eigenes Favicon angeben können.

Die Tabelle zeigt Verschiedene Optionen Hinzufügen eines Favicons und Bereitstellen von Browserunterstützung:

Unterschätzen Sie nicht die Bedeutung eines Favicons, insbesondere heute, wo es im Internet Milliarden von Websites und Seiten gibt, von denen einige Ihre Konkurrenten sind. Das Site-Symbol trägt ebenso wie das Logo zu seiner Einprägsamkeit und Wiedererkennung bei. Nicht zu vermissen zusätzliche Möglichkeit, verbessern Sie Ihre Ressource.

ICO-Format und andere Grafiksymbolformate. Installieren eines Favicons auf einer Website mit Unterstützung für iOS, Android und andere Geräte sowie neue HTML5-Produkte. Schritt-für-Schritt-Anleitung, von einfach bis komplex, zugänglich und klar, für unerfahrene Webmaster.

Sie haben wahrscheinlich schon etwas über das Format gehört ICO und ein Symbol für die Website Favicon, aber nichts steht still und es entsteht ständig etwas Neues. Ich habe mich entschieden, diesen Artikel zu schreiben, um nicht nur alles Bekannte zusammenzufassen, sondern es auch durch Neues zu ergänzen.

So lernen Sie einige Geheimnisse des ICO-Formats, Probleme mit dem Internet Explorer und deren Beseitigung sowie neue Favicon-Grafikformate kennen (transparent und animiert), HTML5-Standards und Symbole für mobile Geräte für iOS und Android und vieles mehr.

• ICO-Format
• Datei favicon.ico
• BugFix für Internet Explorer
• Favicon in HTML5
• Favicon für Apple
• Favicon für Android
• Adresse der Datei favicon.ico

ICO-Format

Lassen Sie mich mit der Tatsache beginnen, dass das Format ICO(Windows-Symbol) wurde entwickelt von Microsoft für Dateisymbole. Es ähnelt dem Format CUR(Windows-Cursor) und ist am nächsten dran BMP. Der einzige Unterschied besteht in den Überschriften sowie im Vorhandensein einer Maske, mit der Sie Transparenz in den Zeichnungen erzeugen können. Jedoch Alphakanal (Transluzenz) für 32-Bit-Symbole erschienen nur in Windows XP.

Datei favicon.ico

Dateiidee favicon.ico (Bild 16x16 Pixel) gehört ebenfalls zu Microsoft und wurde für Lesezeichen im Internet Explorer 5 implementiert. Daher der Name Favorit- Abkürzung für Favorit – Favoriten und Symbol – Symbol. An dieser Moment Dieses Format wird von allen gängigen Browsern unterstützt, aber der Schlüssel liegt im Detail. Bedingt verallgemeinerte Version Die Installation eines Favicons auf einer Website sieht folgendermaßen aus:

Bitte beachten Sie, dass im obigen Beispiel zwei Beziehungen verwendet werden: Shortcut (aus dem Englischen. Etikett) und Symbol (aus dem Englischen. Symbol). Der Trick besteht darin, dass shortcat hier überflüssig ist und nur für ältere Versionen des Internet Explorers übrig blieb, aber vor icon stehen muss.

image/vnd.microsoft.icon vs. image/x-icon?

Interessant ist auch, dass im Jahr 2003 das Format ICO wurde registriert Simon Butcher(Simon Butcher) in IANA und sein MIME-Typ wurde image/vnd.microsoft.icon. Das Problem besteht darin, dass ältere Versionen von Internet Explorer es nicht richtig interpretieren können. Daher ist es besser, das alte image/x-icon zu verwenden.

BugFix für Internet Explorer

Vergessen Sie nicht, dass Sie für Internet Explorer HTML-Krücken verwenden können, die auf Kommentaren basieren, zum Beispiel:

Favicon für andere Grafikformate

Allerdings ist jetzt die Integration anderer Grafikformate: PNG, GIF, JPEG, APNG und SVG. Am besten ist die Situation bei statischen Formaten PNG Und GIF, sie werden von allen neuen Versionen gängiger Browser unterstützt. Animiert APNG Funktioniert nur in Firefox (seit Version 3.0) und Oper (ab Version 9.5), und hier ist die animierte Version GIF Nur IE und Safari verstehen es nicht. JPEG Nur der Internet Explorer wird nicht unterstützt.

Ich werde einige korrekte Beispiele für das Einfügen von Favicons in geeigneten Formaten auf einer Website geben:

Ich mache Sie darauf aufmerksam, dass für APNG verwendet den MIME-Typ video/png und für GIF (sogar animiert)- Bild/GIF. Interessant ist hier auch der MIME-Typ für SVG Format, das ist image/svg+xml .

Favicon in HTML5

Nun zum Favicon-Format HTML5, mehr lesen. Das Interessante hier ist das Größenattribut, das die Größe der Symbole für die visuelle Anzeige im Format festlegt:

(Breite1) X (Höhe1) [(BreiteN) X (HöheN)] | beliebig

Mit anderen Worten: Sie können die entsprechenden Größen durch Leerzeichen getrennt auflisten oder den Wert any (für alle) angeben. Die HTML5-Dokumentation enthält dieses Beispiel:

Favicon.ico für mobile Browser

Das Problem besteht darin, dass das Größenattribut derzeit von keinem der gängigen Browser unterstützt wird. Etwas anders sieht es bei mobilen Browsern aus.

Favicon für Apple

Wenn das Größenattribut nicht angegeben ist, wird der Standardwert verwendet 57x57.

Bemerkenswert ist auch das Wie favicon.ico dient als automatisch erkanntes Icon für die Seite, ohne auf eine Verbindung hinzuweisen, folgende Namen werden automatisch erkannt:

• Apple-Touch-Icon-57×57.png
• Apple-Touch-Icon-72×72.png
• Apple-Touch-Icon-114×114.png
• Apple-Touch-Icon-144×144.png

Wenn Sie möchten, dass iOS keine hinzufügt Auswirkungen, verwenden Stichwort vorkomponiert, zum Beispiel:

Hier gibt es auch eine Reihe automatisch erkannter Namen:

• apple-touch-icon-57×57-precomposed.png
• apple-touch-icon-72×72-precomposed.png
• apple-touch-icon-114×114-precomposed.png
• apple-touch-icon-144×144-precomposed.png

Favicon für Android

Browserbasiert Android hat das Apple-Format geerbt. Im Wesentlichen reicht es aus, etwa Folgendes anzugeben:

Adresse der Datei favicon.ico

Ihnen ist wahrscheinlich aufgefallen, dass in manchen Beispielen ein Verwandter statt eines Favicons verwendet wird? Das ist kein Zufall, denn Neben HTTP gewinnt mittlerweile auch HTTPS an Bedeutung. Um Probleme zu vermeiden, ist es einfacher, das Protokoll nicht in einer absoluten Adresse anzugeben, zum Beispiel:

oder verwenden Sie einen relativen Pfad.

Wie installiere ich ein Favicon-Symbol auf einer Website?

Nun, jetzt versuchen wir es zu formen eine verallgemeinerte Version des Einfügens einer Favicon-Website, ich habe es so hinbekommen:

Ich werde versuchen, den vorgeschlagenen Entwurf zu klären. Am Anfang steht ein Favicon für den Internet Explorer, das auf eine Verknüpfung reagiert. Darüber hinaus wird die optimale statische sein PNG Symbol mit Transparenz und Symbolanimation Ich gab GIF Format. Wir erstellen Icons für mobile Geräte Standardgröße 57x57 Pixel, eines ohne Effekte und das andere mit eigenen Effekten (vorkomponiert – deaktiviert Browsereffekte). Um Probleme mit HTTP und HTTPS zu vermeiden, habe ich angegeben relativer Pfad, beginnend im Stammverzeichnis der Site (/ - am Anfang der Adresse), aber für den IE ist es wahrscheinlich besser, einen absoluten Pfad zu verwenden.

Das ist alles was ich habe. Ich hoffe, dass der Artikel für Sie nützlich war. Wenn Sie Korrekturen, Ergänzungen, Klarstellungen usw. vornehmen können. - schreiben. Vielen Dank für Ihre Aufmerksamkeit. Viel Glück!

Anweisungen

Wenn Sie einen kurzen Blick auf Ihren Desktop werfen (), sehen Sie viele Ordner und Verknüpfungen – das sind Desktop-Elemente. Jedes dieser Elemente kann geändert werden, d.h. Symbol ersetzen. Es reicht aus, über Grundkenntnisse zu verfügen, um Symbole darauf zu platzieren Betriebssysteme ah Windows-Zeile. Suchen Sie im Ordner nach einer beliebigen Datei, die Sie vom Desktop aus starten möchten, klicken Sie mit der rechten Maustaste darauf, wählen Sie „Senden an“ und dann „Desktop (Verknüpfung erstellen)“. Dadurch erscheint auf dem Desktop eine Verknüpfung, deren grafische Grundlage .

Um Anzeigeeinstellungen für die erstellte Verknüpfung zu ändern, klicken Sie mit der rechten Maustaste auf das Objekt und wählen Sie „Eigenschaften“. Gehen Sie im sich öffnenden Fenster zur Registerkarte „Verknüpfung“ und klicken Sie auf die Schaltfläche „Symbol ändern“.

Wählen Sie im sich öffnenden Fenster „Symbol ändern“ ein beliebiges vom System angebotenes Symbol aus oder versuchen Sie, Ihr eigenes als Symbol festzulegen. Klicken Sie dazu auf die Schaltfläche „Durchsuchen“, geben Sie den Pfad zum Bild an und klicken Sie auf die Schaltfläche „Öffnen“. Operationssaal Windows-System erkennt Dateien mit der Erweiterung ico als Symbole. Solche Dateien können mit erstellt werden spezielle Programme, oder Sie können versuchen, es selbst zu tun. Um Ihr eigenes Symbol zu erstellen, müssen Sie ein geeignetes Bild finden und dabei berücksichtigen, dass es klein sein wird. Symboldateien können 16, 32 und 48 Pixel breit (Höhe) sein.

Offen Malprogramm, das im Standardprogrammsatz für Windows-Betriebssysteme enthalten ist. Klicken Sie auf das Startmenü, wählen Sie „Ausführen“, geben Sie „mspaint“ in das sich öffnende Fenster ein und klicken Sie auf „OK“. Drücken Sie im Hauptprogrammfenster die Tastenkombination Strg + O und wählen Sie die für das zukünftige Symbol geeignete Datei aus.

Drücken Sie nun die Tastenkombination Strg + W, das Fenster „Stretch and Skew“ erscheint vor Ihnen. Hier müssen Sie den Prozentwert angeben, um den Sie das Bild verkleinern möchten. Abhängig von der Größe Ihres Bildes können die Prozentsätze steigen oder fallen. Erstmals können Sie beide Werte auf 50 % setzen. Drücken Sie die Tastenkombination Strg + E und überprüfen Sie die Größe Ihres Bildes. Zunächst können Sie versuchen, die größte Größe für das Symbol zu erreichen – 48 Pixel. Wenn Ihr Wert viel größer ist, versuchen Sie, das Bild erneut zu verkleinern, indem Sie Strg + W drücken.

Nachdem Sie das gewünschte Ergebnis erzielt haben, müssen Sie nur noch die Datei speichern. Drücken Sie die Tastenkombination Strg + S und klicken Sie auf die Schaltfläche „Speichern“. Um eine Datei mit einer Standard-BMP-Erweiterung in eine ICO-Datei (Symbol oder Symbol) umzuwandeln, müssen Sie sie mit umbenennen Dateimanager Totaler Kommandant oder indem Sie die Anzeige von Erweiterungen auf Ihrem System aktivieren. Die benötigte Datei wurde empfangen. Verwenden Sie die im zweiten Schritt beschriebene Methode, um das Symbol zu ändern.

Favicon- Hierbei handelt es sich um ein kleines Bild mit den Maßen 16x16 (bzw. 32x32) Pixel, das sich im Browser links neben der Adressleiste befindet. Aus irgendeinem Grund gibt es nicht viele Leute Fügen Sie Favicon zu Ihren Websites hinzu. Meiner Meinung nach verpassen sie viel. Zum Beispiel in Yandex Site-Symbole werden angezeigt, und die Leute klicken viel häufiger auf solche Sites als auf solche, bei denen dies nicht der Fall ist Favicon. Meiner Meinung nach erhöht es auch leicht die Autorität der Website. Im Allgemeinen sind wir in diesem Artikel Installieren Sie das Favicon auf der Website.

Zunächst einmal: Wie Favicon finden. Erstens können Sie es selbst erstellen. Sehr guter Service favicon.cc. Damit sind Sie direkt online Erstellen Sie sich ein Favicon. Sie können auch vorgefertigte Kollektionen nutzen und diejenige auswählen, die zu Ihnen passt. Am einfachsten geht es mit der Such- und Abfragefunktion: „ Favicon-Sammlung„Ich denke, dass Ihnen bereits die erste Seite tausende verschiedene zeigen wird Favicon, und Sie müssen es nur noch auswählen.

Nun der zweite Schritt – Favicon auf der Website installieren. Fügen Sie dazu innerhalb des Tags hinzu nächste Zeile:

Ich rate Ihnen zu posten Favicon direkt zum Stammverzeichnis der Website. Wenn Sie sich entscheiden, es an einem anderen Ort zu platzieren, ändern Sie entsprechend den Wert des Attributs „ href".

Nach dem Aktualisieren der Seite sehen Sie Ihre Favicon neben Ihrer Website-Adresse.

Manchmal Favicon erscheint nicht sofort. Normalerweise ist Browser-Caching schuld. Wenn das Bild fehlt, versuchen Sie daher, den Browser-Cache zu leeren (dies sollte in den Einstellungen sein). Möglicherweise hilft auch ein Neustart des Browsers. Aber ich sage es noch einmal: Wenn Sie alles richtig gemacht haben, dann Das Favicon wird auf Ihrer Website angezeigt.

Die einfachste Sortiermethode, bei der sich beliebte Anwendungen auf dem Hauptbildschirm oder näher daran befinden und gestartete Anwendungen selten auf den letzten Seiten erscheinen.

Vorteile: Die Apps, die Sie benötigen, haben Sie immer zur Hand.

Mängel: Wenn es viele Anwendungen gibt, dauert es länger, die benötigte Anwendung zu finden und zu starten.

2. Ordner nach Kategorie

Seit dem Erscheinen von Ordnern in iOS hat Gott selbst befohlen, sie zum Sortieren zu verwenden. Am logischsten ist es, sie nach Themen zu gruppieren. „Internet“, „Sport“, „Büro“, „Spiele“ – das System selbst schlägt Namen für die Kombination zweier ähnlicher Anwendungen vor. Normalerweise wird alles in Ordnern auf dem zweiten Bildschirm abgelegt, und der erste schafft Platz für gängigere Programme.

Vorteile: Kann eine große Anzahl von Anwendungen auf kompakte Weise unterbringen.

Mängel: Suchschwierigkeit und eine zusätzliche Aktion zum Auslösen.

3. Aktionsordner

Im Gegensatz zur vorherigen verwendet diese Methode den Zweck von Anwendungen – die Aktionen, zu deren Ausführung sie beitragen – als Sortierkriterium. Der Ordner „Read“ enthält beispielsweise iBooks, Reeder und Pocket, der Ordner „Listen“ enthält Spotify, „Podcasts“ und „Music“ und der Ordner „Play“ enthält Spiele.

Sie müssen sich nicht um Namen und Verwendung kümmern. So passen nicht nur eine, sondern mehrere Aktionen problemlos in eine Signatur.

Vorteile: einfache Wahrnehmung und minimale Suchzeit.

Mängel: Möglicherweise sind zu viele Ordner vorhanden und einige Anwendungen eignen sich möglicherweise für mehrere davon gleichzeitig.

4. Ordner auf einem Bildschirm

Der Kern dieser Methode ist der bewusste Verzicht auf die Verwendung mehrerer Desktops, um alles auf dem Hauptbildschirm zu platzieren. Sie müssen versuchen, die Anwendungen so zu gruppieren, dass sie in den verfügbaren Platz passen. Aber dann müssen Sie nicht durchblättern – öffnen Sie einfach einen der Ordner und führen Sie ihn aus die richtige Anwendung.

Vorteile: maximale Kompaktheit.

Mängel: Es ist ziemlich schwierig, alle Anwendungen in mehreren Ordnern zu gruppieren.

5. Nach Themen ohne Ordner

Trotz aller Vorteile von Ordnern ist es manchmal einfacher, ein paar Mal zu wischen und das Gesuchte zu finden, während man alle Anwendungen vor Augen hat. Dazu müssen sie alle in Zeilen oder Spalten gruppiert werden.

Vorteile: Klarere visuelle Wahrnehmung und schnellere Suche.

Mängel: Es ist fast unmöglich, die notwendigen Anwendungen auf 2-3 Desktops unterzubringen; Sie erstrecken sich über 5–7 Bildschirme.

6. Minimalismus

Eine gute Möglichkeit, das Auffinden von Anwendungen zu erleichtern und Ihren Desktop attraktiver zu gestalten. Allerdings ist es nur für diejenigen geeignet, die so wenig haben installierte Anwendungen dass sie auf 1–2 Bildschirmen platziert werden können.

Vorteile: schön und klar.

Mängel: Nutzlos, wenn es mehr als zwanzig Anwendungen gibt.

7. Alphabetisch

Die strengste Methode für diejenigen, die zu faul sind, Bewerbungen in irgendeiner Weise zu sortieren. Es wird standardmäßig in iOS verwendet. Wenn Sie den Namen der Anwendung kennen, wird es nicht schwierig sein, sie zu finden. Um diese Art der Sortierung zu aktivieren, öffnen Sie „Einstellungen“ → „Allgemein“ → „Zurücksetzen“, wählen Sie „Home-Einstellungen zurücksetzen“ und bestätigen Sie die Aktion.

Vorteile: strenge Ordnung.

Mängel: Die Notwendigkeit, durch Desktops zu scrollen und sich Anwendungsnamen zu merken.

8. Nach Farbe

Die exotischste Sortiermethode, deren Kern darin besteht, benachbarte Symbole nach Farbe auszuwählen. Es wird Ästheten und Menschen mit einem guten visuellen Gedächtnis ansprechen, da Sie nach einer solchen Sortierung ausschließlich nach Farben nach Anwendungen suchen müssen.

Vorteile: sehr hübsch.

Mängel: fast nutzlos. Es wird ziemlich schwierig, die richtige Anwendung zu finden.

9. Kombinierte Methode

Schließlich kamen wir zu den häufigsten und häufigsten bequeme Weise Sortierung. Alle oben genannten Optionen zum Gruppieren von Anwendungen sind gut, aber sehr radikal.

Warum zu solchen Extremen gehen, wenn Sie das Beste aus jedem von ihnen herausholen und die am häufigsten verwendeten auf dem Hauptbildschirm platzieren, einen Ordner mit Programmen zum gleichen Thema im Dock platzieren und innerhalb eines Ordners Anwendungen nach Symbolfarben oder anordnen können Zweck.

Vorteile: die Fähigkeit, sich selbst zu verfeinern.

Mängel: Das Auffinden von Apps dauert im Vergleich zu präziseren Sortiermethoden länger.

So sorgen Sie für Ordnung auf Ihrem Schreibtisch

Für welche Methode Sie sich auch entscheiden, vergessen Sie nicht, für Ordnung zu sorgen. Das geht ganz einfach. Es reicht aus, einfache Regeln zu befolgen:

1. Erstellen Sie nicht mehr als drei Desktops, da das Scrollen durch die Bildschirme sonst viel Zeit in Anspruch nimmt.
2. Löschen Sie einmal im Monat Apps, die Sie nicht verwenden. Es wird weniger Symbole und mehr Ordnung geben. Auch .
3. Vergessen Sie nicht zu suchen. Wenn Sie auf einem beliebigen Bildschirm nach unten wischen, wird Spotlight geöffnet, wo Sie die gewünschte Anwendung leicht finden können, indem Sie nur ein paar Zeichen eingeben.