Href favicon ico: html — Do you have to include ?

Содержание

Вам нужно включить ?

Я не включил следующую строку кода в свой заголовок, но мой значок еще отображается в моем браузере:

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

Какова цель его включения?

Ответ 1

Если вы не вызываете favicon, favicon.ico, вы можете использовать этот тег для указания фактического пути (если вы его используете в каталоге images/). В браузере/веб-странице по умолчанию используется favicon.ico в корневом каталоге.

Ответ 2

Вы должны сделать то и другое, чтобы все браузеры нашли значок.

Называя файл «favicon.ico» и помещая его в корень вашего сайта, метод «не рекомендуется» W3C:

Способ 2 (не рекомендуется): добавление значка в предварительно определенный URI
Второй метод указания значка основан на использовании предопределенного URI для идентификации изображения: «/favicon», который относится к корню сервера.

Этот метод работает, потому что некоторые браузеры были запрограммированы на поиск значков с использованием этого URI.
W3C — Как добавить иконку на свой сайт

Поэтому, чтобы охватить все ситуации, я всегда делаю это в дополнение к рекомендованному способу добавления атрибута rel и указания его на один и тот же файл .ico.

Ответ 3

Я использую его по двум причинам:

  • Я могу принудительно обновить значок, добавив параметр запроса, например ?v=2. как это: <link rel="icon" href="/favicon.ico?v=2" type="image/x-icon" />

  • В случае, если мне нужно указать путь.

Ответ 4

Просто добавление его в корневую папку работает после моды, но я обнаружил, что если мне нужно изменить значок, для обновления может потребоваться несколько дней… даже обновление кеша не делает трюк.

Ответ 5

Многие люди устанавливают путь к файлам cookie в /. Это приведет к тому, что каждый запрос favicon будет отправлять копии файлов cookie сайтов, по крайней мере, в Chrome. Адресация избранного в вашем домене без файлов cookie должна исправить это.

<link rel="icon" href="https://cookieless.MySite.com/favicon.ico" type="image/x-icon" />

В зависимости от того, сколько трафика вы получаете, это может быть наиболее практичной причиной для добавления ссылки.

Информация о настройке домена без файлов cookie:

http://www.ravelrumba.com/blog/static-cookieless-domain/

Ответ 6

У меня было три причины, чтобы включить ссылку.

  1. У меня есть сайт WordPress в корне. И я хотел развернуть react сборку в подкаталоге. Поэтому я не мог поместить favicon.ico в корневой каталог, и мне пришлось добавить ссылку, чтобы он работал.
  2. Я не хотел использовать .ico и работал с .png.
  3. Я бы предпочел добавить несколько размеров, чтобы дать выбор для устройства рендеринга.

Итак, я закончил с чем-то вроде этого,

<link rel="icon" type="image/png"   href="favicon-48.png">
<link rel="icon" type="image/png"   href="favicon-96.png">
<link rel="icon" type="image/png" href="favicon-144.png">
<link rel="icon" type="image/png" href="favicon-192.png">
<link rel="icon" type="image/png" href="favicon-256.png">
<link rel="icon" type="image/png" href="favicon-384.png">
<link rel="icon" type="image/png" href="favicon-512.png">

html — Почему мой значок не работает на сервере, а работает локально?

Новинка для веб-разработчиков. У меня есть значок, который работает локально, но не хочет работать на сервере. Вот мой тег favicon в теге head:

<link rel="icon" type="image/png" href="../favicon/microphone-icon-192783/microphone-icon-16-192783.ico"/>

Мне что-то не хватает для сервера?

8

J.S. Orris 6 Дек 2014 в 18:35

8 ответов

Лучший ответ

Просто загрузите значок в корневой каталог и назовите его «favicon.ico». Поместив его в корневой каталог, вы получите значок по умолчанию для всех страниц в вашем домене.

В зависимости от используемого вами браузера вы можете добавить следующие две строки в заголовок своих страниц.

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

8

Stan 6 Дек 2014 в 16:54

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

Если значок на веб-странице по-прежнему не обновляется, ПЕРЕЗАГРУЗИТЕ БРАУЗЕР .

0

SKJ 31 Окт 2020 в 17:40

Убедитесь, что для папки с изображением значка на сервере заданы разрешения 0755 .

0

sohal07 17 Сен 2018 в 15:23

Вы можете попробовать <link href="/favicon.ico" rel="shortcut icon">, где ‘/’ означает абсолютный корневой путь … (корневой каталог)

0

Denis Solakovic 21 Дек 2015 в 15:18

Вы можете попробовать удалить ../ вот так.

<link rel="icon" type="image/png" href="favicon/microphone-icon-192783/microphone-icon-16-192783.ico"/>

Но можем ли мы указать путь к файлу в соответствии с корнем сервера, если это не решит проблему? Так проще найти решение 🙂

0

Thaillie 6 Дек 2014 в 16:22

Попробуйте загрузить значок где-нибудь в Интернете и связать его с URL-адресом изображения. Я помню, что у меня были проблемы с доступом к фоновому изображению на локальном компьютере, но если я пытался связать его из Интернета, у меня не было проблем. Я думаю, что это должно помочь. Но не использовал.

0

Arpad Gabor 6 Дек 2014 в 16:21

Создайте файл PNG и установите его в качестве значка на странице index.html, чтобы кеш был перезаписан: <html><head><link rel='icon' type='image/png' href='favicon.png' /></head></html>

Оно работает.

2

rutva patel 12 Сен 2017 в 13:14

Старый вопрос, но для тех, кто сталкивался с той же проблемой, что и я ..

Потратил около часа, пытаясь выяснить, почему я столкнулся с той же проблемой. Очистка истории, обновление кода не помогли.

Перезапустил браузер Chrome и сразу заработал ахах

9

jazz 16 Дек 2017 в 22:34

Россия напала на Украину!

Россия напала на Украину!

Мы, украинцы, надеемся, что вы уже знаете об этом. Ради ваших детей и какой-либо надежды на свет в конце этого ада –  пожалуйста, дочитайте наше письмо .

Всем нам, украинцам, россиянам и всему миру правительство России врало последние два месяца. Нам говорили, что войска на границе “проходят учения”, что “Россия никого не собирается захватывать”, “их уже отводят”, а мирное население Украины “просто смотрит пропаганду”. Мы очень хотели верить вам.

Но в ночь на 24-ое февраля Россия напала на Украину, и все самые худшие предсказания

 стали нашей реальностью .

Киев, ул. Кошица 7а. 25.02.2022

 Это не 1941, это сегодня. Это сейчас. 
Больше 5 000 русских солдат убито в не своей и никому не нужной войне
Более 300 мирных украинских жителей погибли
Более 2 000 мирных людей ранено

Под Киевом горит нефтебаза – утро 27 февраля, 2022.

Нам искренне больно от ваших постов в соцсетях о том, что это “все сняли заранее” и “нарисовали”, но мы, к сожалению, вас понимаем.

Неделю назад никто из нас не поверил бы, что такое может произойти в 2022.

Метро Киева, Украина — с 25 февраля по сей день

Мы вряд ли найдем хоть одного человека на Земле, которому станет от нее лучше. Три тысячи ваших солдат, чьих-то детей, уже погибли за эти три дня. Мы не хотим этих смертей, но не можем не оборонять свою страну.

И мы все еще хотим верить, что вам так же жутко от этого безумия, которое остановило всю нашу жизнь.

Нам очень нужен ваш голос и смелость, потому что сейчас эту войну можете остановить только вы. Это страшно, но единственное, что будет иметь значение после – кто остался человеком.

ул. Лобановского 6а, Киев, Украина. 26.02.2022

Это дом в центре Киева, а не фото 11-го сентября. Еще неделю назад здесь была кофейня, отделение почты и курсы английского, и люди в этом доме жили свою обычную жизнь, как живете ее вы.

P.S. К сожалению, это не “фотошоп от Пентагона”, как вам говорят. И да, в этих квартирах находились люди.

«Это не война, а только спец. операция.»

Это война.

Война – это вооруженный конфликт, цель которого – навязать свою волю: свергнуть правительство, заставить никогда не вступить в НАТО, отобрать часть территории, и другие. Обо всем этом открыто заявляет Владимир Путин в каждом своем обращении.

«Россия хочет только защитить ЛНР и ДНР.»

Это не так.

Все это время идет обстрел городов во всех областях Украины, вторые сутки украинские военные борются за Киев.

На карте Украины вы легко увидите, что Львов, Ивано-Франковск или Луцк – это больше 1,000 км от ЛНР и ДНР. Это другой конец страны. 25 февраля, 2022 – места попадания ракет

25 февраля, 2022 – места попадания ракет «Мирных жителей это не коснется.»

Уже коснулось.

Касается каждого из нас, каждую секунду. С ночи четверга никто из украинцев не может спать, потому что вокруг сирены и взрывы. Тысячи семей должны были бросить свои родные города.
Снаряды попадают в наши жилые дома.

Больше 1,200 мирных людей ранены или погибли. Среди них много детей.
Под обстрелы уже попадали в детские садики и больницы.
Мы вынуждены ночевать на станциях метро, боясь обвалов наших домов.
Наши жены рожают здесь детей. Наши питомцы пугаются взрывов.

«У российских войск нет потерь.»

Ваши соотечественники гибнут тысячами.

Нет более мотивированной армии чем та, что сражается за свою землю.
Мы на своей земле, и мы даем жесткий отпор каждому, кто приходит к нам с оружием.

«В Украине – геноцид русскоязычного народа, а Россия его спасает.»

Большинство из тех, кто сейчас пишет вам это письмо, всю жизнь говорят на русском, живя в Украине.

Говорят в семье, с друзьями и на работе. Нас никогда и никак не притесняли.

Единственное, из-за чего мы хотим перестать говорить на русском сейчас – это то, что на русском лжецы в вашем правительстве приказали разрушить и захватить нашу любимую страну.

«Украина во власти нацистов и их нужно уничтожить.»

Сейчас у власти президент, за которого проголосовало три четверти населения Украины на свободных выборах в 2019 году. Как у любой власти, у нас есть оппозиция. Но мы не избавляемся от неугодных, убивая их или пришивая им уголовные дела.

У нас нет места диктатуре, и мы показали это всему миру в 2013 году. Мы не боимся говорить вслух, и нам точно не нужна ваша помощь в этом вопросе.

Украинские семьи потеряли больше 1,377,000 родных, борясь с нацизмом во время Второй мировой. Мы никогда не выберем нацизм, фашизм или национализм, как наш путь. И нам не верится, что вы сами можете всерьез так думать.

«Украинцы это заслужили.»

Мы у себя дома, на своей земле.

Украина никогда за всю историю не нападала на Россию и не хотела вам зла. Ваши войска напали на наши мирные города. Если вы действительно считаете, что для этого есть оправдание – нам жаль.

Мы не хотим ни минуты этой войны и ни одной бессмысленной смерти. Но мы не отдадим вам наш дом и не простим молчания, с которым вы смотрите на этот ночной кошмар.

Искренне ваш, Народ Украины

Россия напала на Украину!

Россия напала на Украину!

Мы, украинцы, надеемся, что вы уже знаете об этом. Ради ваших детей и какой-либо надежды на свет в конце этого ада –  пожалуйста, дочитайте наше письмо .

Всем нам, украинцам, россиянам и всему миру правительство России врало последние два месяца. Нам говорили, что войска на границе “проходят учения”, что “Россия никого не собирается захватывать”, “их уже отводят”, а мирное население Украины “просто смотрит пропаганду”. Мы очень хотели верить вам.

Но в ночь на 24-ое февраля Россия напала на Украину, и все самые худшие предсказания  стали нашей реальностью .

Киев, ул. Кошица 7а. 25.02.2022

 Это не 1941, это сегодня. Это сейчас. 
Больше 5 000 русских солдат убито в не своей и никому не нужной войне
Более 300 мирных украинских жителей погибли
Более 2 000 мирных людей ранено

Под Киевом горит нефтебаза – утро 27 февраля, 2022.

Нам искренне больно от ваших постов в соцсетях о том, что это “все сняли заранее” и “нарисовали”, но мы, к сожалению, вас понимаем.

Неделю назад никто из нас не поверил бы, что такое может произойти в 2022.

Метро Киева, Украина — с 25 февраля по сей день

Мы вряд ли найдем хоть одного человека на Земле, которому станет от нее лучше. Три тысячи ваших солдат, чьих-то детей, уже погибли за эти три дня. Мы не хотим этих смертей, но не можем не оборонять свою страну.

И мы все еще хотим верить, что вам так же жутко от этого безумия, которое остановило всю нашу жизнь.

Нам очень нужен ваш голос и смелость, потому что сейчас эту войну можете остановить только вы. Это страшно, но единственное, что будет иметь значение после – кто остался человеком.

ул. Лобановского 6а, Киев, Украина. 26.02.2022

Это дом в центре Киева, а не фото 11-го сентября. Еще неделю назад здесь была кофейня, отделение почты и курсы английского, и люди в этом доме жили свою обычную жизнь, как живете ее вы.

P.S. К сожалению, это не “фотошоп от Пентагона”, как вам говорят. И да, в этих квартирах находились люди.

«Это не война, а только спец. операция.»

Это война.

Война – это вооруженный конфликт, цель которого – навязать свою волю: свергнуть правительство, заставить никогда не вступить в НАТО, отобрать часть территории, и другие. Обо всем этом открыто заявляет Владимир Путин в каждом своем обращении.

«Россия хочет только защитить ЛНР и ДНР.»

Это не так.

Все это время идет обстрел городов во всех областях Украины, вторые сутки украинские военные борются за Киев.

На карте Украины вы легко увидите, что Львов, Ивано-Франковск или Луцк – это больше 1,000 км от ЛНР и ДНР. Это другой конец страны. 25 февраля, 2022 – места попадания ракет

25 февраля, 2022 – места попадания ракет «Мирных жителей это не коснется.»

Уже коснулось.

Касается каждого из нас, каждую секунду. С ночи четверга никто из украинцев не может спать, потому что вокруг сирены и взрывы. Тысячи семей должны были бросить свои родные города.
Снаряды попадают в наши жилые дома.

Больше 1,200 мирных людей ранены или погибли. Среди них много детей.
Под обстрелы уже попадали в детские садики и больницы.
Мы вынуждены ночевать на станциях метро, боясь обвалов наших домов.
Наши жены рожают здесь детей. Наши питомцы пугаются взрывов.

«У российских войск нет потерь.»

Ваши соотечественники гибнут тысячами.

Нет более мотивированной армии чем та, что сражается за свою землю.
Мы на своей земле, и мы даем жесткий отпор каждому, кто приходит к нам с оружием.

«В Украине – геноцид русскоязычного народа, а Россия его спасает.»

Большинство из тех, кто сейчас пишет вам это письмо, всю жизнь говорят на русском, живя в Украине.

Говорят в семье, с друзьями и на работе. Нас никогда и никак не притесняли.

Единственное, из-за чего мы хотим перестать говорить на русском сейчас – это то, что на русском лжецы в вашем правительстве приказали разрушить и захватить нашу любимую страну.

«Украина во власти нацистов и их нужно уничтожить.»

Сейчас у власти президент, за которого проголосовало три четверти населения Украины на свободных выборах в 2019 году. Как у любой власти, у нас есть оппозиция. Но мы не избавляемся от неугодных, убивая их или пришивая им уголовные дела.

У нас нет места диктатуре, и мы показали это всему миру в 2013 году. Мы не боимся говорить вслух, и нам точно не нужна ваша помощь в этом вопросе.

Украинские семьи потеряли больше 1,377,000 родных, борясь с нацизмом во время Второй мировой. Мы никогда не выберем нацизм, фашизм или национализм, как наш путь. И нам не верится, что вы сами можете всерьез так думать.

«Украинцы это заслужили.»

Мы у себя дома, на своей земле.

Украина никогда за всю историю не нападала на Россию и не хотела вам зла. Ваши войска напали на наши мирные города. Если вы действительно считаете, что для этого есть оправдание – нам жаль.

Мы не хотим ни минуты этой войны и ни одной бессмысленной смерти. Но мы не отдадим вам наш дом и не простим молчания, с которым вы смотрите на этот ночной кошмар.

Искренне ваш, Народ Украины

html — «/favicon.ico» vs

Есть несколько способов создать иконку. Лучший способ для вас зависит от различных факторов:

  • Время, которое вы можете потратить на эту задачу. Для многих это «как можно быстрее».
  • Усилия, которые вы готовы приложить. Например, нарисовать иконку 16×16 вручную для лучшего результата.
  • Конкретные ограничения, такие как поддержка определенного браузера с нечетными спецификациями.

Первый метод: использовать генератор favicon

Если вы хотите сделать работу хорошо и быстро, вы можете использовать генератор favicon . Этот создает изображения и HTML-код для всех основных настольных и мобильных браузеров. Полное раскрытие: я автор этого сайта.

Преимущества такого решения: оно быстрое, и все вопросы совместимости уже были учтены для вас.

Второй способ: создать favicon.ico (только для настольных браузеров)

Как вы предлагаете, вы можете создать файл favicon.ico, который содержит изображения 16×16 и 32×32 (обратите внимание, что Microsoft рекомендует 16×16, 32×32 и 48×48 ).

Затем объявите это в своем HTML-коде:

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

Этот метод будет работать со всеми настольными браузерами, старыми и новыми. Но большинство мобильных браузеров будут игнорировать значок.

О вашем предложении поместить файл favicon.ico в корень и не объявлять его: будьте осторожны, хотя этот метод работает в большинстве браузеров, он не на 100% надежен. Например, Windows Safari не может его найти (предоставлено: этот браузер в Windows почему-то устарел, но вы поняли). Эта техника полезна в сочетании с иконками PNG (для современных браузеров).

Третий метод: создайте favicon.ico, значок PNG и значок Apple Touch (все браузеры)

В своем вопросе вы не упоминаете мобильные браузеры. Большинство из них будут игнорировать файл favicon.ico. Хотя ваш сайт может быть предназначен для настольных браузеров, есть вероятность, что вы не хотите вообще игнорировать мобильные браузеры.

Вы можете добиться хорошей совместимости с:

  • favicon.ico, см. выше.
  • Значок PNG 192×192 для Android Chrome
  • Значок Apple Touch 180×180 (для iPhone 6 Plus; другое устройство будет уменьшать его по мере необходимости).

Объявите их с 

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

Это не полная история, но в большинстве случаев она достаточно хороша.

Как добавить изображение в строку заголовка

Многие веб-страницы добавляют логотип иконки или изображения в строку заголовка. Логотип иконки также называется favicon.

Favicon (иконка быстрого доступа, иконка веб-страницы, URL иконка) — это файл, содержащий одну или несколько маленьких иконок, которые указывают определенную веб-страницу.

Favicon используется в верхнем левом углу страницы. Favicons привлекают внимание и могут стать отличным способом для активности пользователей.

Favicon стандартизирован в HTML 4.01. Стандартная разработка использует элемент link с атрибутом rel в разделе документа <head>, который указывает формат, название и расположение файла. Файл может находится в любом каталоге веб-сайта и иметь любой формат файла изображения (ico, png, jpeg, gif).

  • Чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (ico, jpg, bmp, gif, png). Возможно также использование не квадратного изображения, но выглядеть оно будет не так профессионально.
  • Вам потребуется конвертация изображения в формат .ico. Для этого можно использовать онлайн инструменты.
  • Откройте онлайн инструмент и загрузите файл изображения, после чего изображение будет автоматически конвертировано.
  • Скачайте изображение и сохраните файл .ico на компьютере.
  • Переименуйте файл в favicon.ico,чтобы браузер смог автоматически распознать это название.
  • Скачайте файл в хост, где расположены файлы вашего веб-сайта.
  • Когда файл favicon.ico будет загружен, браузер автоматически выберет и покажет изображение в браузере.
  • Чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (ico, jpg, bmp, gif, png). Возможно также использование не квадратного изображения, но выглядеть оно будет не так профессионально.
  • Загрузите изображение в хост, где расположены файлы вашего веб-сайта.
  • Последним шагом необходимо указать изображение, которое хотите использовать как favicon в коде вашего веб-сайта:

Добавьте следующую ссылку в раздел <head>

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

Если новая иконка не отображается, очистите кэш браузера и попробуйте заново.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Заголовок документа</title>
    <link rel="shortcut icon" href="href="/favicon1.ico">
  </head>
  <body>
    <h2 style = "color: #1c98c9;"> 
      Иконка W3docs 
    </h2>
    <p> 
      Иконка W3docs добавлена в строку заголовка 
    </p>
  </body>
</html>
Попробуйте сами!

Результат


  • Favicon.ico — это название по умолчанию.
  • Размеры иконок должны быть 16×16, 32×32, 48×48, 64×64 или 128×128 пикселей.
  • Иконки должны иметь 8, 24 или 32-битный цвет.
  • Для PNG используйте image/png.
  • Для GIF используйте image/gif.
  • Для JPEG используйте image/gif.
  • Для ICO используйте image/x-icon.
  • Для SVG используйте image/svg+xml
<link rel="icon" href="favicon.gif" type="image/gif">

Для разных платформ размер favicon должен быть изменен:

<table>
  <tbody>
    <tr>
      <th>Platform</th>
      <th>Name</th>
      <th>Rel value</th>
      <th>Favicon size</th>
    </tr>
    <tr>
      <td>Google TV</td>
      <td>favicon.png</td>
      <td>icon</td>
      <td>96×96</td>
    </tr>
    <tr>
      <td>Opera Coast</td>
      <td>favicon-coast.png</td>
      <td>icon</td>
      <td>228×228</td>
    </tr>
    <tr>
      <td>Ipad Retina, iOS 7 or later</td>
      <td>apple-touch-icon-152×152-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>152×152</td>
    </tr>
    <tr>
      <td>Ipad Retina, iOS 6 or later</td>
      <td>apple-touch-icon-144×144-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>144×144</td>
    </tr>
    <tr>
      <td>Ipad Min, first generation iOS 7 or later</td>
      <td>apple-touch-icon-76×76-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>76×76</td>
    </tr>
    <tr>
      <td>Ipad Mini,first generation iOS 6 or previous</td>
      <td>apple-touch-icon-72×72-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>72×72</td>
    </tr>
    <tr>
      <td>Iphone Retina, iOS 7 or later</td>
      <td>apple-touch-icon-120×120-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>120×120</td>
    </tr>
    <tr>
      <td>Iphone Retina, iOS 6 or previous</td>
      <td>apple-touch-icon-114×114-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>114×114</td>
    </tr>
  </tbody>
</table>

Для устройств Apple с операционной системой iOS версия 1.1.3 или выше и для устройств Android можете создать дисплей на главном экране, используя в Safari кнопку Добавить на главный экран (Add to Home Screen). Для разных платформ добавьте ссылку в разделе документа head.

Смотрите, как можете добавить ее в ваш код.

<!-- default favicon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- wideley used favicon -->
<link rel="icon" href="/favicon.png" type="image/png">
<!-- for apple mobile devices -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png">
<!-- google tv favicon -->
<link rel="icon" href="/favicon-googletv.png" type="image/png">

Фавикон. HTML. Страницы веб-страниц HTML и стилей CSS. Бартоломе Синтес Марко. www.mclibre.org

Qué es un favicon

фавикон

Un favicon es la pequeña imagen Que se muestra en la pestaña del navegador или en la lista de marcadores (favoritos). En la barra de dirección, el tamaño del favicon es bastante reducido, 16×16 пикселей, pero en otros lugares como los marcadores puede tener un tamaño mayor (24×24, 32×32, 48×48 или 64×64).


Учебник по навигации по фавиконам Internet Explorer 5 (опубликован в 1999 г.). Internet Explorer использует формат ICO для Windows, который позволяет хранить различные изображения разных типов в едином архиве .ico.

Con el paso del tiempo, otros navegadores разрешает использование других форматов изображений (GIF, PNG, SVG и т. д.), pero este es un anspecto que todavía no está completamente resuelto. Например, вы можете использовать значки навигации в формате PNG (), чтобы использовать формат SVG, который действительно используется (октябрь 2019 г.) Firefox ().

IANA определяет в 2003 году тип MIME image/vnd.microsoft.icon, который определяет формат значка изображения.

En 2005, el W3C publicó unos consejos sobre favicons, en las que se aconsejaba utilizar el valor icon para el atributo rel (en vez del valor ярлык que utilizó Internet Explorer hasta su version 8) e indicar los distintos tipos de imagen mediante el Тип атрибута, como en los ejemplos siguientes:

  <ссылка rel="icon" type="image/png" href="imagen.png">



 
 

Рекомендация HTML 5 использовать пример для определения фавиконов, добавленный в список атрибутов 2005 года, для указания размеров изображений (параметры масштабирования изображений, как SVG, которые можно использовать для любой доблести), как и для примера номер:

  <ссылка rel="icon" type="image/png" href="imagen.png">



 
 

En vez de utilizar un fichero .ico con varias imágenes, se puede hacer referencia a varias imágenes para que el navegador elija la más easye en cada position:

  <ссылка rel="icon" type="image/png" href="imagen_16.png">

<ссылка rel="icon" type="image/png" href="imagen_32.png">

 
 

Si se incluye un archivo favicon.ico в ла-ковер-райз-дель-sitio web, лос-навегадорес, использующий автоматические изображения, такие как favicon de todas las páginas del sitio, так как море необходимо включить в этикет <ссылка>. La etiqueta es necesaria si se quieren utilizar otros formatos de imagen, guardarlo en otras cars o hacer que diferentes páginas hagan referencia a favicons diferentes (dando diferentes valores al atributo href).


Desgraciadamente, en los ultimos años, los navegadores de los móviles han complicado esta situación, ya que utilizan imágenes en muchos tamaños diferentes y con etiquetas no normalizadas para distintos штрафы.

En estos apuntes no se tratan estos Problemas, pero en la web se pueden encontrar artículos que tratan de aclarar esta situacion, que ojalá se simplifique en los próximos años:

Si se quieren incluir en una web todos los tamaños de imágenes y las etiquetas requeridas por los diferentes navegadores, lo más fácil es utilizar aplicaciones web especializadas en esta tarea (например, https://favicomatic.com/ или https://realfavicongenerator. net/) y hacerlo periódicamente para comprobar las novedades en este campo.

Для создания изображения в формате .ico, которое может быть использовано с помощью графических редакторов, таких как IcoFX (только для Windows), для получения результатов, связанных с использованием веб-приложений, таких как https://favicomatic.com/ или https://realfavicongenerator.net/, например crean todos los archivos necesarios partir de una imagen. Como minimo se aconseja incluir dos tamaños imágenes, 16×16 и 32×32, pero se pueden incluir también los tamaños 24×24, 48×48 и 64×64 (aunque eso aumenta bastante el tamaño del archivo .ico).

Добавление фавиконки — Документация Flask (1.1.х)

«Favicon» — это значок, используемый браузерами для вкладок и закладок. Это помогает выделить ваш веб-сайт и придать ему уникальный бренд.

Распространенный вопрос: как добавить фавиконку в приложение Flask. Первый из Конечно, вам нужна икона. Он должен быть 16×16 пикселей и в файле ICO формат. Это не требование, а стандарт де-факто, поддерживаемый всеми соответствующие браузеры. Поместите значок в свой статический каталог как favicon.ico .

Теперь, чтобы браузеры могли найти вашу иконку, нужно добавить ссылку тег в вашем HTML.Так, например:

 
 

Это все, что вам нужно для большинства браузеров, однако в некоторых очень старых браузерах этого нет. поддерживают этот стандарт. Старый стандарт де-факто заключается в том, чтобы обслуживать этот файл, с этим именем в корне сайта. Если ваше приложение не смонтировано в корневой путь домена, на который нужно настроить веб-сервер. обслуживайте значок в корне или, если вы не можете этого сделать, вам не повезло.Если однако ваше приложение является корневым, вы можете просто перенаправить перенаправление:

 app.add_url_rule('/favicon.ico',
                 redirect_to=url_for('static', имя файла='favicon.ico'))
 

Если вы хотите сохранить дополнительный запрос перенаправления, вы также можете написать представление используя send_from_directory() :

 импорт ОС
импорт из фляги send_from_directory

@app.route('/favicon.ico')
определение фавикона():
    вернуть send_from_directory (os.path.join (app.root_path, 'статический'),
                               фавикон.ico', mimetype='image/vnd.microsoft.icon')
 

Мы можем опустить явный MIME-тип, и он будет угадан, но мы можем а также укажите его, чтобы избежать дополнительных угадываний, так как это всегда будет такой же.

В приведенном выше примере значок будет отображаться через ваше приложение, и, если возможно, лучше настроить свой выделенный веб-сервер для его обслуживания; обратитесь к документация веб-сервера.

См. также

Как добавить фавиконку на свой сайт Django

Фавикон вашего сайта отображается на вкладке браузера и является ключевым способом брендинга вашего сайта.Настройка фавиконки — простая задача, но как только вы начнете рассматривать значки, специфичные для конкретного производителя, она усложнится.

В этом посте мы рассмотрим:

  • что спецификация HTML говорит о фавиконках
  • поддержка браузера
  • два простых способа предоставления фавиконки от Django
  • огромный мир иконок для конкретных поставщиков куча значков для конкретных поставщиков с помощью RealFaviconGenerator

Хорошо, давайте приступим к делу.

Указывать значок или нет

Спецификация HTML определяет два способа указания значка сайта (источника).

Во-первых, вы можете добавить один или несколько <link> s с rel=icon к <head> вашей страницы. Затем браузер будет выбирать между ними и использовать наиболее подходящий (который работает):

 ссылка rel=icon href=favicon-16.png размеры=16x16 type=image/png>
ссылка rel=icon href=favicon-32.png размеры=32x32 тип=изображение/png>
 

Браузер может выбирать в зависимости от размера или рекламируемого типа файла.

Во-вторых, если вы не укажете такие <link> s, браузер автоматически запросит /favicon.ico и будет использовать его, если это поддерживаемое изображение. .ico — это суффикс файла для значков Microsoft Windows, но вам не нужно использовать этот тип файла. Браузеры всегда подчиняются заголовку Content-Type , поэтому вы можете обслуживать другие типы изображений. favicon.ico используется только по историческим причинам начиная с Internet Explorer 5 (!).

Итак, какой из этих методов следует использовать?

Использование <link> s привлекательно, поскольку позволяет использовать несколько типов значков.Теоретически это может сэкономить полосу пропускания и время обработки, поскольку браузер может выбрать наименьший подходящий значок и избежать его увеличения или уменьшения. Но на практике любое такое преимущество, вероятно, перевешивается стоимостью включения <link> на каждой странице, даже если они нужны только посетителям, впервые пришедшим на сайт (поскольку их браузер еще не кэшировал значок).

Вторым недостатком использования <link> является то, что они не будут применяться ко всем страницам. Возможно, вы не сможете редактировать все страницы на своем сайте, например, если некоторые из них созданы сторонним пакетом.И если посетитель (первый) попадает на URL-адрес, отличный от HTML, например ответ JSON, он не может содержать <link> , поэтому браузер запросит /favicon.ico .

Итак, чтобы применить ко всем страницам, рекомендуется хотя бы предоставить /favicon.ico . Имея это на месте, вы можете добавить <link> сверху, если это необходимо.

Вся эта ситуация усложняется специфичными для вендора иконками, которые требуют <link> s и различных других тегов.Отложите их в сторону, мы рассмотрим их позже. Во-первых, давайте просто напишем /favicon.ico .

Какой тип файла?

Для /favicon.ico обычно используются три типа файлов:

  1. ICO

    Древний, но не из-за своего возраста и стандарта де-факто, он поддерживается во всех браузерах. Он не сжат, и немногие графические программы его поддерживают. К счастью, есть много веб-инструментов, которые могут конвертировать вас в ICO.

    Главное преимущество ICO в том, что файл может содержать несколько разрешений.

  2. PNG

    Более новый, открытый формат, в основном повсеместно поддерживаемый*. Он сжат и хорошо поддерживается графическими программами.

    (*Can I Use показывает, что Internet Explorer поддерживает только значки PNG из версии 11.)

  3. SVG

    Современный, открытый формат и довольно хорошо поддерживается. Могу ли я использовать показывает, что Safari и Internet Explorer не поддерживают значки SVG.

    Большим преимуществом SVG является то, что это векторный графический формат , а не растровый формат .Это «один размер подходит всем» — браузер может отображать один и тот же значок любого размера. SVG также может быть меньше, чем соответствующий PNG, особенно для значков.

    (Еще одна интересная функция SVG: вы можете изменить стиль значка для пользователей темного режима.)

Если вы не заботитесь о абсолютно в каждом браузере, PNG — прекрасный выбор. Его легче создать и меньше. (На момент написания PNG будет исключать около 0,14% мирового трафика в Internet Explorer и LT11.)

Надеемся, что в будущем Safari будет поддерживать значки SVG, и их использование станет разумным.Йенс Оливер Мейерт называет этот «Единый фавикон, чтобы править ими всеми», но мы еще не достигли этого (вздох).

Отправьте PNG по адресу

/favicon.ico

Перед добавлением кода подготовьте PNG. Кажется, нормально сделать его 64×64 пикселя. Браузеры обычно отображают значок размером 16×16 или 32×32 пикселя, но использование большего размера помогает поддерживать отображение с высоким разрешением или увеличенное изображение. Вы также можете использовать прозрачность PNG, но имейте в виду, что фон вкладки может быть любого цвета из-за темы операционной системы, темного режима или пользовательской настройки.

После того, как вы подготовили значок, поместите его в ваши статические файлы как favicon.png . Затем добавьте это представление для его обслуживания:

 из настроек импорта django.conf.
из django.http импортировать FileResponse, HttpRequest, HttpResponse
из django.views.decorators.cache импортировать cache_control
из импорта django.views.decorators.http require_GET


@require_GET
@cache_control(max_age=60 * ​​60 * 24, immutable=True, public=True) # один день
def favicon (запрос: HttpRequest) -> HttpResponse:
    файл = (настройки.BASE_DIR/"статический"/"favicon.png").open("rb")
    вернуть FileResponse (файл)
 

… с этим соответствующим определением URL:

 из пути импорта django.urls

из example.core импортировать представления как core_views

URL-шаблоны = [
    ...,
    путь("favicon.ico", core_views.favicon),
    ...,
]
 

Вы можете задаться вопросом, зачем вам нужно отдельное представление, а не полагаться на приложение Django staticfiles . Причина в том, что staticfiles обслуживает только файлы из префикса STATIC_URL , например static/ .Таким образом, staticfiles могут обслуживать только /static/favicon.ico , в то время как favicon должен обслуживаться точно по адресу /favicon.ico (без <link> ).

Давайте разберем представление:

  • @require_GET заставляет представление отвечать только на запросы GET.

  • Вызов @cache_control устанавливает заголовок Cache-Control на один день с флагами immutable и public. Значение max_age сообщает браузерам о повторной загрузке значка через день (в секундах).Один день, вероятно, является разумным компромиссом между экономией трафика и возможностью изменить значок в случае ребрендинга. Установка неизменяемого флага указывает браузерам пропускать проверку изменений до истечения срока действия. А флаг public сообщает браузерам, что ресурс может быть кэширован даже при доступе с учетными данными.

  • файл устанавливается на открытый файл с помощью API pathlib. Возможно, вам придется изменить путь в зависимости от того, где вы храните свои статические файлы.

    Эта строка предполагает, что ваша настройка BASE_DIR создана с помощью pathlib. Django перешел на использование Pathlib для новых проектов в версии 3.1. Если ваш проект был создан до этого, вы можете обновить его — см. мой предыдущий пост.

  • Django FileResponse берет открытый файл и передает содержимое в качестве тела ответа. Он автоматически добавляет заголовок Content-Type к image/png на основе имени файла.

Хорошо, это код.При правильной настройке вы должны увидеть значок на вкладке браузера:

Да!

(Значок груши от Freepik на Flaticon.com.)

Чтобы представление продолжало работать должным образом, вы можете добавить тест. Вот тест, который охватывает все основы, которые вы можете поместить в соответствующий тестовый файл представлений:

 из http import HTTPStatus

из django.test импортировать SimpleTestCase


класс FaviconTests (SimpleTestCase):
    определение test_get (я):
        ответ = я.client.get("/favicon.ico")

        self.assertEqual(response.status_code, HTTPStatus.OK)
        self.assertEqual (ответ ["Cache-Control"], "max-age=86400, неизменный, общедоступный")
        self.assertEqual (ответ ["Content-Type"], "image/png")
        контент = b"".join(response.streaming_content)
        self.assertGreater (длина (содержание), 0)
 

Несколько замечаний:

  • Представлению не нужно использовать базу данных, поэтому в тестовом примере используется SimpleTestCase , который блокирует доступ к базе данных (и поэтому работает немного быстрее).
  • Код состояния проверяется на соответствие HTTPStatus Python (как я уже говорил ранее).
  • Заголовки Cache-Control и Content-Type проверяются на соответствие точным значениям.
  • FileResponse — это потоковый ответ , что делает его эффективным для отправки больших файлов. Таким образом, чтобы проверить весь контент в тесте, вы должны соединить его вместе. Этот тест просто проверяет наличие хотя бы одного байта содержимого.

Итак, тест пройден!

Уловка для создания фавиконки Emoji с помощью SVG

Как отмечалось выше, если вам не нужна поддержка Safari, вы можете отправить SVG по адресу /favicon.ico . Быстрый способ сделать фавиконку SVG — выбрать в этом шаблоне эмодзи:

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text y=".9em" font-size="90">👾</текст>
</svg>
 

Мгновенная иконка! Вы можете поменять местами смайлики в <text> , чтобы выбрать один из тысяч вариантов.

Эта техника была впервые популяризирована в твиттере @LeaVerou. Спасибо Леа!

Для демонстраций или внутренних инструментов, когда вы знаете, что пользователи не будут использовать Safari, это очень простой способ настроить значок. Это несложно и гибко, хотя эмодзи выглядят по-разному на разных платформах. Я использую этот метод в своих примерах проектов, например, в моем репозитории django-htmx.

Обратите внимание, что вы не ограничены смайликами. Вы можете настроить SVG для использования любых символов или использовать значок SVG из набора, например героев.

Вы можете использовать значок SVG в Django с таким видом:

 из django.http import HttpRequest, HttpResponse
из django.views.decorators.cache импортировать cache_control
из импорта django.views.decorators.http require_GET


@require_GET
@cache_control(max_age=60 * ​​60 * 24, immutable=True, public=True) # один день
def favicon (запрос: HttpRequest) -> HttpResponse:
    вернуть HTTP-ответ (
        (
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">'
            + '<текст у=".9em" font-size="90">👾</text>'
            + "</svg>"
        ),
        content_type="изображение/svg+xml",
    )
 

… с соответствующей записью URL:

 из пути импорта django.urls

из example.core импортировать представления как core_views

URL-шаблоны = [
    ...,
    путь("favicon.ico", core_views.favicon),
    ...,
]
 

Бада-бинг, бада-бум:

Весь код аналогичен предыдущей версии PNG. Вы также можете добавить тест в том же духе:

 из http import HTTPStatus

от джанго.Импорт теста SimpleTestCase


класс FaviconTests (SimpleTestCase):
    определение test_get (я):
        ответ = self.client.get("/favicon.ico")

        self.assertEqual(response.status_code, HTTPStatus.OK)
        self.assertEqual (ответ ["Cache-Control"], "max-age=86400, неизменный, общедоступный")
        self.assertEqual (ответ ["Content-Type"], "image/svg+xml")
        self.assertTrue(response.content.startswith(b"<svg"))
 

Ницца.

Замена значка средой

Смешение сред разработки, подготовки и производства может привести к катастрофическим последствиям.Случайно «удалить всех пользователей» на продакшене совсем не весело!

В качестве защиты от таких ошибок вы можете сделать каждую среду визуально отличной. Внутри страниц вы можете применять специальные стили, такие как другой цвет фона или баннер. Вы можете сделать это в своих базовых шаблонах и некоторых CSS.

Чтобы вкладки браузера отличались друг от друга, вы также можете поменять местами свой значок для каждой среды. (Спасибо Крису Койеру за этот совет.)

Вот пример расширения предыдущего представления значка PNG для этого:

 от django.настройки импорта конф
из django.http импортировать FileResponse, HttpRequest, HttpResponse
из django.views.decorators.cache импортировать cache_control
из импорта django.views.decorators.http require_GET


@require_GET
@cache_control(max_age=60 * ​​60 * 24, immutable=True, public=True) # один день
def favicon (запрос: HttpRequest) -> HttpResponse:
    если настройки.DEBUG:
        имя = "favicon-debug.png"
    еще:
        имя = "favicon.png"
    файл = (настройки.BASE_DIR/"статический"/имя).open("rb")
    вернуть FileResponse (файл)
 

Проверка настроек .DEBUG — это простой способ отличить разработку от других сред. Если вы хотите разделить другие среды, такие как постановка, вы можете добавить пользовательскую настройку «имя среды» на основе переменной среды.

Значки для конкретных поставщиков

Приготовьтесь, здесь все становится сложнее. Различные поставщики определили свои собственные спецификации значков для особых ситуаций. Например:

  • Apple ищет «значок Apple Touch». Это используется, когда пользователь закрепляет ваш сайт на главном экране своей iThing как «виртуальное приложение».Для этого значка было девять различных разрешений (на данный момент) между версиями iOS и версиями iPhone/iPad.
  • Android Chrome может использовать другой значок для похожих закрепленных сайтов. Он ищет это в манифесте вашего веб-приложения. По крайней мере, это часть открытого стандарта для прогрессивных веб-приложений (PWA).
  • Windows Metro также позволяет пользователям закреплять сайты на своем рабочем столе в виде «плитки». Эта функция ищет специальный значок. Их руководство по дизайну рекомендует, чтобы это был только белый силуэт, и вы также можете указать цвет плитки в специальном теге <meta> .
  • …и так далее и тому подобное, включая варианты для ныне несуществующих браузеров, таких как Internet Explorer 10.

Все это немного запутано.

К счастью, не требует указывать все эти значки. Если вас не волнуют пользователи, использующие функции «закрепления» и тому подобное, вы можете пропустить эти значки. Затем, даже если кто-то «закрепит», они просто увидят ваш фавикон с более низким разрешением или запасной вариант со своей платформы. Но если у вас есть разумный объем трафика или вы хотите произвести впечатление на определенных посетителей, вы можете добавить дополнительные значки.

Какой набор дополнительных иконок поддерживать — вот тогда вопрос. Существует множество спецификаций, некоторые из них уже не существуют, а использование браузера зависит от аудитории. Из-за этого существует много статей и инструментов с расходящимися рекомендациями.

(Эта статья цитирует многие из этих постов в разделе «Мотивация».)

Одним из наиболее известных инструментов для фавиконов является RealFaviconGenerator. Он поддерживается с 2014 года его создателем Филиппом Бернаром, обновляется по мере выхода новых стандартов и показывает предварительный просмотр вашего значка, используемого в различных ситуациях.Я думаю, что это обеспечивает разумный баланс поддержки многих значков, специфичных для поставщиков, и избегания старых (по умолчанию).

Давайте посмотрим, как использовать RealFaviconGenerator для создания альтернативных форматов значков, а затем как их настроить в проекте Django.

Обработка значка с помощью RealFaviconGenerator

Во-первых, получите значок в формате PNG высокого разрешения с соответствующей прозрачностью. Например, я снова буду использовать этот значок груши, начиная с 512×512:

Во-вторых, откройте RealFaviconGenerator:

В-третьих, загрузите свой значок.Вам будет представлена ​​страница, на которой вы можете настроить свой значок для различных ситуаций:

Вы можете настроить такие вещи, как добавление фона для iOS, с объяснением, почему:

Поэкспериментируйте, пока не будете удовлетворены внешним видом для платформ. собираются поддерживать. Когда вы дойдете до конца, убедитесь, что вы используете параметр по умолчанию «Я размещу файлы favicon…»:

Затем нажмите «Создать свои значки и HTML-код».

После завершения генерации вы увидите этот экран:

Загрузите пакет, разархивируйте его, и вы должны увидеть, что он содержит кучу файлов:

 favicon_package_v0.16
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── browserconfig.xml
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── mstile-150x150.png
├── safari-pinned-tab.svg
└── site.webmanifest
 

Боже, это много.

Обратите внимание, что RealFaviconGenerator создает favicon.ico как файл ICO, а не PNG, как мы видели ранее.

Также обратите внимание, что несколько файлов не являются файлами изображений , а файлами конфигурации всего сайта:

Для каждого из них вы можете иметь только один файл на сайте.Если у вас уже есть какой-либо из файлов, вам следует объединить содержимое из RealFaviconGenerator, а не заменять их.

Хорошо. Давайте рассмотрим два способа обслуживания этих файлов. В первом используется функция Whitenoise, популярного пакета для обслуживания статических файлов. Второй использует простой Django и работает независимо от ваших настроек статического файла.

После этого мы рассмотрим добавление HTML-кода из RealFaviconGenerator, который вам понадобится для любого метода.

Подавайте файлы значков с помощью Whitenoise

Обновление (20.01.2022): Этот раздел добавлен благодаря совету Джулиана Вахгольца в Твиттере.

В этом разделе предполагается, что вы уже настроили Whitenoise для своих статических файлов в соответствии с его документацией.

Обработка статических файлов Whitenoise использует шаблон очистки кеша с хэшированием из Django ManifestStaticFilesStorage . Это не сработает для файлов значков, так как им нужны определенные URL-адреса. Вместо этого вы также можете настроить Whitenoise для обслуживания их как неверсионных файлов с настройкой WHITENOISE_ROOT .

Создайте каталог в своем проекте для хранения этих неверсионных статических файлов:

 $ mkdir static_nonversioned
 

Затем настройте параметр:

 WHITENOISE_ROOT = BASE_DIR / "static_nonversioned"
 

Поместите файлы значков из RealFaviconGenerator в каталог, и Whitenoise их обслужит.Вы можете проверить, обслуживаются ли значки, посетив их соответствующие URL-адреса. Например, вы можете проверить значок Apple Touch по адресу /apple-touch-icon.png :

Этот подход удобен, но у него есть один недостаток. По умолчанию Whitenoise будет использовать значение max-age short в заголовке кеша: всего 60 секунд в рабочей среде. Это заставит браузеры часто повторно получать файлы значков — небольшая трата полосы пропускания. Напомним, что выше мы использовали значение в один день, что является более разумным.

Вы можете изменить этот максимальный возраст с помощью настройки WHITENOISE_MAX_AGE . Например, чтобы установить его на один день, за исключением разработки по умолчанию:

, если не DEBUG:
    WHITENOISE_MAX_AGE = 60 * 60 * 24 # один день
 

Осторожно, это относится к ко всем вашим неверсионным статическим файлам в WHITENOISE_ROOT . Возможно, вам понадобится более короткое время ожидания кеша для других файлов, таких как robots.txt . В этом случае вам нужно выбрать наименьшее время ожидания, которое работает.

Кроме того, вы можете использовать описанную ниже технику независимо от того, используете ли вы Whitenoise или нет. Не забудьте затем добавить HTML, как показано ниже.

Подавайте файлы значков с помощью Plain Django

Поместите файлы в статическую папку вашего проекта или в подкаталог, как вам удобно. (Если вас не волнует конкретная платформа, вы можете удалить соответствующие файлы.)

Далее вам нужно представление для обслуживания этих файлов. Вы можете сделать это так:

 из настроек импорта django.conf
от джанго.HTTP-импорт FileResponse, HttpRequest, HttpResponse
из django.views.decorators.cache импортировать cache_control
из импорта django.views.decorators.http require_GET


@require_GET
@cache_control(max_age=60 * ​​60 * 24, immutable=True, public=True) # один день
def favicon_file (запрос: HttpRequest) -> HttpResponse:
    имя = запрос.путь.lstrip("/")
    файл = (настройки.BASE_DIR/"статический"/имя).open("rb")
    вернуть FileResponse (файл)
 

Этот код адаптирован из предыдущего вида PNG. Основное изменение здесь заключается в том, что представление не всегда отображает favicon.png больше. Вместо этого он выбирает имя файла для обслуживания из request.path .

Возможно, вам придется изменить строку file = в зависимости от того, где находятся ваши статические файлы и если вы разместили значки в подкаталоге. (…и используете ли вы pathlib для BASE_DIR .)

Имея представление, вы также должны добавить соответствующие определения URL:

 из пути импорта django.urls

из example.core импортировать представления как core_views

URL-шаблоны = [
    ...,
    путь("android-chrome-192x192.png", core_views.favicon_file),
    путь("android-chrome-512x512.png", core_views.favicon_file),
    путь("apple-touch-icon.png", core_views.favicon_file),
    путь("browserconfig.xml", core_views.favicon_file),
    путь("favicon-16x16.png", core_views.favicon_file),
    путь("favicon-32x32.png", core_views.favicon_file),
    путь("favicon.ico", core_views.favicon_file),
    путь("mstile-150x150.png", core_views.favicon_file),
    путь ("safari-pinned-tab.svg", core_views.favicon_file),
    путь("site.webmanifest", core_views.favicon_file),
    ...,
]
 

Вы можете проверить, обслуживаются ли значки, посетив их соответствующие URL-адреса. Например, вы можете проверить значок Apple Touch по адресу /apple-touch-icon.png :

Отлично.

Как мы видели ранее, рекомендуется добавить тесты, чтобы убедиться, что ваши файлы значков продолжают работать. Вот простой тестовый пример, который проверяет их все:

 из http import HTTPStatus

из django.test импортировать SimpleTestCase


класс FaviconFileTests (SimpleTestCase):
    определение test_get (я):
        имена = [
            "Android-хром-192x192.png",
            "андроид-хром-512x512.png",
            "apple-touch-icon.png",
            "браузерconfig.xml",
            "favicon-16x16.png",
            "favicon-32x32.png",
            "favicon.ico",
            "mstile-150x150.png",
            "safari-pinned-tab.svg",
            "сайт.вебманифест",
        ]

        для имени в именах:
            с self.subTest(имя):
                ответ = self.client.get(f"/{имя}")

                self.assertEqual(response.status_code, HTTPStatus.OK)
                self.assertEqual (
                    ответ["Кэш-Контроль"],
                    "max-age=86400, неизменяемый, общедоступный",
                )
                контент = b"".join(response.streaming_content)
                self.assertGreater (длина (содержание), 0)
 

Примечание:

  • В тестах используется метод unittest subTest для запуска нескольких тестов в рамках одного метода. subTest() универсален, но я предпочитаю использовать параметризованный пакет или метку параметризации pytest.
  • Каждый тест проверяет ответ OK, правильный заголовок Cache-Control и по крайней мере один байт содержимого. Заголовок Content-Type не проверяется, поскольку он зависит от файла.

Классные, классные бобы. Не забудьте затем добавить HTML, как показано ниже.

Fin

Если RealFaviconGenerator поможет вам, сделайте пожертвование, чтобы помочь его создателю с обслуживанием.

Пусть ваш фавикон будет максимально простым, но не проще.

—Adam


Узнайте, как ускорить выполнение тестов, из моей книги «Ускорьте свои тесты Django».


Одно сводное электронное письмо в неделю, никакого спама, клянусь мизинцем.

Похожие посты:

Теги: django© 2022 Все права защищены.

Как правильно использовать фавиконки

Как добавить фавиконку

Чтобы значок отображался, необходимо добавить на вкладку файл с графическим изображением значка. Чтобы добавить иконку на свой сайт, нужно выполнить обязательные требования к браузеру и использовать минимальный набор фавиконов, которые мы сейчас подробно рассмотрим.

Почему набор, а не один значок? Дело в том, что браузеры и экраны постоянно развиваются. Более современные форматы обычно поддерживаются более современными браузерами. Например, вы можете подумать, что можете добавить один значок SVG, и браузер отобразит его правильно. Однако не все браузеры по-прежнему поддерживают формат SVG для фавиконов. В следующей таблице показаны браузеры, поддерживающие формат SVG.

Обязательный фавикон

Все, как старые, так и новые, веб-серверы и браузеры поддерживают расширение .формат ико.

Чтобы добавить значок, добавьте в следующий код:

  <голова>
  <ссылка rel="icon" href="favicon.ico">
  

Обратите внимание на две детали: размер и расположение.

Размер. Большинство интернет-источников утверждают, что вам нужен favicon.ico размером 16×16. Это верно и не верно одновременно. Дело в том, что контейнер .ico динамический и его размер можно изменять на лету. Поэтому браузеры, понимающие размер 16х16, смогут уменьшить 32х32 до нужного размера.Итак, когда вам нужно создать favicon.ico 16×16? Делайте это, когда фавикон размером 32×32 становится размытым при сжатии. Это можно проверить вручную, сжав фавикон с 32×32 до 16×16. Если картинка расплылась, нужен дизайнер, который нарисует фавикон вручную в графическом редакторе.

Местоположение. Файл favicon.ico должен быть размещен в корне проекта, как показано в примере выше. Дело в том, что любой веб-сервер автоматически ищет favicon.ico в корне проекта и пытается добавить его на сайт.

Дополнительные необходимые иконки

Местоположение. В корень проекта нужно поместить только favicon.ico. Остальные иконки могут располагаться в любом месте проекта, например:

  проект/
  favicon.ico
  картинка/
    180.png
    192.png
    512.png
icon.svg  

Или вы можете сгруппировать все фавиконы, чтобы отделить их от других изображений в проекте:

  проект/
  favicon.ico
  картинка/
    фавиконы/
      180.png
      192.png
      512.png
icon.svg  

СВГ

Если современный веб-браузер умеет работать с векторными фавиконками, то этот формат предпочтительнее: меньший вес, лучшее качество, поддержка смены тем, нет необходимости указывать размер.

Процесс добавления такой же, как и для favicon.ico. Вам просто нужно добавить тип, чтобы браузер мог понять, с чем он имеет дело:

  <голова>
  
  

Для устройств Apple

Apple выбрала другой сценарий разработки и предложила свои размеры фавикона для iPhone и iPad. Фавиконы Apple поддерживаются всеми современными браузерами.

Самый популярный размер фавикона для старых устройств — 180×180. Приведем пример:

  <голова>
  
  

Добавив этот значок, мы также будем поддерживать старые устройства, которые не могут работать с большим размером и уменьшать его до необходимого размера.

Устройства Apple могут работать с крупными значками. Но для тех устройств, которые понимают большие размеры, мы можем использовать манифест. В манифесте будут скрыты все размеры, включенные в , что сделает разметку более читаемой.

Манифест

Манифест — это файл JSON, который сообщает браузеру все сведения о веб-приложении. Формат был разработан Google и продвигается PWA.

Для добавления фавиконов с помощью манифеста необходимо добавить манифест, в котором указать все значки и их размеры, которые вы хотите добавить на сайт.

Файл. Давайте создадим файл в корне проекта и назовем его manifest.webmanifest. Необходимо указать расширение .webmanifest, чтобы браузер мог понять, с каким файлом он имеет дело. Вы можете выбрать любое имя файла (в нашем случае это manifest).

Поскольку манифест представляет собой файл JSON, он должен начинаться с открывающей скобки {и заканчиваться закрывающей скобкой}.

Внутри скобок необходимо создать раздел значков. Раздел значков предполагает несколько значков, поэтому добавим массив []:

  манифест.веб-манифест
{
  "значки": []
}  

Осталось добавить фавиконки по шаблону:

  манифест.вебманифест
{
  "значки": [
    { "источник": "", "тип": "", "размеры": "" }
  ]
}  

Если иконок несколько, то они должны быть разделены запятыми:

  манифест.вебманифест
{
  "значки": [
    { "источник": "", "тип": "", "размеры": "" },
    { "источник": "", "тип": "", "размеры": "" },
    { "источник": "", "тип": "", "размеры": "" }
  ]
}  

Размер. В манифесте укажем размеры 192х192 и 512х512. Мы будем использовать 192, так как это следующий размер после 180, и 512 — так как это очень большой размер для фавикона, этого будет достаточно. А промежуточные значения? Все нормально: так же, как и раньше, браузер сожмет изображение до нужного размера. Например, с 512 на 256.

  манифест.вебманифест
{
  "значки": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "изображения/фавиконы/512.png", "тип": "изображение/png", "размеры": "512x512" }
  ]
}  

Настройки:

  • src — путь к иконке;
  • type – тип иконки;
  • Размер
  • — размер иконки.

Дополнительные размеры значков могут быть добавлены, если поддержка браузера вашего проекта требует этого. Например, вам нужна иконка размером 256×256. Добавим:

  манифест.вебманифест
{
  "значки": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "изображения/фавиконы/256.png", "тип": "изображение/png", "размеры": "256x256" },
    { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}  

Где взять фавиконы и как их создать

Верстальщики отвечают за фавиконки. Веб-дизайнеры в большинстве случаев не знают о фавиконках, поэтому не предоставляют им макеты.

Если веб-дизайнер не предоставляет фавиконки, у верстальщика есть два варианта:

  1. Не добавлять фавиконки в проект.

  2. Попросите дизайнера нарисовать фавикон (лучше в векторном формате). Скажите ему, что нужна икона в квадрате. Значок может быть круглым или даже овальным, но изображение должно быть вставлено в квадрат с соотношением сторон 1:1.

Векторный формат позволит растянуть фавикон до нужного размера (192, 256 и даже 512) без потери качества. Таким образом, верстальщик сможет сгенерировать нужный размер и добавить его на страницу.

При использовании сторонних сервисов для создания фавиконов всегда проверяйте результат.Чаще всего иконки размыты. Даже если взять хорошую иконку 512х512, то при уменьшении до 32х32 все равно могут появляться артефакты.

Для создания фавикона воспользуйтесь сервисом favicon-generator: экспортируйте изображение фавикона в формате PNG, добавьте это изображение в генератор фавикона, нажмите «Создать фавикон» и перейдите по ссылке Скачать сгенерированный фавикон. Вы скачаете архив со всеми возможными вариантами фавиконки. Возьмите favicon.ico и другие необходимые версии и добавьте их на страницу проекта.

Заключение

Последний способ добавить значок:

  <ссылка rel="icon" href="favicon.ico">


  

манифест.веб-манифест

  {
  "значки": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "изображения/фавиконы/512.png", "тип": "изображение/png", "размеры": "512x512" }
  ]
}  

Этот метод поможет нам поддерживать как самые старые, так и новейшие браузеры.

Ничего страшного, что список одного фавикона такой длинный — 4 пункта. Во-первых, браузер загружает фавиконы асинхронно, а во-вторых, он сначала проверит весь список фавиконов и загрузит наиболее подходящий.

Что, зачем и как создавать фавиконку для вашего веб-сайта

В любое время дня у меня открыто около 20 вкладок в Chrome.Что помогает мне отслеживать, какие вкладки являются маленькими значками, показанными ниже.

Я знаю, что мои документы Google — это вкладки с синим блокнотом. Моя доска Trello — это вкладка с мини-доской Trello. Блоги HubSpot, на которые я ссылаюсь, — это вкладки со звездочками и так далее.

Эти значки называются фавиконками. Они могут не только повысить вашу видимость в браузере, полном открытых вкладок, но и укрепить индивидуальность вашего бренда.

Давайте подробнее рассмотрим, что представляют собой фавиконы ниже.Затем мы рассмотрим, как вы можете создать его с помощью генератора фавиконов и добавить его на свой сайт с помощью HTML.

Что такое фавикон?

Фавикон — это значок браузера, представляющий бренд или веб-сайт. Фавиконы чаще всего можно увидеть рядом с заголовком веб-страницы на вкладках браузера, их также можно найти в адресных строках, списках закладок, страницах результатов поиска, панелях инструментов, истории браузера и других местах в Интернете.

Google имеет один из самых узнаваемых фавиконов. Вы можете увидеть разноцветную букву G в адресной строке моего браузера ниже.

Вы также можете увидеть значки Gmail, Google Sheets, Wiki HubSpot, редактора Hemingway и т. д. в моем списке закладок.

Favicons теперь появляются даже в результатах мобильного поиска Google. Вы можете увидеть результаты моего последнего поиска — «как часто нужно поливать суккуленты» — ниже.

Почему фавиконки важны?

Favicons не только влияет на пользовательский опыт и узнаваемость бренда, но и может сделать ваш веб-сайт более профессиональным.

Обратите внимание в поисковой выдаче для мобильных устройств, что веб-сайты Joy Us Garden и Легко выращиваемые луковицы имеют значки цветов, а сайт The Succulent Source имеет серый шар.Это не имеет особого смысла для сайта о суккулентах, не так ли? Это потому, что глобус — это значок значка по умолчанию, который Google Chrome устанавливает для веб-сайтов, у которых нет собственного значка.

Если я быстро просматриваю страницу с результатами, я, вероятно, решу изучить Joy Us Garden и Легко выращиваемые луковицы вместо The Succulent Source по нескольким причинам. Они не только появляются первыми в поисковой выдаче, но и их фавиконы, URL-адреса, заголовки страниц и метаописания указывают на то, что они являются веб-сайтами, посвященными всем растениям и имеющими ответ на мой вопрос.

Теперь представьте эти три веб-сайта во вкладках браузера на рабочем столе. Гораздо проще запомнить пользовательские значки «Сад радости» и «Легкие в выращивании луковицы» , чем значок по умолчанию «Источник суккулентов» . В море открытых вкладок я с большей вероятностью вернусь на вкладки с пользовательскими значками и проведу больше времени на этих сайтах.

Наконец, допустим, я нажимаю на каждый из этих сайтов. При посещении Joy Us Garden и Easy to Grow Bulbs я сразу заметил, что пользовательские фавиконы основаны на логотипах веб-сайта.Красочный логотип последнего показан ниже. Вы узнаете тюльпан как их значок.

 

Это помогает укрепить их фирменный стиль и сделать их сайт более запоминающимся. С другой стороны, при посещении The Succulent Source я впервые увижу их логотип. Они могли бы улучшить согласованность своего бренда, сопоставив свой логотип и фавикон.

Какого размера фавикон?

Оптимальный размер фавиконки 16х16 пикселей.Именно так они отображаются на вкладках браузера, адресных строках и списках закладок. В идеале, однако, вы должны создать свой значок в нескольких размерах. Таким образом, вы увидите правильно масштабированные версии на больших экранах, а не растянутую версию 16×16.

Ниже приведены некоторые из наиболее распространенных размеров фавиконов и их уникальные назначения.

  • 16×16 : Размер значков браузера.
  • 32×32 : Размер значков быстрого доступа на панели задач.
  • 96×96 : Размер значков ярлыков на рабочем столе.
  • 180×180 : Размер значков Apple Touch.
  • 300×300 : Размер, требуемый Squarespace.
  • 512×512 :Размер, требуемый WordPress.

Теперь, когда мы понимаем, что такое фавикон, его назначение и разные размеры, давайте посмотрим, как его создать.

Как сделать фавикон

Вы хотите сделать свой значок узнаваемым и соответствовать фирменному стилю. Поэтому вместо того, чтобы начинать с нуля, вам следует использовать логотип вашей компании.

Если у вас нет логотипа, то начните с него. Вы можете нанять дизайнера, чтобы он создал его для вас, или вы можете использовать такие инструменты, как Logo Crisp, для разработки высококачественного логотипа за небольшую часть стоимости.

Когда вы будете довольны своим логотипом, вы можете приступить к созданию фавикона. К сожалению, это не так просто, как сжать ваш логотип в квадрат 16×16 и положить этому конец. Например, ваш логотип может содержать текст, который будет неразборчив при уменьшении размера.

Вот почему вы хотите взять самую узнаваемую часть вашего логотипа и сделать ее фавиконкой. Easy to Grow Bulbs сделали именно это, взяв тюльпан со своего логотипа и сделав его фавиконкой.

Чтобы внести подобные изменения, вам может понадобиться программное обеспечение для редактирования значков, такое как IconEdit2. В большинстве программ для редактирования значков вы можете добавить несколько размеров в один файл значка. Как только вы будете удовлетворены своим изображением и размерами фавикона, вы можете сохранить файл в формате PNG или JPG, а затем загрузить его в генератор значков.

Однако для небольших изменений, таких как обрезка изображения, вы можете завершить весь процесс с помощью генератора фавиконки.Давайте подробнее рассмотрим эти онлайн-инструменты ниже.

Генераторы фавиконок

Ниже приведены некоторые из лучших генераторов фавиконов в Интернете. С помощью этих инструментов вы просто загружаете свое изображение фавикона, и оно преобразует изображение в соответствующие форматы значка и делает его доступным для загрузки. Этот процесс займет всего несколько минут.

Стандартные форматы фавиконов — ICO и PNG. ICO совместим со всеми браузерами, включая Internet Explorer. PNG — еще один распространенный формат.Единственным недостатком является то, что Internet Explorer не поддерживает файл PNG. В идеале выбранный вами генератор позволит вам загрузить фавикон в обоих форматах.

Фавикон

Создать свой значок в Favikon очень просто. Вы просто загружаете изображение, обрезаете его, а затем загружаете получившийся значок в формате ICO или PNG. Ниже я загрузил иконку ламы из проекта The Noun Project .

Недостаток в том, что Favikon поддерживает только один размер: 16×16 пикселей. Чтобы узнать больше о размерах, воспользуйтесь инструментами ниже.

Favicon.io

С помощью Favicon.io вы можете создать фавикон с нуля или из изображения, логотипа или эмодзи. Вы можете просмотреть его в трех разных размерах перед загрузкой.

Вы можете скачать результат в форматах ICO и PNG и в нескольких размерах. Варианты перечислены ниже:

  • android-chrome-192×192.png
  • android-chrome-512×512.png
  • apple-touch-icon.png
  • favicon-16×16.png
  • favicon-32×32.png
  • Фавикон.ико
Favicon.ico и генератор значков приложений

С помощью этого бесплатного инструмента вы можете загрузить изображение в формате PNG или JPG и преобразовать его в форматы ICO и PNG в еще большем количестве размеров.

Варианты загрузки перечислены ниже:

  • apple-icon-57×57.png
  • apple-icon-60×60.png
  • apple-icon-72×72.pnf
  • apple-icon-76×76.png
  • apple-icon-114×114.png
  • apple-icon-120×120.png
  • яблоко-значок-144×144.png
  • яблоко-значок-152×152.png
  • apple-icon-180×180.png
  • android-icon-192×192.png
  • favicon-32×32.png
  • favicon-96×96.png
  • favicon-16×16.png

После того, как вы сгенерируете свой значок в нужном формате, вы сохраните его в корневом каталоге вашего сайта. Затем вы можете создать ссылку на файл в формате HTML, чтобы добавить фавиконку на свой сайт.

Прежде чем мы рассмотрим этот процесс ниже, важно отметить, что это относится к владельцам сайтов, которые создали свой сайт с нуля или с помощью среды разработки, такой как Bootstrap CSS.Если вы использовали конструктор веб-сайтов или CMS, например, WordPress или альтернативы WordPress, то процесс будет немного отличаться.

Как добавить значок избранного в HTML

После того, как вы создали свой значок, вы должны сообщить браузерам и другим веб-приложениям, где его найти. Для этого вам нужно добавить строку кода в раздел вашего HTML-файла.

Допустим, вы сохранили файл PNG как «favicon.ico». Затем вы должны добавить следующий фрагмент кода между тегами :

.
 
 

 

   

Обратите внимание, : Ваш значок не обязательно должен быть помещен в корневую директорию вашего сайта — обычно это так. Если вы сохранили его в другом месте, просто убедитесь, что атрибут href указан правильно. Поэтому, если вы сохранили его в подпапке с именем «images», вам нужно ввести .

Предположим, вы создали фавикон разных размеров. Вы можете загрузить их все на свой сайт, добавив строку кода для каждого размера в раздел вашего HTML-файла.Например, если вы создали версию 16 x 16, 32 x 32, 48 x 48 и 180 x 180, вам нужно добавить следующий фрагмент кода:

.
 
 

 

   

Создание фавиконки

Фавиконы — важный элемент веб-дизайна.Они могут улучшить впечатление посетителей, укрепить индивидуальность вашего бренда и сделать ваш сайт более надежным. Не совершайте ошибку, упуская их из виду, особенно когда их легко создать и добавить на свой сайт. Вам просто нужен бесплатный генератор favicon и некоторое знакомство с HTML.

Новый фавикон • Комната отдыха

В недавнем выпуске Safari 9.0 появилась отличная новая функция: закрепленные вкладки. Эти вкладки заблокированы в левой части панели вкладок и остаются на месте, даже когда вы открываете новое окно или перезапускаете браузер.

По умолчанию первая буква названия сайта отображается цветом из темы сайта. Если вы работаете на сайте с сильным элементом брендинга, вам нужно настроить значок на закрепленной вкладке. Энтони Пираино и я работали над одним из них для Iconfactory и хотели бы поделиться некоторыми вещами, которые мы узнали.

Разметка

Вы начинаете с добавления простой разметки для изображения булавки. Это буквально одна строка кода в вашего HTML:

">

 

href указывает на файл SVG, а цвет используется для рисования векторной фигуры, содержащейся в файле (цвет фона для вкладки меняется в зависимости от того, активно ли окно браузера и выбрано ли оно).

В документации указано, что изображение должно быть векторной фигурой, залитой черным цветом. В нашем первом тесте мы использовали цвет заливки, который не был черным: изображение используется в качестве маски, поэтому непрозрачность заполненной фигуры — единственное, что имеет значение.Любая непрозрачность цвета заливки фигуры будет использоваться , но мы не рекомендуем использовать (и через секунду вы поймете почему).

Во время тестов мы использовали Illustrator и Sketch для создания файлов SVG. Фактически, мы начали это упражнение, просто экспортировав наш стандартный логотип в SVG; это показано слева.

Кажется достаточно простым, не так ли?

Рендеринг

И так до тех пор, пока вы не загрузите файл на свой сайт и не увидите, как ваше прекрасное произведение искусства преобразуется в растровое изображение 16×16 (или 32×32 на дисплее Retina.) Наша первая попытка показана справа.

Фу.

Конечно, при таком маленьком размере лучшим выбором будет настроенная вручную растровая графика. Вездесущий файл favicon.ico существует с тех пор, как в 1999 году был представлен Internet Explorer 5. Формат файла ICO также поддерживает прозрачность (он также использовался для значков на рабочем столе в Windows). Так почему бы не придерживаться чего-то проверенного и надежного?

Сначала мы подумали, что инженеры Safari ленивы: реализация по умолчанию отображает векторный глиф поверх сплошного цвета.Делая то же самое с SVG, вероятно, можно было бы повторно использовать большую часть их внутреннего кода. Но на самом деле это не похоже на путь, по которому пойдет Apple, которую мы знаем и любим…

Мы предполагаем, что у компании есть другие планы на эти файлы. В настоящее время они отображаются только на закрепленных вкладках, но поскольку все больше сайтов поддерживают этот новый стиль «фавикона», вполне вероятно, что они попадут в списки истории браузера или часто посещаемых сайтов.

Другой причиной может быть распространение форматов растровых файлов в браузере.Иногда используется файл favicon.ico , в других случаях появляется apple-touch-icon.png . С векторным файлом гораздо больше гибкости.

Спекулировать интересно, но пока нам нужно разыграть ту руку, которую нам выдали. Как мы можем улучшить наш векторный «фавикон»?

Упростить

Нашим первым наблюдением было то, что количество деталей в нашей иконке вызывало большинство проблем с рендерингом. В качестве теста я быстро создал значок булавки для сайта с простым, но эффективным брендингом.Это также вполне по силам разработчику, который любит изображать из себя дизайнера 🙂

Результат: dfstar.svg; это показано справа. (Этот небольшой эксперимент также показывает, что если быстро произнести «Звезда DF», это будет звучать как «Звезда Смерти». Хммм…)

Мы последовали этому примеру и переместили нашу фабрику за пределы круга, в котором она находилась. Вместо того, чтобы полагаться на негативное пространство, мы воспользовались преимуществами позитивного пространства. Дверь, в которой использовалась тонкая перегородка между фигурами, также была удалена.

Наша догадка о необходимости упростить элементы брендинга была верна; результат нашего второго теста показан справа. Теперь мы были намного счастливее с нашей фабрикой.

Ранее мы рекомендовали не использовать прозрачность в векторных фигурах. Причина этого в том, что в итоге вы получите «грязные» формы. Вы можете выбрать только один цвет, и без контраста полупрозрачные формы не выделяются на фоне основных элементов. Сердце справа нарисовано поверх круга с непрозрачностью 25% и теряется в цвете фона.Вы также должны помнить, что этот значок не выбран (там, где еще меньше контраста).

Еще одна вещь, которую мы узнали: размер холста, над которым вы работаете, не имеет значения. Графика dfstar.svg была сделана на холсте 1000×1000, а наш логотип — 256×256.

Мы привыкли работать со значками, поэтому степень двойки встроена в наш мозг. Как вы увидите дальше, это может быть полезно, если вы пытаетесь добиться точности пикселей в своих векторах.

Выровнять

После того, как наш друг Джон Сиракуза пожаловался, комментируя наши первоначальные выводы в Твиттере, он предложил свой уникальный подход.Он выровнял каждый вектор в сетке, которая эмулировала растровое изображение @2x (в его файле 382×512 каждый «пиксель» равен 32×32 в сетке 12×16). Для его логотипа Hypercritical это работает очень хорошо. Единственным недостатком является то, что острые края становятся немного размытыми на изображении @1x.

Очень немногим элементам брендинга посчастливится избежать такого точного выравнивания. Например, мы не хотели избавляться от круглых краев и окон в нашем логотипе. Но подход Джона показал нам важность пиксельной сетки, поэтому наши исследования двигались в этом направлении.

Анимация слева показывает последовательность изменений, внесенных Энтони для выравнивания крыши и окон нашей фабрики по сетке 256×256. Хотя в итоге мы получили форму, которая отличается от нашего официального логотипа, она выглядит намного четче в предоставленном пространстве.

Делая это в своей работе, помните о нашем прогнозе, что эти SVG-файлы будут занимать видное место в других частях пользовательского интерфейса браузера. Графика, сильно оптимизированная для 16×16 пикселей, может выглядеть очень плохо, когда Apple решит использовать ее в разрешении 100×100.Все будет в порядке, если наша окончательная графика (показана справа) появится в списках избранного или истории браузера.

Наконец, не зацикливайтесь на совершенстве при выравнивании векторов. На заводской двери все еще есть небольшое смещение пикселей, которое вызывает некоторое размытие при разрешении 1x. Но как бы нас это ни беспокоило, графика — лучшая из возможных. Любая попытка сделать его «идеальным» может быть легко отменена инженером Safari, который изменит число в обновлении программного обеспечения.

Тестирование

Конечно, вы захотите просмотреть свою работу во время настройки векторов.Safari кэширует файлы SVG, поэтому требуется немного усилий, чтобы очистить старые данные и увидеть ваши изменения. Вот последовательность, которую мы нашли надежной:

.
  1. Открепить вкладку для вашего сайта
  2. Выйти из Safari
  3. Удалите папку Template Icons в папке «Домашняя страница» > «Библиотека» > Safari
  4. .
  5. Перезапустить Safari
  6. Обновите страницу, которая ссылается на ваш «значок маски», чтобы обновить кешированный файл
  7. Закрепить вкладку для своего сайта

(Папка с именем Значки шаблона вместо Значки вкладок — еще один хороший намек на то, что эта графика предназначена для других целей в браузере.)

Кэш, поддерживаемый Safari, индексируется по домену. Это означает, что вы не можете сравнивать разные версии SVG, используя два сайта по адресу localhost:8001 и localhost:8002 . Точно так же нам нужно было развернуть один и тот же файл SVG на наших субдоменах design.iconfactory.com и blog.iconfactory.com , а также на нашем основном домене iconfactory.com .

Также стоит отметить, что поддомены открываются в той же закрепленной вкладке. Например, если вы закрепите этот сайт (blog.iconfactory.com), и iconfactory.com, и design.iconfactory.com откроются в одной вкладке. Ссылка на другой домен, например iconfactoryapps.com, открывается за пределами закрепленной вкладки.

Консистенция

Мы также воспользовались этой возможностью, чтобы убедиться, что наш знак Iconfactory последовательно используется во всем пользовательском интерфейсе браузера. Это означало обновление двух важных файлов: favicon.ico и apple-touch-icon.png .

После того, как вы выровняли векторы по пикселям, их легко преобразовать в файл с правильным форматом.Несмотря на расширение файла ICO, все современные браузеры теперь поддерживают форматы файлов PNG и GIF для фавиконки (в Википедии есть хороший обзор того, как этот файл используется в разных браузерах). Поскольку нам нужна поддержка старых браузеров в Windows и возможность Чтобы иметь растровые изображения @1x (16×16) и @2x (32×32) в одном файле, мы выбрали формат ICO на нашем сайте.

Как следует из названия, apple-touch-icon.png изначально был представлен в Safari для iOS. Документация Apple показывает, как вы можете указать разные размеры в разметке для разных разрешений экрана.В iOS размер файла может варьироваться от 60×60 пикселей для исходного экрана iPhone @1x до графики @3x 180×180, используемой на iPhone 6S Plus.

Но не позволяйте этому имени обмануть вас, этот файл также используется в местах, которые не являются «Apple» или «Touch». Например, Safari в OS X использует этот файл в списке часто посещаемых сайтов. Версия 48 × 48 точек отображается, когда вы щелкаете в адресной строке, чтобы ввести поиск или URL-адрес. К изображению также добавлены закругленные углы, но они , а не сквиркл.Не используйте собственную прозрачность в этих изображениях!

Chrome, работающий на Android, также может использовать этот файл. Требуемые размеры быстро выходят из-под контроля, когда вы пытаетесь поддерживать все возможные размеры и разрешения дисплея на этой мобильной платформе.

По этой причине мы предлагаем выбрать изображение разумного размера и позволить браузеру уменьшить его до нужного размера. Мы выбрали изображение размером 180×180 пикселей для нашей иконки.

Вот наши файлы до и после:

Два значка слева показывают фавикон .растровые изображения ico на 200%. Изображение apple-touch-icon.png показано справа в масштабе 100%.

Заключение

Вот и все. Даже в этом дивном новом мире векторных фавиконов знание того, как использовать пиксели, по-прежнему важно для того, чтобы ваш бренд выделялся.

Может показаться сумасшествием заходить так далеко, но наша задача — сделать так, чтобы продукты выглядели как можно лучше. Мы надеемся, что описанный выше опыт поможет вам в вашей работе. И если вам нужна небольшая помощь, не стесняйтесь обращаться к нам.

Как включить значок Favicon в Primo

  1. Последнее обновление
  2. Сохранить как PDF
  1. Дополнительная информация
  • Тип статьи: General
  • Продукт:

    5 Primo

  • 4 Версия продукта: 4

  • Арематно для установки Тип: Выделенный — Direct; Прямой; Местный;

Желаемый результат:
Включить значок favicon для отображения в интерфейсе Primo.
Значок favicon.icon отображается слева от URL-адреса в поле адреса в верхней части браузера.
Помимо замены стандартного значка IE в адресной строке в верхней части браузера, значок также появится в меню «Избранное» рядом с сохраненным сайтом.

Процедура:

1. В бэк-офисе Primo перейдите в Primo Utilities > File Uploader и выберите соответствующий вид

2. Загрузите файл «header.html»

3. Добавьте следующую ссылку на код в заголовок .html файл:







< div>

4. Сохраните файл и загрузите его с помощью File Uploader.

5. Очистите кеш браузера и перезагрузите страницу для проверки.

Дополнительная информация

Если у клиента есть стандартный веб-сервер для изображений, он может разместить свой собственный значок.

Добавить комментарий

Ваш адрес email не будет опубликован.