Favicon не отображается в opera
Favicon (favorite icon) — маленький значок (обычно логотип или часть логотипа), который отображается во вкладке браузера рядом с заголовком (title) страницы. На сегодняшний день у этой иконки существует еще множество предназначений. В этой статье мы рассмотрим основные из них. А также пройдемся по основным форматам и типам favicon.
Для чего нужен Favicon?
2. Иконка в закладках браузера
Если сохранить страницу сайта в закладках браузера, то рядом с названием сохраняемой закладки будет также отображаться и иконка favicon. Также этот значок будет отображаться в настройках браузера в разделах «Закладки» и «История».
Остальные случаи
- 16×16 — для закладок браузеров
- 32×32 — для закладок на панели задач
- 96×96 — для ярлыков на рабочем столе
Например, на нашем сайте qmedia.by это выглядит следующим образом:
Фавиконка (favicon) — это иконка, которая отображается во вкладке браузера перед названием страницы. Также эта иконка отображается в закладках и на рабочем столе для веб-приложений.
Фавиконка при установке веб-приложения Фавиконка на вкладке в браузере
5. Иконка в рейтингах и на стартовых страницах
При регистрации сайта в различных внешних рейтингах и сервисах, рядом с названием и ссылкой часто также отображается и иконка favicon. Наличие favicon также выгодно выделяет сайт на фоне остальных.
В целом можно сделать вывод о том, что наличие favicon в любом из перечисленных случаев помогает ассоциировать сайт с брендом, который он представляет, повышает узнаваемость и притягивает к сайту дополнительное внимание.
Для устройств на Windows
- 70×70 — закладки в Edge и плитка в Пуск (размер: Мелкий)
- 150×150 — плитка в Пуск (размер: Средний)
- 310×150 — плитка в Пуск (размер: Широкий)
- 310×310 — плитка в Пуск (размер: Крупный)
Дополнительные необходимые фавиконки
Расположение. Только favicon.ico должна лежать в корне проекта. Остальные иконки могут лежать в любом месте в проекте, например:
Или можно сгруппировать все фавиконки, чтобы отделить от других изображений в проекте:
Если современный веб-браузер умеет работать с векторными фавиконками, то этот формат более предпочтительный: меньший вес, наилучшее качество, поддерживает смену тем, не нужно указывать размер.
Подключение точно такое же, как и для favicon.ico, только нужно добавить тип, чтобы браузер понимал, с чем имеет дело:
Для устройств Apple
Apple пошли по другому сценарию развития и предложили собственные размеры фавиконок для своих устройств — iPhone и iPad. Формат для подключения favicon для Apple поддерживают все современные браузеры.
Самым востребованным размером для старых устройств фавиконок стал размер 180×180. Давайте посмотрим пример подключения:
Подключив такую иконку, мы также поддержим старые устройства, которые не умеют работать с таким большим размером фавиконки и уменьшать её до нужных размеров.
Устройства Apple работают и с большими размерами иконок, но так получилось, что устройства, которые понимают большие размеры, можно подключать более современным способом с помощью манифеста. Манифест позволит скрыть подключение всех размеров из , что сделает разметку более читаемой.
Манифест
Манифест — это JSON-файл со всеми подробностями веб-приложения для браузера. Формат был разработан Google по инициативе PWA.
Чтобы добавить фавиконки с помощью манифеста, нужно подключить манифест, а в манифесте указать все иконки и их размеры, которые мы хотим подключить на сайт.
Файл. Создадим файл в корне проекта и назовём его manifest.webmanifest. Расширение .webmanifest нужно указать, чтобы браузер понимал, с каким файлом имеет дело. Само название файла может быть любым (в нашем случае — manifest).
Так как манифест — это JSON-файл, то он должен начинаться с открывающей скобки < и заканчиваться закрывающей скобкой>.
Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:
Осталось добавить фавиконки по шаблону:
Если иконок несколько, то их нужно добавить через запятую:
Размеры. В манифесте мы укажем размер 192×192 и 512×512. 192 — так как это следующий размер после 180, а 512 — так как это очень большой размер для фавиконки, его будет достаточно. А что с промежуточными разрешениями? Всё хорошо: как и раньше, браузер сожмёт картинку к нужному размеру. Например, из 512 до 256.
src — путь до иконки;
type — тип иконки;
sizes — размер иконки.
Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 256×256. Давайте добавим её:
Какой должен быть формат файла Favicon?
Изначально, придуманный компанией Майкрасофт формат .ico был стандартом и использовался как в ранних версиях Internet Explorer. Его также поддерживали и считали стандартом и другие браузеры.
Однако на данный момент гораздо чаще для этих целей используются файлы формата .jpg, что поддерживается стандартом разметки HTML5.
Формат .ico всё еще поддерживается основными браузерами, но считается устаревшим, поэтому всё же рекомендуется использовать для favicon файлы формата .jpg.
1. Иконка на вкладке браузера
Сегодня абсолютный стандарт использовать favicon рядом с заголовком страницы во вкладке браузера. Такая простая иконка favicon есть практически у всех сайтов.
Откуда брать фавиконки и как их приготовить
Фавиконки — это ответственность верстальщика. Дизайнеры в большинстве случаев про фавиконки не знают, поэтому не предоставляют их с макетами.
Если дизайнер не предоставил фавиконки, у верстальщика есть два пути:
Не добавлять фавиконки в проект.
Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 1:1.
Векторный формат позволит растянуть фавиконку до нужных размеров (192, 256 и даже 512) без потери качества. Таким образом верстальщик сможет сгенерировать себе нужные размеры и подключить их к странице.
При генерации фавиконок с помощью сторонних сервисов всегда смотрите на получившийся результат. Чаще всего иконки получаются замыленными. Даже если брать хороший оригинал 512×512, то при уменьшении до 32×32 всё равно могут появиться артефакты.
Для генерации фавиконок используйте сервис favicon-generator: экспортируйте изображение фавиконки в формате PNG, добавьте это изображение в сервис генерации фавиконок, нажмите кнопку «Create favicon», а потом — ссылку «Download the generated favicon». Вы скачаете архив со всеми возможными вариантами фавиконок. Возьмите favicon.ico и другие необходимые версии, подключите к странице проекта.
Итоговый способ подключения фавиконки:
manifest.webmanifest
Таким способом мы будем поддерживать самые старые браузеры и самые новые.
Ничего страшного, что список одной фавиконки получился столь длинным — 4 пункта. Во-первых, браузер загружает фавиконку асинхронно. Во-вторых, он сначала посмотрит на весь список фавиконок и загрузит только одну — самую подходящую.
Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.
Всем привет! есть такая проблема, как сделать так чтобы отображалась иконка сайта, который делаю во всех браузерах в адресной строке корректно, особенно в Опере, подскажите пожалуйста? какой код?
Не отображается подключённый шрифт в хроме и мозилле но отображается в опере
Здравсвуйте не отображается шрифт подключённый к сайту в хроме и мозилле но отображается в опере.
Неправильно отображается в опере
Доброго времени суток, сайт неправильно отображается в oper'е (розовый - ненужное расстояние между.
Не отображается сайт в опере
Добрый день. В опере отображается только кусок сайта, в остальных браузерах все нормально. В чем.
у меня вот такой код добавления иконки:
Если честно я не очень знаю как устроен механизм кеширования разных браузеров, поэтому я не силён в этом вопросе, просто предположил. Просто частенько бывает так, что кэш виноват во всяких мелочах. Попробуйте переименовать страницу индекс.хтмл, кто знает. Ведь по идее, если вы указали правильный путь к иконке и все остальные браузеры её отображают, то и опера должна.
Suby, вот почему-то именно опера не отображает иконки, у меня html страница и так переименована в index.html, но иконка не появляется, в чем дело не знаю
Rustam, если в других браузерах фавикон отображается, то действительно нужно очистить кэш.
Как очистить кэш в опере
В Опере css отображается неправильно
Всем привет! Подскажите как сделать css чтобы в опере отображался так же как во всех браузерах
Меню неправильно отображается в Опере
Здравствуйте!! У меня проблема с отступами в горизонтальном меню: Как должно быть (пример из.
Фон не отображается в опере на моём компьтере
CSS div background-image не отображается в опере на моём компьтере, причем на работе в том же.
В svg-спрайте иконка отображается не так, как исходник
Такое дело в общем. Делаю проект со сборкой на gulp. Есть несколько svg-иконок, которые собираются.
И у меня не видно, Opera 8.02. Хотя в 8.00beta1 все было ОК.
favicon LOR'а разумеется. С остальными сайтами всё нормально.
А чтой-то такэ favicon? О чем глаголите?
В панели задач видел маленькие значки перед названием запущенной программы? Так вот favicon это то же самое, но для табов и закладок в браузере.
Прикольно, опера у меня эту картинку даже по ссылке не показывает
проверь в настройках, может блокиратор рекламы какой нить мешается
> Так вот favicon это то же самое, но для табов и закладок в браузере.
Вижу. Opera 7.54 для Linux
У меня тоже. Странно. Другие сайты работают.
Может что-нибудь с файлом? Он корректный? Как это можно проверить?
фтопку проприетарное подделие оперу, лис рулит :))
PS чесслово, под лисом все прекрасно работает :)
Чесслово, под лисом и в опере не пашет, только в konqui.
может это какой-то неправильный ico? в опере виндовой тоже не показывает.
да работает в фаирфоксе все
другое дело что он иногда пропадает ;) снова жму ентер, страница перезагружается и он снова тут как тут
>Чесслово, под лисом и в опере не пашет, только в konqui.
Пашет в лисе. А эксплойтер и не знает, что это такое. :)
А как можно проверить правильность иконки?
Странно, я вот здесь почитал:
Вроде на лоре все сделано по уму.
Сейчас загрузил иконку в отдельном окне Оперы. Посмотрел на Image Properties. Пишет, что
Dimension 0x0 pixels
Depth 0 bits per pixel
Image type ICO
File size 894 bytes
Я пытаюсь разместить SVG-значок на своем сайте, но что бы я ни делал, он просто не работает.
У меня есть следующий код, сохраненный как файл .svg в моем обычном местоположении значка, но когда я изменяю путь значка на .svg вместо .ico, ничего не загружается.
Это код, который я использую для установки значка;
Я не могу понять, связана ли это с моим кодом .svg или я что-то упускаю. Благодарность
Поддержка Chrome была добавлена только с версии 80.x.
Оптимизированные значки избранного SVG могут иметь размер всего 100–200 байтов, поэтому имеет смысл сделать внешний запрос. Просто вставьте его на страницу. При этом вы сохраните внешний запрос изображения, размер которого может быть больше ожидаемого из-за того, что файлы cookie отправляются при запросе изображений.
Как отмечали другие, поддержка браузеров пока невелика, но SVG Favicons предоставляют некоторые вещи, которые вы просто не можете сделать с PNG, например, стилизацию с помощью CSS и даже анимацию на основе JS.
Вот проблема Chrome для добавления поддержки, открытая с 2013 года с никакого реального прогресса из-за блокировщиков.
Вы можете попробовать вот так
Но большинство браузеров не поддерживает
Вам необходимо растрировать SVG для браузеров, которые не поддерживают значки SVG (а сейчас их большинство). См. Есть ли способ отображать значки SVG в неподдерживаемых браузерах?
Прежде всего, в коде, который вы используете для своих значков, отсутствует одна часть, она должна где-то включать. что говорит: type = "image / x-icon". Итак, для значков, использующих .jpg или другие стандартные изображения, такие как .jpg, код выглядит так:
1. Для расширения изображения подойдет .jpg [или вы можете использовать другое аналогичное расширение файла; .jpg тоже работает.] 2. Для rel достаточно "icon" [но вы также можете поставить слово "ярлык" рядом с / перед словом "icon", если хотите, по желанию.]
Для «фавикона» SVG это немного сложнее по нескольким причинам. Это необязательно, но для наилучшей работы вам нужно, чтобы размер изображения SVG не превышал 256 квадратных пикселей (16 пикселей на 16 пикселей, но, поскольку SVG обычно масштабируется, я рекомендую сразу перед попыткой установить высоту и ширину как 7
4. Иконка на рабочем столе компьютера
Если сохранить страницу сайта на свой компьютер, то будет создана иконка, которую можно, например, вынести на рабочий стол или панель быстрого доступа Windows. Если эта иконка будет представлять собой логотип, то это повысит лояльность к вашему бренду, а также его узнаваемость.
Какой должен быть размер Favicon?
Исторически сложились три стандартных формата favicon: 16×16, 32×32, 48×48. Однако в последние годы веб-платформы развились очень разносторонне, и на сегодняшний день включают в себя смартфоны, планшеты, телевизоры. На всех этих устройствах используются различные браузеры для доступа в интернет. Исходя из этого начали появляться и другие форматы favicon, такие как 96×96, 128×128, 196×196 и некоторые другие.
Очень сильно повлияло на стандарты размеров favicon появление первых iPhone и знаменитых retina-экранов от Apple с удвоенной плотностью пикселей, диктующих свои размеры изображений для favicon.
Проанализировав все возможные варианты устройств и мест использования favicon мы определили следующий набор иконок, которые обязательно должны присутствовать на сайте (значения указаны в пикселях):
Обязательная фавиконка
Все — старые и новые — веб-серверы и браузеры поддерживают .ico-формат.
Для подключения нужно добавить в :
Обратите внимание на две детали: размер и расположение.
Размер. В интернете можно найти информацию, что нужно подключать фавиконку в формате .ico в размере 16×16. Это так и не так. Дело в том, что контейнер ico динамический и он может изменять размеры «на лету». Поэтому браузеры, которые понимают размер 16×16, сами сожмут 32×32 до необходимого. В каком случае нужно создавать favicon.ico в размере 16×16? Когда фавиконка размером 32×32 при сжатии начнёт мылиться (будет нечёткой). Это можно проверить вручную, сжав фавиконку с 32×32 до 16×16. Если размыливание картинки произошло, то без дизайнера не обойтись и придётся отрисовывать фавиконку вручную в графическом редакторе.
Расположение. Фавиконку в формате ico обязательно нужно класть в корень проекта, как это показано в примере выше. Дело в том, что любой веб-сервер незаметно для вас всегда ищет favicon.ico в корне проекта и пытается её подключить к сайту.
Для устройств Apple
- 57×57 — iPhone (iOS 6 и ниже, экран Classic)
- 60×60 — iPhone (iOS 7, экран Classic)
- 72×72 — iPad (iOS 6 и ниже, экран Classic)
- 76×76 — iPad (iOS 7, экран Classic)
- 114×114 — iPhone (iOS 6 и ниже, экран Retina)
- 120×120 — iPhone (iOS 7, экран Retina)
- 144×144 — iPad (iOS 6 и ниже, экран Retina)
- 152×152 — iPad (iOS 7, экран Retina)
- 180×180 — iPhone (iOS 8 и выше, экран 6 Plus)
3. Иконка в поисковой выдаче
Поисковые системы Яндекс и Google выводят favicon слева от ссылки на страницу сайта. Это важный фактор, т.к. на сайты, имеющие favicon, кликают чаще, чем на сайты без favicon.
Подключение
Чтобы иконка начала отображаться, на вкладке нужно подключить файл с графическим отображением иконки. Для правильного подключения иконки нужно использовать обязательные требования браузера и минимальный набор фавиконок, который мы сейчас подробно рассмотрим.
Почему именно набор, а не одну иконку? Дело в том, что браузеры и экраны развиваются и не стоят на месте. Чем современнее браузер, тем более современный формат он может поддерживать. Например, вы можете подумать, что можно подключить только одну SVG-иконку и браузер уже сам правильно отрисует её, но не все браузеры до сих пор поддерживают SVG-формат для фавиконок. На таблицу совместимости SVG-фавиконок можно посмотреть тут.
Читайте также: