Как найти иконку на странице - AvtoShod.ru - решение различных проблем

Фавиконка (favicon) — это иконка, которая отображается во вкладке браузера перед названием страницы. Также эта иконка отображается в закладках и на рабочем столе для веб-приложений.

Фавиконка при установке веб-приложения

Фавиконка на вкладке в браузере

Подключение

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

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

Эта статья — фрагмент из учебника по вёрстке с курса «HTML и CSS. Профессиональная разработка сайтов».

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

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

Для подключения нужно добавить в <head>:

<head>
  <link rel="icon" href="favicon.ico"><!-- 32×32 -->
</head>

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

Размер. В интернете можно найти информацию, что нужно подключать фавиконку в формате .ico в размере 16×16. Это так и не так. Дело в том, что контейнер ico динамический и он может изменять размеры «на лету». Поэтому браузеры, которые понимают размер 16×16, сами сожмут 32×32 до необходимого. В каком случае нужно создавать favicon.ico в размере 16×16? Когда фавиконка размером 32×32 при сжатии начнёт мылиться (будет нечёткой). Это можно проверить вручную, сжав фавиконку с 32×32 до 16×16. Если размыливание картинки произошло, то без дизайнера не обойтись и придётся отрисовывать фавиконку вручную в графическом редакторе.

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

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

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

project/
  favicon.ico
  img/
    180.png
    192.png
    512.png
    icon.svg

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

project/
  favicon.ico
  img/
    favicons/
      180.png
      192.png
      512.png
    icon.svg

SVG

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

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

<head>
  <link rel="icon" href="images/favicons/icon.svg" type="image/svg+xml">
</head>

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

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

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

<head>
  <link rel="apple-touch-icon" href="images/favicons/apple.png"><!-- 180×180 -->
</head>

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

Устройства Apple работают и с большими размерами иконок, но так получилось, что устройства, которые понимают большие размеры, можно подключать более современным способом с помощью манифеста. Манифест позволит скрыть подключение всех размеров из <head>, что сделает разметку более читаемой.

Манифест

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

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

Файл. Создадим файл в корне проекта и назовём его manifest.webmanifest. Расширение .webmanifest нужно указать, чтобы браузер понимал, с каким файлом имеет дело. Само название файла может быть любым (в нашем случае — manifest).

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

manifest.webmanifest
{

}

Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:

manifest.webmanifest
{
  "icons": []
}

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

manifest.webmanifest
{
  "icons": [
    { "src": "", "type": "", "sizes": "" }
  ]
}

Если иконок несколько, то их нужно добавить через запятую:

manifest.webmanifest

{
  "icons": [
    { "src": "", "type": "", "sizes": "" },
    { "src": "", "type": "", "sizes": "" },
    { "src": "", "type": "", "sizes": "" }
  ]
}

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

manifest.webmanifest

{
  "icons": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Настройки:

src — путь до иконки;
type — тип иконки;
sizes — размер иконки.

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

manifest.webmanifest

{
  "icons": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "images/favicons/256.png", "type": "image/png", "sizes": "256x256" },
    { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Откуда брать фавиконки и как их приготовить

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

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

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

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

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

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

Итог

Итоговый способ подключения фавиконки:

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

manifest.webmanifest

{
  "icons": [
    { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

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

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

Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.

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

Используете ли вы webmanifest для подключения фавиконок?

Проголосовали 158 пользователей.

Воздержались 30 пользователей.

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

Используете ли вы SVG-иконки?

Проголосовали 165 пользователей.

Воздержались 28 пользователей.

Источник

Как извлечь SVG как файл с веб-страницы

Я хочу сохранить SVG как файл с этой страницы https://www.lightningdesignsystem.com/icons/ Есть ли расширение Chrome или другой способ сделать это?

9 ответов

Если я вас не правильно понял, это может быть так же просто, как осмотреть ( F12 ) значок на странице, чтобы определить путь к исходному файлу .svg, и перейти по этому пути напрямую (Example), а затем просмотрите исходный код страницы с помощью Control + и . Тогда просто сохраните этот код.

Вы можете скачать отдельные с их сайта, как заявлено @mayerdesign, или вы можете нажать на ссылку для скачивания слева, и вы можете скачать весь пакет.

Все они зарегистрированы в элементах в инструментах разработчика Google Chrome.

1. Проверьте страницу с включенным svg.

2. Нажмите на ссылку, которая отображает изображение в полном разрешении.

3. выполните CMD / CTRL + S

4. Вы закончили!

В Chrome, когда есть в SVG URL, вы можете сделать CTRL + S или CMD + S, и он автоматически предложит вам сохранить страницу как .SVG попробуйте: https: //upload.wikimedia. орг / википедия / обыкновенные / 9 /90 / Benjamin_Franklin — 10_Dollar_Bill_Portrait — Vector.svg

Трехэтапное решение Скопируйте фрагмент кода svg и вставьте его на новую html-страницу. Сохраните HTML-страницу как logo.html, а затем откройте эту HTML-страницу в Chrome. Файл> Распечатать «Сохранить как PDF», теперь PDF можно открыть в Illustrator, извлекая элемент вектора.

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

Для меня очень просто установить следующий инструмент на сервере Chrome:

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

Надеюсь, это будет полезно.

Я не знаю, правильно ли на это уже ответили или нет. Хорошо. Загрузка файла из источника не является разрешением. Как получить * .svg с URL.

Я установил дополнение ‘svg-grabber’ к Google Chrome. Это только частично решает мою проблему, так как Google Chrome не имеет ярлыка «Назад» на одну страницу.

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

Папка в WordPress: . / static / img / icons /

Я добавил надстройку «Вернуться с Backspace» в Chrome, так как мне приходилось нажимать на каждый файл отдельно, как если бы это были белые значки (которые я сейчас ищу), вы их не увидите. Вы должны нажать на файл. Потом обратно. Это заняло слишком много времени. Теперь все в порядке. Есть софт для скачивания определенной папки, но я не хочу скачивать половину интернета, чтобы просто получить белый.

Когда вы нажимаете на белый значок, открывается новая вкладка, но она вся белая. Затем вы нажимаете на значок svg-grabber в Chrome, и он откроет его в новом окне на черном фоне с кнопкой «загрузить все svg».

Как получить favicon сайта по его URL на PHP/jQuery

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

Как это можно сделать, я сейчас подробно расскажу.

Как получить favicon сайта по его URL на PHP

В PHP основную идею реализации мы заложим в класс «DOMDocument», с помощью которого получим содержимое указанной страницы и найдем в ее коде ссылку на favicon.

Ссылку в примере заменяете на свою.

Как получить favicon сайта по его URL на jQuery

В jQuery в качестве помощника мы воспользуемся сервисом Google, а именно – ссылкой «https://www.google.com/s2/favicons?domain=». Если мы подставим в нее нужный нам домен, то получим favicon сайта.

Где «#result» – это id элемента, в который необходимо вывести результат.

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

В таком случае ко всему блоку ссылок добавится их favicon.

Если возникли трудности в использовании одного из способов – пишите об этом в комментариях.

Рабочие способы извлечь изображения с веб-страницы

star star star star star 5.0 Оценок: 4 (Ваша: )

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

Как вытащить изображения с помощью программы

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

Шаг 1. Сначала сохраните веб-страницу с изображением как PDF-файл. Если работаете в браузере Google Chrome, вам нужно перейти к настройкам и управлению (три вертикальные точки в правом верхнем углу). В выпадающем списке кликните «Печать». Когда появится новое окно, найдите строку выбора принтера. Из доступных вариантов нужно указать сохранение в PDF.

Сохраните страницу как PDF

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

Шаг 2. Полученный файл нужно открыть в программе PDF Commander. Если она у вас ещё не установлена, то скачайте дистрибутив и инсталлируйте её на компьютер.

Шаг 3. В стартовом меню программы нажмите кнопку «Открыть PDF». Из папки компьютера выберите файл со скачанной веб-страницей.

Откройте сохраненный файл в программе

Шаг 4. Когда документ появится в рабочем поле редактора, кликните «Файл» –> «Инструменты»
–> «Извлечь изображения». Программа предложит выбрать путь сохранения. Желательно создать новую папку, чтобы потом вы могли легко найти нужную иллюстрацию.

Извлеките картинки из файла

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

Как извлечь изображения с помощью кода страницы

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

Шаг 1. Кликните правой кнопкой мыши и выберите пункт «Просмотр кода страницы».

Кликните правой кнопкой мыши по странице

Шаг 2. Появится лист со строками кода. Поиском найдите там ссылки формата JPG или PNG.

код

Так выглядит код страницы

Шаг 3. Теперь найденные ссылки нужно скопировать и поочередно вставить в строку браузера, чтобы найти нужную вам картинку. Когда вы обнаружите искомое изображение, сохраните его на компьютере. В Яндекс.Браузере это делается с помощью кнопки под картинкой, а в Google Chrome – через «Настройки и управление».

Выбранную ссылку вставьте откройте в браузере

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

Как сохранить изображения с помощью консоли разработчика

Этот метод несколько похож на предыдущий:

Шаг 1. Чтобы перейти в консоль разработчика, на странице с картинкой кликните Ctrl+Shift+i. Справа откроется специальная панель. Также получить туда доступ можно другим способом: нажмите правую кнопку мыши и выберите «Посмотреть код».

Нажмите «Посмотреть код»

Шаг 2. В верхней части панели вы увидите значок », на который нужно кликнуть. Появится список, в котором следует выбрать вкладку «Network».

Network

Перейдите к вкладке Network

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

Выберите нужную из списка картинок

Сохранение картинки через консоль разработчика – это вполне эффективный, но при этом достаточно сложный способ. Скорее всего подойдёт он далеко не всем.

Заключение

Итак, вы можете выбрать любой из трёх предложенных способов. Два последних позволяют обойтись без стороннего софта, но сложны в исполнении и занимают много времени. Программа для скачивания картинок с сайта PDF Commander, в свою очередь, дает возможность получить изображения легко и быстро. Все картинки со страницы окажутся в одной папке. Более того, данное ПО также предлагает практичные инструменты для создания, чтения, редактирования и защиты PDF файлов. Скачайте программу и попробуйте сами!

Источник

'Как Сегодня хочу «спалить» способ как можно посмотреть фавикон (favicon) с любого сайта не заходя на сайт.
В двух словах напомню тем кто забыл: Favicon (сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в вкладках и в других элементах интерфейса.
Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корень сайта под именем favicon.ico

у Google есть так сказать специальный сервис через который можно посмотреть иконку
www.google.com/s2/favicons?domain= тут дописываем домейн
например
http://www.google.com/s2/favicons?domain=webtun.com

у Яндекса тоже есть такая опция (правда Яндекс показывает favicon только с проиндексированного им сайта)
http://favicon.yandex.net/favicon/webtun.com

Faviconize Google

'Как

Кто хочет может поставить себе скрипт который добавляет фавиконы на страницу поиска Google. Как Яндекс. Работает в последних версиях Firefox, Opera и Safari.

Скачать

faviconize-google.user.js

офф. страничка

Faviconize Google

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

в Опере

1) Открываем Preferences → Advanced → Content → jаvascript Options…
2) Указываем в User jаvascript files папку, куда мы будем класть скрипты

в Firefox

1) Устанавливаем расширение

Greasemonkey

.
2) Открываем *.user.js файл.

в Internet Explorer

1) Устанавливаем

IE7 Pro

2) Открываем ieuser.js файл. Вот, например,

GoogleAutoPager2008.ieuser.jsв Safari

1) Устанавливаем

GreaseKit

2) Открываем *.user.js файл

Источник

Иконка для сайта — это как визитная карточка сайта или торговая марка для компании. Если на сайте нет достойной иконки, тогда доверие к сайту резко понижается. На этот раз, я расскажу вам об очень полезном онлайн сервисе. Уверен, что вам он очень пригодится и понравится.

На любом сайте есть иконки. Очень часто их используют как ссылки на социальные сети: Twitter, RSS ленту или другое. Кроме того можно сделать отличное превью для постов на блоге, создав коллаж из нескольких иконок.

Вообщем иконки используются очень часто. Я захожу на сайт FINDICONS всегда, когда мне нужно красиво оформить сайт. Он незаменим: http://findicons.com/.

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

Есть ещё вариант. Можно найти иконки в поисковиках. Просто можно написать «иконки для сайта», «иконки Twitter» и прочее.

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

А самый лучший вариант — это FindIcons! Первое, что сразу поражает это огромное количество иконок.

Искать иконки вы сможете сразу, введя соответствующие слова в строку и нажав на кнопку «Поиск». Но хотелось бы отметить следующее: перед тем, как ввести слово (фразу), переведите ее с русского на английский, так как русские слова сервис не понимает.

Тем не менее, функционал сервиса поражает: на данный момент имеется свыше 400 000 иконок! Сайт FindIcons имеет очень хорошую систему поиска иконок: по стилю, по цветовой гамме, по цвету фона, по темам и по размеру.

Все что вы найдёте, совершенно бесплатно и доступно для скачивания.

Итак, вот что нашел сервис по моему запросу (запрос слова: «green»):

Как видим, можно делать выборку по определенным параметрам: стиль, порядок, лицензия и окно. Не все подобные сервисы могут этим похвастаться. Кроме этого, вы можете загрузить своё изображение и сделать из него иконку в любом формате, который вам нужно:

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

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

Надеюсь, вам поможет данная статья улучшить свое виртуальное детище!

Понравился пост? Нажми любую кнопку:

Источник

Главная»
Уроки»
Для сайта»
10 онлайновых сервисов для поиска иконок

Метки урока:
сервисы

Найти подходящую иконку для проекта бывает очень сложно, особенно, когда нужно просеять тысячи и тысячи наборов бесплатных иконок. Такой поиск не только отнимает продуктивное время, но и зачастую заканчивается с нулевым результатом.
Благодаря поисковым сервисам для иконок можно переложит всю тупую работу по поиску на них. Нужно только ввести критерий поиска (на английском языке), например, home или email, и сервисы произведут поиск по своим базам данных и выдадут список икнок, которые наилучшим образом подходят под критерий поиска.

1.FindIcons.com

2. Iconfinder

3. iconlet

4. Icon Seeker

5. Very Icon

6. ICONlook.com

7. Icons Search Engine

8. Icon Lib

9. Open Icon Library

10. Icon Archive

5 последних уроков рубрики «Для сайта»

Эффекты блочного раскрытия

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

Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.
20 бесплатных тем для WordPress в стиле Material Design

Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.
20 сайтов с креативным MouseOver эффектом

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

Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.