Размер favicon: форматы, поддержка, автоматизация / Хабр | Дропшиппинг

Содержание

форматы, поддержка, автоматизация / Хабр

На сегодняшний день favicon — это не просто значок 16×16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.

В каком формате должен быть фавикон?

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

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

Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.

HTML5 и атрибут sizes

Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.

<link rel="icon">
<link rel="icon" any">

Пора ли отправлять ICO на свалку?

Как я уже сказала, формат ICO сегодня уже можно считать устаревшим, но значит ли это, что от него нужно срочно избавиться? Ответ, как всегда, неоднозначный. Есть случаи, когда формат ICO ещё может сослужить вам хорошую службу. Приведу несколько примеров оправданного использования фавикона в формате ICO в разных операционных системах и поговорим об альтернативах.

Windows

Начнём, пожалуй, с Windows.

До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.

Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.

Сначала давайте рассмотрим первый способ.

Определение фавикона в устройствах Windows с помощью метаданных в <head>:

<meta name="msapplication-TileImage" content="images\tileimage.jpg">

Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:

<meta name="msapplication-square70x70logo" content="images/smalltile.png">
<meta name="msapplication-square150x150logo" content="images/mediumtile.png">
<meta name="msapplication-wide310x150logo" content="images/widetile.png">
<meta name="msapplication-square310x310logo" content="images/largetile.png">

Можно указать цвет фона плитки:

<meta name="msapplication-TileColor" content="#009900">

Можно указать имя закрепленного сайта:

<meta name="application-name" content="Rick and Morty">

Если нет этих метаданных, то в качестве имени используется значение в <title&gt; страницы.

Можно указать текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню “Пуск” Windows или на рабочем столе:

<meta name="msapplication-tooltip" content="Title">

Можно даже определить адрес документа:

<meta name="msapplication-starturl" content="./">

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

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

Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.

Вызов файла в <head>:

<meta name="msapplication-config" content="browserconfig. xml">

browserconfig.xml

<?xml version=”1.0" encoding=”utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/img/favicons/mstile-70x70.png"/>
      <square150x150logo src="/img/favicons/mstile-150x150.png"/>
      <square310x310logo src="/img/favicons/mstile-310x310.png"/>
      <wide310x150logo src="/img/favicons/mstile-310x150.png"/>
      <TileColor>#000000</TileColor>
    </tile>
    <notification>
       <polling-uri src="notifications/contoso1.xml"/>
       <polling-uri2 src="notifications/contoso2.xml"/>
       <polling-uri3 src="notifications/contoso3.xml"/>
       <frequency>30</frequency>
       <cycle>1</cycle>
   </notification>
  </msapplication>
</browserconfig>

square70x70logo, square150x150logo, wide310x150logo, square310x310logo — элементы, внутри которых объявляются изображения для различных размеров плитки.

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310×150 исходное изображение имеет размер 558×270.

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

. Этот элемент может включать в себя до 5 элементов <polling-uri>, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент <frequency>, значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.

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

Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.

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

<tile>
  <visual lang="en-US" version="2">
    <binding template="TileWide310x150ImageAndText01"
      <image src="images/image1.png" alt="alt text"/>
      <text>Text Field 1</text>
    </binding>
  </visual>
</tile>

То, что написано в кавычках в атрибуте template — название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.

Подробнее о шаблонах можно узнать на официальном сайте.

Mac OS

В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать, но и не будем.

Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте

color.

<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff">

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

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

iOS

Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.

Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes.

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

<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="apple-touch-icon-180x180.png">

Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы — ее скриншот.

Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.

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

Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.

В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега <title>. Чтобы задать другой заголовок, добавьте метатег на веб-страницу:

<meta name = "apple-mobile-web-app-title" content = "AppTitle">

Кстати, можно даже установить стиль строки состояния для веб-приложения:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.

Android

Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.

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

{
  "name": "Rick and Morty",
  "short_name": "Rick",
  "icons": [
  {
    "src": "/android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/android-chrome-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
 }
],
  "theme_color": "#b3adad",
  "background_color": "#b3adad",
  "display": "standalone"
}

Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из <title> в <head>;

Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;

Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;

Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.

Задать цвет можно и через <head>, добавив следующий мета-тег:

<meta name="theme-color" content="#9CC2CE">

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

Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.

Вызов в <head>:

<link rel="manifest" href="manifest.json">

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

Автоматизация

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

Есть пакеты для сборки и для Gulp, и для Grunt.

Главное помнить, что сегодня favicon — это больше, чем иконка в адресной строке и закладке браузера.

Как изменить иконку (favicon) для сайта?

В инструкции рассмотрены следующие вопросы:

Зачем нужен favicon для сайта?
Где взять иконку для сайта?
Как установить иконку на сайт?
Как объявить Apple Touch icon и плитку для Windows 10?

Зачем нужен favicon для сайта?

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

Вот где можно увидеть такую иконку:

Закладки и вкладки браузера
Результаты поиска Яндекс, Google
Каталоги и рейтинги, которые загружают favicon сайтов
Панель задач и рабочий стол операционной системы

Иконка сайта позволяет пользователям быстрее находить сайт во вкладках браузера или результатах поиска. Favicon повышает узнаваемость сайта.

Где взять иконку для сайта?

По умолчанию все сайты uCoz имеют стандартный favicon. Чтобы получить свою иконку сайта, вы можете сделать следующее:

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

При создании файла favicon. ico важно знать, что иконка должна быть квадратной. Рекомендованные размеры 16х16, 32х32 и 48х48 пикселей.

Наряду с расширением .ico, в настоящее время используются иконки формата .png. Разрешение таких изображений может достигать 180×180 пикселей.

Как установить иконку на сайт?

Когда у вас будут готовы файлы иконок с расширением ico и png, с помощью файлового менеджера загрузите их в корень сайта (корень — это то, что вы видите первым при входе в файловый менеджер не переходя в другие директории):

Стандартная иконка favicon.ico будет заменена на новую и через некоторое время вы сможете увидеть ее во вкладках браузера, в закладках и в результатах поисковых систем.

Важно! Чтобы иконка отобразилась сразу, достаточно открыть ее по прямой ссылке http://ваш-сайт.ру/favicon.ico и несколько раз выполнить комбинацию клавиш CTRL+F5. В результате вы в кеше обновите иконку на новую, далее при открытии главной страницы сайта просто обновите ее несколько раз и иконка в вкладке должна обновиться на новую.

Apple Touch icon используется на многих платформах за пределами iOS. Поэтому важно предусмотреть несколько размеров иконок, чтобы каждая платформа смогла выбрать подходящую:

<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">

В Windows 10 есть плитки, иконки к которым могут быть объявлены следующим образом:

<meta name="msapplication-square70x70logo" content="tile-70x70.png" />
<meta name="msapplication-square150x150logo" content="tile-150x150. png" />
<meta name="msapplication-wide310x150logo" content="tile-310x150.png" />
<meta name="msapplication-square310x310logo" content="tile-310x310.png" />

фавиконов: все, что вам нужно знать в 2022 году

Если вы сейчас посмотрите на открытые вкладки браузера, вы увидите букву «W» Webflow на этой открытой веб-странице. Это небольшое графическое украшение известно как фавикон.

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

Начало фавиконки

Фавиконы восходят к Internet Explorer 5. В то время они жили в корневых каталогах веб-сайтов с довольно простым названием «favicon.ico», которое используется до сих пор. сегодня. Если вы добавили веб-сайт в избранное в Internet Explorer, рядом с ним в адресной строке появится значок значка, а также список закладок.

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

Где найти фавиконы

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

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

Если вы посмотрите на HTML-код веб-сайта с фавиконкой , вы увидите ее в теге и в форме:

‍

Вы также можете увидеть дополнительные размеры файла favicon. png в файле cod e для различных приложений и устройств, об этом мы поговорим чуть позже в этом посте. Фавиконы не ограничиваются вкладками браузера и могут отображаться в других местах, где перечислены или отображаются веб-сайты.

Вы найдете фавиконы в истории вашего браузера. Независимо от того, используете ли вы Chrome, Safari, Firefox или любой другой совместимый браузер, рядом с веб-сайтом, который он представляет, появится значок фавикона. Вот как они выглядят в Google Chrome:

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

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

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

Примеры, которые следует учитывать при разработке собственного фавикона, включают кнопку воспроизведения YouTube, синюю птицу Twitter и красочную букву «G» Google. Эти значки уникальны, их можно сразу идентифицировать, и они позволяют легко обнаружить бренд при сканировании вкладок.

При создании столь же запоминающегося фавикона — вот некоторые вещи, которые вы должны учитывать

Сделайте свой значок маленьким, но разборчивым.

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

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

Не переусердствуйте

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

Вот несколько примеров:

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

Если ваш логотип является еще и символом, его легко использовать в качестве фавиконки. Логотип Apple s — отличный пример этого.

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

Ограничьтесь несколькими символами

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

Угадаете, чьи это фавиконы?

Наклоняющаяся буква «D» мгновенно узнается как Disney, стилизованная буква P в красном круге — из Pinterest, а синий квадрат с буквой «in» указывает на LinkedIn.

При разработке фавикона сокращение его до одной-двух основных букв хорошо работает для представления бренда.

Рассмотрите цветовую схему

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

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

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

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

Лучше всего использовать векторную графику

Хотя может возникнуть соблазн быстро создать что-то в Photoshop, использование векторной графики поможет вам в будущем. Когда вы создаете фавикон в Illustrator, Sketch, Figma или другом приложении для векторного дизайна, гораздо проще изменить его размер и изменить его позже.

Многие дизайнеры начинают с графических фавиконов на основе SVG, а затем конвертируют их в невекторизованные файлы, такие как png, gif, jpg или ico.

Рассмотрите возможность создания фавиконов с помощью генератора фавиконов

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

Используйте правильный формат файла

Сегодня favicon.ico по-прежнему широко поддерживается во многих браузерах. Однако более современные веб-сайты, как правило, используют favicon.png. Имейте в виду, что Internet Explorer поддерживает только .ico, а формат .png не будет отображаться. Вы можете обойти эту проблему, сохранив версию значка .ico и .png, чтобы он правильно отображался в нескольких браузерах.

Как правильно подобрать размер фавиконки

Стандартный размер фавиконки — 16×16 пикселей, но большинство дизайнеров начинают с 32×32 пикселей для размещения на экранах Retina. Таким образом, большие фавиконы хорошо отображаются на экранах Retina, а также могут быть уменьшены.

Конечно, существуют и другие размеры фавиконов, и стоит упомянуть, что значки Apple-touch, такие как для OS Safari, требуют размеров 180 x 180, для Android Chrome требуется значок 192 x 192, а Opera Coast работает. лучше всего при разрешении 228 x 228. Дизайнеры обычно создают множество разных размеров для использования как в настольных браузерах, так и в других приложениях.

Не скупитесь на фавиконки

Фавиконы важны. Без них наши открытые вкладки браузера кажутся пустыми. У нас остается куча серого пространства с текстом, который далеко не заслуживает внимания.

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

Как использовать несколько размеров favicon.ico с помощником favicon_link_tag в rails 4

спросил 8 лет, 3 месяца назад

Изменено 4 года, 9несколько месяцев назад

Просмотрено 4к раз

Моя проблема заключается в том, что фавикон просто не отображается при использовании favicon_link_tag и параметра нескольких размеров.

 <%= favicon_link_tag 'favicon.ico', размеры: '16x16 32x32' %>

Файлы были помечены как favicon-16.ico и favicon-32.ico соответственно. Эти изображения находятся в папке app/assets/images . Я неправильно их обозначаю? Это ограничение?

ruby-on-rails-4
favicon

Решение заключается не в магии Rails, а в том, как вы управляете файлом favicon.ico . Один файл ICO может содержать несколько изображений. Именно этого ожидают веб-браузеры. В частности, favicon.ico должен содержать три версии одной и той же иконки: 16×16, 32×32 и 48×48. Что касается атрибута размеров , он был введен в HTML5 и предназначен для значков PNG. Не favicon.ico .

Код

Достаточно базового определения:

 favicon_link_tag '/path/to/favicon.ico'

Убедитесь, что путь соответствует app/assets/images , я должен признать, что не знаю, где он отображается.

Изображение

Сначала вы можете подготовить три изображения в формате PNG (назовем их 16x16.png , 32x32.png и 48x48.png ) и объединить их с помощью такого инструмента 904, как0185 (в Ubuntu: sudo apt-get install icoutils ):

 icotool -c -o favicon.ico 16x16.png 32x32.png 48x48.png

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

Одной из идей было бы использовать ссылку, размещенную philippe_b, для создания различных изображений. Поместите их в app/assets/images/

Затем в файле application.html.erb поместите следующий код между тегами в вашем приложении:

 <% %w(57 60 72 76 114 120 144 152 180).