Как создавать иконки сайтов в 2023 году — всё о favicon — Михаил Гок на vc.ru

Эта статья перевод англоязычной статьи Андрея Ситника из блога Злых марсиан.

584 просмотров

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

Статья глубоко погружается в тему, поэтому в начале я даю два фрагмента кода для тех, кто уже достаточно настрадался и понимает, что делать. Тем не менее, я всем рекомендую читать статью целиком!

Экстремально короткая версия

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

HTML:

<link rel=»icon» href=»/favicon.ico»><!— 32×32 —> <link rel=»icon» href=»/icon.svg» type=»image/svg+xml»> <link rel=»apple-touch-icon» href=»/apple-touch-icon.png»><!— 180×180 —> <link rel=»manifest» href=»/manifest.webmanifest»>

apple touch icon лучше ставить в начало — так старые версии сафари используют иконку лучше, а другим браузерам это не мешает

замечание от переводчика

И файл веб-манифеста:

// manifest.webmanifest { «icons»: [ { «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» } ] }

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

Воспользуйтесь генератором иконок, созданным по этой статье

Длинная версия, со всеми объяснениями

Концепция favicon (является сокращением от favorite icon, «любимая иконка»), существует с начала 2000-х годов. Мы каждый день видим эти милые маленькие изображения на панели вкладок браузера, они помогают нам различать открытые веб-сайты. Пользователи ожидают, что на вашем сайте будет favicon. Это одна из тех мелочей, которые заставляют людей относиться к вам серьезно.

Даже Apple, у которой всегда была какая-то эстетическая война с иконками (их не принимали в Купертино, скрывая favicon в Safari в течение многих лет) наконец-то сдалась и теперь правильно отображает их на всех своих устройствах.

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

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

Набор favicon, генерируемых популярным онлайн-генератором

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

Таким образом, я поставил перед собой цель создать минимальный список favicon, которые будут работать во всех случаях и во всех браузерах, за исключением некоторых редких случаев, но даже там всё будет работать, просто не на 100% идеально.

Идеальный набор Favicon

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

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

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

  • Имея всего 3 PNG-файла, можно позволить себе оптимизировать их сильнее, хитро подбирая параметры в сложных инструментах. Это решит проблему тех пользователей, которые платят за каждый МБ на своём интернет-тарифе.

Теперь перейдём к тому минимальному набору, который я вывел из своих исследований и экспериментов. Этот список должен работать со всеми популярными браузерами и устройствами, как старыми, так и новыми.

  1. favicon. ico для устаревших браузеров

    Файлы ICO могут содержать внутри несколько версий изображения под разный размер. Я рекомендую придерживаться одного изображения размера 32 × 32. Версию 16×16 стоит создавать только если логотип не становится слишком размытым или ваш дизайнер вручную может перерисовать его под этот размер. Именно этот файл лучше держать по точному адресу: https://example.com без кеш-бастеров и хитрых путей. Значок должен быть на https://example.com/favicon.ico. Некоторые инструменты, такие как RSS-ридеры, просто запрашивают /favicon.

    ico с сервера и не утруждают себя поиском в другом месте. Нам нужны sizes=«any» для на файл. ico, чтобы исправить ошибку Chrome, из-за которой он выбирает файл ICO вместо SVG.

  2. Один значок SVG со светлой/темной версией для современных браузеров SVG — это векторный формат, который описывает кривые вместо пикселей. При больших размерах это более эффективно, чем растровые изображения. На момент написания этой статьи 72% всех браузеров поддерживают SVG-иконки. Ваша HTML-страница должна иметь тег в с rel=«icon», type=»image/svg+xml» и с href, содержащим ссылку на SVG-файл с атрибутами.

    SVG — это формат XML, он может содержать тег системными темами.

  3. Изображение PNG 180×180 для устройств Apple Значок Apple touch — это изображение для рабочего стола iPhone или iPad. На вашей HTML-странице должен быть тег внутри. Начиная с iOS 8+, для iPad требуется изображение с разрешением 180 × 180. Более старые устройства уменьшат его масштаб. Вопрос производительности пояснён выше.Небольшое примечание: значок Apple touch будет выглядеть лучше, если сделать ему отступ размером 20 пикселей и добавить цвет фона. Для этого вы можете использовать любой графический редактор.

  4. Манифест веб-приложения с иконками PNG 192×192 и 512×512 для устройств Android

    — Манифест веб-приложения — это файл JSON, содержащий все сведения, необходимые браузеру для установки вашего веб-сайта в качестве системного приложения. Этот формат появился у Google в рамках инициативы PWA. — Ваша HTML-страница должна содержать тег со ссылкой на файл манифеста. — В манифесте должно быть поле icon, которое ссылается на два значка: 192 × 192 для отображения на главном экране и 512 × 512, которые будут использоваться в качестве заставки при загрузке PWA.

{ «icons»: [ { «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» } ] }

Мы кого-то забыли?

Конечно, есть и другие варианты favicon. Дальше я объясняю, почему они устарели. Возможно, пришло время попрощаться с некоторыми менее успешными форматами.

Значок плитки Windows

Microsoft Edge раньше поддерживал специальный формат значков для прикрепления веб-сайтов к меню «Пуск». Для последних версий Windows это больше не требуется.

Закрепленный значок Safari

Ранее в Safari требовался монохромный значок SVG для закрепленных вкладок. Однако, начиная с Safari 12, мы можем использовать обычный значок для закрепленных вкладок. Дажеapple. com больше не использует mask-icon.

rel=”shortcut”

Многие (ныне устаревшие) руководства будут включать значок favicon. ico в HTML, как тут:

<link rel=»shortcut icon» href=»/favicon.ico»>

Имейте в виду, что shortcut не является и никогда не был допустим в отношении ссылки. Прочтите эту удивительную статью Матиаса Байненса десятилетней давности, в которой объясняется, почему нужно писать просто icon, а не shortcut icon.

Yandex Tableau

Яндекс Браузер — это браузер на базе Chromium от крупнейшей российской поисковой системы.

В России его доля на рынке составляет 20%. У него есть приятная функция, которая позволяет веб-сайту отображать текущие данные в виджетах на главном экране с помощью специального JSON-манифеста, предоставляемого ссылкой yandex-tableau-widget. Однако эта функция оказалась не очень популярной, и теперь Яндекс удалил соответствующую техническую документацию со своего сайта. Обычные манифесты значков будут работать также хорошо.

Opera Coast

В прошлом, Opera Coast — экспериментальный браузер для iOS, требовал специального значка размером 228×228. Этот браузер покинул App Store в 2017 году, и я сомневаюсь, что с тех пор он пережил многочисленные обновления iOS.

Теперь, когда мы попрощались с нашими павшими товарищами, давайте посмотрим, как создать идеальный набор favicon для тех, кто всё ещё стоит на ногах.

Как создать окончательный набор favicon

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

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

Шаг 1: Подготовка SVG

Убедитесь, что изображение в формате SVG имеет квадратную форму. Откройте исходный файл в вашем системном средстве просмотра и проверьте ширину и высоту изображения. Размер SVG легко настроить с помощью любого редактора SVG. В Inkscape вы можете изменить размер документа, выбрав File → Document Properties, а затем отцентровать логотип с помощью Object → Align и Distribute.

Сохраните ваш файл в формате icon. svg. Теперь давайте поработаем с SVG и сделаем так, чтобы он хорошо сочетался с современными системными темами. Спросите своего дизайнера, как следует инвертировать цвета для темной темы (в черно-белых логотипах вы просто меняете черный на белый).

Теперь откройте свой SVG-файл в текстовом редакторе. Найдите с темной или отсутствующей заливкой. Добавьте медиа-выражение CSS, которое будет запускаться при изменении темы, и измените заливку на нужные вам цвета:

<svg xmlns=»http://www. w3.org/2000/svg» viewBox=»0 0 500 500″> + <style> + @media (prefers-color-scheme: dark) { + .a { fill: #f0f0f0 } + } + </style> — <path fill=»#0f0f0f» d=»…» /> + <path fill=»#0f0f0f» d=»…» /> </svg>

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

Шаг 2: Создание ico файла

Откройте свой файл icon. svg в редакторе растровой графики. Я рекомендую GIMP; он бесплатный и мультиплатформенный.

Согласитесь на конвертацию SVG в растр. Установите ширину и высоту равными 32 пикселям. Экспортируйте файл в favicon. ico с использованием настроек: 32 бит/с, 8-битный альфа-код, без настроек палитры (32 bpp, 8-bit alpha, no palette).

Если у вас нет GIMP, вы можете установить Inkscape и ImageMagick и преобразовать SVG в ICO в терминале:

inkscape ./icon.svg —export-width=32 —export-filename=»./tmp.png» # In Windows call `magick convert . /tmp.png ./favicon.ico` convert ./tmp.png ./favicon.ico rm ./tmp.png

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

Чтобы включить отдельную версию значка размером 16×16:

  • Откройте значок favicon. ico со значком 32×32.
  • Создайте новый слой размером 16×16.
  • Поместите в этот слой версию значка размером 16×16.
  • Экспортируйте файл. GIMP сохранит каждый макет как отдельную версию значка.

Или вы можете сделать то же самое в ImageMagick с помощью:

convert ./icon-32.png ./icon-16.png ./favicon.ico

Шаг 3: Создание png изображений

Снова откройте исходный SVG-файл в редакторе растровой графики и создайте изображение размером 512×512. Экспортируйте его в видеicon-512.png.

Масштабируйте изображение до 192×192 и экспортируйте его в icon-192. png. Теперь масштабируйте само изображение до 140×140 и установите размер холста 180 ×180, а затем экспортируйте его в формате apple-touch-icon. png.

Или вы можете сделать то же самое в Inkscape:

inkscape ./icon.svg —export-width=512 —export-filename=»./icon-512.png» inkscape ./icon.svg —export-width=192 —export-filename=»./icon-192.png»

Шаг 4: Оптимизация SVG и PNG файлов

Лучшее средство для оптимизации svg — это SVGO. Чтобы использовать его, запустите:

npx svgo —multipass icon.svg

Squoosh — отличное веб-приложение для оптимизации растровых изображений:

  • Откройте icon-512.png в Squoosh.
  • Измените настройку сжатия на OxiPNG.
  • Включите уменьшение палитры: “Reduce palette”.
  • Установите 64 цвета.
  • Сравните «до« и »после», перемещая ползунок. Если вы видите разницу, увеличьте количество цветов.
  • Сохраните файл. Повторите эти действия для icon-192.png и apple-touch-icon. png.

Шаг 5: Добавление иконок в HTML

Вам нужно добавить ссылки в favicon.ico и в apple-touch-icon.png в ваш HTML.

Для статического HTML:

<title>My website</title> + <link rel=»icon» href=»/favicon.ico»> + <link rel=»icon» href=»/icon.svg» type=»image/svg+xml»> + <link rel=»apple-touch-icon» href=»/apple-touch-icon.png»>

Шаг 6: Создание web app manifest

Для статического HTML создайте JSON-файл с именем: manifest. webmanifest:

{ «name»: «My website», «icons»: [ { «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» } ] }

И добавьте в свой html-файл:

<title>My website</title> + <link rel=»manifest» href=»/manifest.webmanifest»> <link rel=»icon» href=»/favicon.ico»> <link rel=»icon» href=»/icon. svg» type=»image/svg+xml»> <link rel=»apple-touch-icon» href=»/apple-touch-icon.png»>

При работе с Webpack вы можете использовать плагин webpack-pwa-manifest:

plugins: [ …, new WebpackPwaManifest({ name: ‘My website’, icons: [ { src: resolve(‘./icon-192.png’), sizes: ‘192×192’ }, { src: resolve(‘./icon-512.png’), sizes: ‘512×512 } ] }) ]

Спасибо вам за чтение! С современными веб-стандартами легко создать свой набор значков даже руками. Но это не значит, что мы против автоматизации. Если у вас есть, что добавить к набору иконок — пишите мне в Твиттер.

Автор: Андрей Ситник

Сайт, twitter

Перевод: Михаил Гок

Генератор иконок по заветам этой статьи.

О favicon и не только

Форматы favicon

Основными форматами для favicon являются ICO, PNG и SVG. При желании, значок сайта можно сделать в форматах JPEG или анимированном GIF. Но из-за слабой поддержки основными браузерами использование таких значков превращается в нецелесообразную экзотику. Хотя и можно сделать favicon в формате GIF без анимации, но не нужно – лучше в PNG.

Favicon.ico

Хотя формат ICO сейчас считается устаревшим, но сбрасывать со счетов его ещё рано. Основными достоинствами этого формата являются: возможность хранения в одном файле нескольких вариантов размеров иконки сайта и поддержка полупрозрачности. Надо помнить что, IE10 и более ранние версии этого браузера понимают только ICO. Так же следует учитывать то, что этот формат довольно широко используется в операционной системе Windows. Т. е. favicon.ico используется как изображение для вкладок, панели задач, рабочего стола. Поэтому для корректного отображения на этих объектах, создаётся файл в формате ICO, содержащий три изображения рекомендуемых размеров: 16х16, 32х32 и 48х48. Сделать такой файл можно здесь. Подключение favicon.ico на сайте производится с помощью следующего кода:

<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

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

Favicon.png

Формат PNG предоставляет более широкие возможности для изображения, чем ICO. Сейчас очень большое количество сайтов используют favicon в формате PNG. Он поддерживается всеми основными браузерами. Подключение favicon.png на сайте производится с помощью следующего кода:

<link href="/favicon.png" rel="icon" type="image/png" />

Favicon.svg

Формат SVG — новый открытый формат векторной графики. В силу того, что изображения в SVG масштабируются без потери качества, он идеально подходит для favicon. Этот формат является рекомендацией консорциума W3C, его поддерживают ещё не все браузеры, но за ним будущее. Подключение favicon.svg на сайте производится с помощью следующего кода:

<link href="/favicon.svg" rel="icon" type="image/svg+xml" />

Отслеживать поддержку SVG браузерами можно здесь.

Favicon – устройства, ОС, технологии

С приходом HTML 5 появилась возможность указывать размеры favicon. Теперь различные мобильные устройства или браузеры могут выбрать необходимый размер значка и использовать его, например, как изображение для ярлыка на рабочем столе. За указание размеров отвечает атрибут size. Делается это так:

<link href="/favicon-32x32.png" rel="icon" type="image/png" />
<link href="/favicon-16x16.png" rel="icon" type="image/png" />

Для favicon.svg можно сделать так:

<link href="/favicon.svg" rel="icon" type="image/svg+xml" />

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

Windows

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

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/mstile-70x70.png"/>
            <square150x150logo src="/mstile-150x150.png"/>
            <square310x310logo src="/mstile-310x310.png"/>
            <wide310x150logo src="/mstile-310x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Он описывает четыре изображения для различных размеров живых плиток: три квадратные и одно прямоугольное. В теге TileColor указывается фоновый цвет плитки. Сами изображения следует брать большего размера, примерно в 1,8-2 раза. Например, для плитки 70×70 лучше взять изображение размером 128×128. Делается это с целью поддержки экранов с высокой плотностью пикселов. Подключение файла конфигурации браузера на сайте производится с помощью следующего кода: 

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

Mac OS и Safari

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

<link href="/safari-pinned-tab.svg" rel="mask-icon" color="#598473" />

Обратите внимание на то, что имя файла и значение rel должны быть такими, как в примере.

Apple (iOS)

Safari в устройствах Apple, на базе операционной системы iOS тоже использует иконку сайта для закладок. Но favicon может использоваться и как значок на рабочем столе. Для того, чтобы на устройствах Apple значок сайта смотрелся прилично, понадобятся изображения в формате PNG и несколько строк кода. Устройств на базе iOS довольно много и они имеют различные размеры экранов. Для каждого размера нужен свой значок. Размеры этих значков следующие: 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152, и 180×180. В некоторых источниках рекомендуется писать код для каждого размера favicon. Объясняется это тем, что иконки для устройств от Apple, в виду их большой популярности, используются (ищутся) устройствами других производителей. Вот так подключается изображение для одного из размеров:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

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

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Затем добавим строку кода из предыдущего примера:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Т. е. по крайней мере, основная иконка должна быть 180×180. Остальные устройства могут уменьшить изображение. Есть ещё одна тонкость, иконки в iOS оформляются в определённом стиле, т. е. используются скругленные уголки, тень, блики. Когда загружается значок сайта, устройство начинает приводить его к этому стилю. Если это не нужно, то добавляем следующий код:

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />

А ещё можно указать заголовок:

<meta name="apple-mobile-web-app-title" content="Aitishnik.RU" />

Android

К сожалению, изображения в формате SVG пока не поддерживаются ОС Android. Поэтому используются изображения в формате PNG. Для настроек используется файл manifest.json. Он может быть следующего содержания:

{
    "name": "Aitishnik.RU",
    "icons": [
        {
            "src": "android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "start_url": "http://www.aitishnik.ru",
    "display": "standalone"
}

Файл – манифест описывает настройки отображения сайта на домашнем экране, как веб-приложения. В примере:

name – подпись к приложению. Если ключ name не указан, то для подписи будет использоваться содержимое тега title из заголовка сайта. Если значение name длинное, то можно добавить ключ short_name для короткой подписи.

icons – этот ключ определяет набор иконок. Внутри него ключи src, sizes и type определяют источник изображения, размер и тип изображения соответственно.

theme_color – передаёт цветовое значение строки состояния.

background_color – фоновый цвет для иконки на домашнем экране.

display – режим отображения веб-приложения.

Файл manifest.json подключается в заголовке сайта следующим кодом:

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

Заключение

У человека, прочитавшего всё вышеизложенное, может сложиться впечатление, что всё это очень сложно и нудно. Отчасти это так. Но к счастью, есть сервисы, которые делают всю эту работу за нас. Например, http://realfavicongenerator.net. На этом ресурсе можно сгенерировать все нужные иконки и получить код для вставки на сайт.

Вот и всё. Удачи в сайтостроении!

Помните, что у нас вы можете не только купить готовый сайт или заказать его разработку, но и подобрать подходящий тариф поддержки сайта, заказать продвижение сайта в поисковых системах, а так же зарегистрировать домен в одной из двухсот доменных зон и выбрать недорогой тариф хостинга! Айтишник РУ

Задать вопрос

Об авторе:

Меня зовут Андрей Золкин. Из более, чем пятнадцати лет работы в сфере информационных технологий, десять лет работаю с системами, базирующимися на открытом исходном коде. На страницах сайта Aitishnik.Ru веду блоги по CMC Joomla и Debian GNU/Linux.

 

Ещё о сайтостроении

    • Сайт. С чего начать?

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

    • Landing page: сам себе режиссер

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

    • Бесплатный сайт с помощью конструктора – преимущества и недостатк…

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

    • Конструктор — как инструмент создания сайта…

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

    • Создание логотипа для привлечения посетителей …

      Быть может, у пользователя уже есть готовый сайт, который удовлетворяет его со всех точек зрения. Тем не менее, число посетителей нестабильно. В чем же причина этого? Не хватает запоминающегося логотипа. На практике он всегда работает на…

    • Основы юзабилити

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

html — нужно ли включать?

спросил

Изменено 1 месяц назад

Просмотрено 548 тысяч раз

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

  ico" type="image/x-icon " />

С какой целью это включено?

  • HTML
  • Фавикон
1

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

1

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

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

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

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

6

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

  1. Я могу принудительно обновить значок, добавив параметр запроса, например, ?v=2 . так:

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

0

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

1

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

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

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

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

Вам вообще не нужен «favicon.ico» размером 16×16. Используйте элементы HTML , вложенные в ваш элемент . Веб-браузеры будут использовать очень маленькие изображения, но размеры изображений, которые Google требует и поддерживает для их отображения в результатах поиска, кратны 48 пикселям.

Ваша фавиконка должна быть кратна квадрату 48px, например: 48x48px, 96x96px, 144x144px и так далее. Файлы SVG не имеют определенного размера. Любой действительный значок формат поддерживается.

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

Итак, что-то вроде того, что я использую для фавиконов:

используйте ctrl + shift del для очистки кеша браузера или в истории

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

Добавление фавикона в файл HTML без хоста?

спросил

Изменено 2 года, 1 месяц назад

Просмотрено 364 раза

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

HTML:
2

Вам нужно включить свой значок в папку с именем favicon_io и назвать свой значок favicon.ico

Или

Просто поместите значок в корневую папку, где находится ваш index. html и измените свой href на 9 0005

" .

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

Если это не сработает, используйте инструменты разработчика Chrome и откройте вкладку «Сеть». Проверьте, правильно ли загружен ресурс favicon в DOM.

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

Обязательно добавьте свой код в шапку.

 

    <голова>
        
    
    <тело>

Импортирует значок для представления документа.

Пример:

1

Существует ряд других распространенных типов, с которыми вы столкнетесь.