Как скачать фавикон с сайта

Способы скачивания favicon-а (иконок) с любого сайта и последующая установка на WordPress

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

Именно поэтому мы покажем, как можно скачать иконку или favicon с другого сайта.
Для этого переходимо по одному из серверов от Google или Яндекс:
http://www.google.com/s2/favicons?domain=pprservis.ru
http://favicon.yandex.net/favicon/pprservis.ru

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

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

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

Кстати, ПРОЧИТАВ ДАЛЕЕ статью можноо узнать о том, как установить иконку на WordPress.

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

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

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

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

Для этого достаточно ввести в поисковике «Скачать бесплатно favicon», и вам предложат большой выбор онлайн сервисов. Есть несколько рекомендаций относительно того, какими параметрами должны обладать иконки для сайта:

Расширение .ico (хотя допустимы форматы .png .gif)
Размер 16х16 (допустимо 24х24, 32х32, 48х48, 64х64, 128х128)

Если придерживаться стандарта, то проблем ни в одном браузере или поисковике не должно возникнуть. Обратите внимание, если вы не нашли подходящего для себя favicon, тогда его можно создать самому. Скачайте любую понравившуюся картинку, и при помощи программы «IcoFX» (в Google полно бесплатных русских версий) создайте приемлемый вариант. Сложностей в программке нет, поэтому разберётесь без проблем.

Теперь же обратимся к непосредственной теме статьи: как установить иконку на сайт wordpress. Существует три варианта решения данной задачи:

Воспользоваться функцией темы (если таковая имеется в шаблоне);
Дописать код в файл «header»;
Установить плагин;

Первый пункт нет смысла разбирать, потому что он, если и существует, то выглядит индивидуально. Одно следует помнить: если в настройках темы (не путайте с настройками панели управления) вы увидите надпись «Прописать путь к иконке/логотипу» или что-то подобное, значит шаблон имеет данную функцию. Загрузив иконку в корень сайта wordpress, просто укажите полный путь к нему. Получится приблизительно так: http://ваш-сайт.ру/favicon.ico

Теперь рассмотрим второй и наилучший вариант того, как установить иконку на сайт wordpress. Подразумевается, что «favicon» уже загружен в корень сайта. Заходим в редактор файлов:

Справа, в списке файлов, находим «header.php» и кликаем по нему. Находим тег и после него прописываем две строчки кода:

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

Третий способ установки иконки на wordpress, является самым простым, но при этом он потребляет ресурс сервера. Поэтому, ради такой незначительной вещи, которую можно сделать двумя предыдущими методами, установка дополнительных элементов не рекомендуется. Тем не менее, бывают случаи, когда иначе не обойтись: все делаешь правильно, а icon не отображается. Итак, скачиваем плагин «All in one Favicon» и устанавливаем. В настройках выбираем строку с тем форматом, который соответствует нашей иконке, и прописываем там полный путь:

Почему не отображается иконка сайта?

Вы сделали все по инструкции, а желаемого результата нет? Попробуйте несколько элементарных действий:

Очистите в браузере КЕШ, и перезапустите его;

Проверьте правильность указанного к favicon пути. Для этого просто введите его в адресную строку браузера и нажмите «Enter». Если на страничке отобразится ваша маленькая картинка, значит адрес указан правильно.

Если же у вас возникли трудности или проблемы wordpress – пишите в комментариях, попробуем решить вопрос совместными усилиями! Всем удачи и продвижения в поисковиках!

Как скачать favicon с сайта

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

Именно поэтому мы покажем, как можно скачать иконку или favicon с другого сайта.

Для этого переходимо по одному из серверов от Google или Яндекс:

В выше указанной ссылке, которую вы должны скопировать в адресную строку, замените мой домен teweb.ru на тот, с которого вы хотите скачать иконку и нажмите Enter. На экране появится искомое изображение, которое можно сохранить при помощи стандартной комбинации клавиш Ctrl+S.

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

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

Кстати, недавно я опубликовал статью о том, как установить иконку на WordPress. Если это вам необходимо – переходите по ссылке, так как там дана детальная инструкция!

В конце остается добавить, что если вам нужна печатная реклама — рекомендуем обратиться к специалистам на komfort49.info.

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

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

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

Подключение

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

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

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

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

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

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

Размер. В интернете можно найти информацию, что нужно подключать фавиконку в формате .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, только нужно добавить тип, чтобы браузер понимал, с чем имеет дело:

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

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

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

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

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

Манифест

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

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

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

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

manifest.webmanifest

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

manifest.webmanifest

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

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. Не добавлять фавиконки в проект.
2. Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 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 ₽.

Как создать фавиконку и подключить ее к сайту

Favicon (сокращение от Favorites Icon) — иконка с логотипом или первой буквой названия сайта, которая отображается на вкладках браузера, в списке закладок и в интерфейсе некоторых поисковых систем.

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

Так Favicon выглядят на вкладках в браузере Safari:

А вот так в поисковой выдаче Яндекса:

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

Вот, как это реализовано у Apple и Яндекса:

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

Характеристики значков

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

Формат

Тут есть из чего выбирать:

• .ico (.icns в macOS) — своего рода стандарт, используется повсеместно.
• .png — более современный вариант, тоже широко распространен и поддерживается даже во многих старых браузерах.
• .svg — перспективный векторный формат с вариативным разрешением под нужды конкретной страницы. Настраивается через CSS.

.svg не поддерживается в старых браузерах для ПК и некоторых Android-браузерах

У .png поддержка заметно шире

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

Из-за особенностей браузеров в разных ОС я бы рекомендовал выбрать .ico. Самый каноничный формат, с которым точно не ошибешься.

Размер

Здесь тоже есть некие стандарты, но они разнятся от системы к системе. Часто используются размеры:

• 16 на 16 точек
• 32 на 32
• 192 на 192
• 512 на 512

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Как сделать иконку для сайта HTML?

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

Рисуем Favicon в Sketch или Photoshop

Значок можно нарисовать там же, где рисуются и другие части интерфейса. Например, Photoshop или Sketch. Покажу, как это работает на примере Sketch:

1. Открываем редактор и рисуем иконку.
2. Потом выделяем нарисованный элемент и меняем разрешение в боковом меню.
3. Затем одновременно нажимаем клавиши Shift + Cmd + E.
4. После этого нажимаем на кнопку Export Selected…

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

Большинство редакторов не умеют экспортировать в .ico по умолчанию. Придется скачать сторонний плагин для Фотошопа или шаблон для Sketch.

Преобразуем готовое изображение в фавиконку

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

1. Открываем будущую иконку.
2. Меняем размер.
3. Указываем нужный размер и формат. Сохраняем.
4. Открываем меню «Файл» и нажимаем на пункт «Экспортировать…».
5. Указываем расширение .png.

Рисуем значок в браузере

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

1. Рисуем любую картинку во встроенном редакторе.
2. А потом нажимаем на кнопку Download внизу.

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

В Favicon.cc можно сохранять рисунки только в расширении .ico. Имейте это в виду.

Конвертируем текст или эмоджи в значок

Есть вариант еще проще — сервис Favicon.io. На нем есть три конвертера: из картинки, из текста или из эмоджи в значок.

Здесь же есть и конвертер .png в .ico. Можно загрузить в сервис готовый логотип и получить обратно несколько иконок в разных форматах для нужд всех ходовых операционных систем.

Но я попробую скачать иконку с эмоджи:

1. Нажимаю на соответствующий конвертер.
2. Кликаю по названию понравившегося смайлика.
3. А потом жму на кнопку Download.

Как подключить Favicon к сайту?

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

АТРИБУТ

ЗНАЧЕНИЕ

icon указывает на тип используемого ресурса.

Здесь указывается путь до файла. Можно ввести ссылку до сервера или внешнего каталога.

Тут указывается тип изображения. Например, image/png для картинок в формате .png, image/svg для .svg. или image/x-icon для .ico

Можно вписать несколько разных значков. Браузер все равно сам выберет подходящую иконку. Такой подход предлагается в Favicon.io.

Например, я скачал себе .ico с сайта. Затем делаю следующее:

1. Кидаю картинку в корневой каталог ресурса (туда же, где лежит index.html).
2. Потом открываю index.html и прописываю в head строчку .

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

Теперь вы знаете, как сделать иконку сайта на вкладке HTML. Рисуем картинку в .ico или .svg, кидаем ее в любое удобное место, а затем прописываем адрес с форматом в head.