Получаем иконки других сайтов
Иногда возникает необходимость выводить на своем ресурсе изображения иконок (favicon) других сайтов. Иконки можно конечно и вручную скопировать и сохранить на своем сайте, но что делать, если Вам нужно получить иконку не одного, а нескольких сотен сайтов. При этом стоит учесть, что у некоторых сайтов иконки со временем могут измениться. Да и хранить все эти иконки на своем сайте нет особого смысла.
Можно конечно подгружать иконки и напрямую с других сайтов по ссылкам наподобие этой: http://usefulscript.ru/favicon.ico
Но как быть в том случае, если в данный момент сайт, с которого подгружается его иконка, временно недоступен или защитил свои изображения от хотлинкинга?
Что такое хотлинкинг и как с ним бороться Вы можете почитать в другой теме нашего сайта — Как защитить свои изображения от хотлинка.
Так вот для того чтобы получить иконку интересующего нас сайта, предлагаем Вам воспользоваться простой функцией на PHP, которая обратится к серверу Google и получит от него иконку необходимого нам сайта.
Таким образом, при каждом обновлении странички PHP функция сама будет обращаться к серверу Google и получать от него актуальную иконку от нужного нам сайта, и Вы не будете зависеть от того работает ли сейчас сайт, иконка которого Вам потребовалась или нет.
Предлагаемый нами PHP код довольно прост и выглядит следующим образом:
Для наглядности работы данного скрипта ниже мы получаем иконки некоторых сайтов:
Надеемся, данная хитрость Вам пригодится при использовании ссылок на сторонние ресурсы, т.к. таким образом ссылки станут гораздо ярче и красивее. Подобного рода хитрость будет очень полезна для разного рода каталогов и рейтингов сайтов.
Как скачать favicon с сайта
Часто приходится сталкиваться с тем, что новичок не может скачать favicon с сайта. Сразу надо оговориться, что мы не призываем к плагиату, просто большинство иконок имеются в свободном доступе и не являются авторской собственностью.
Именно поэтому мы покажем, как можно скачать иконку или favicon с другого сайта.
Для этого переходимо по одному из серверов от Google или Яндекс:
В выше указанной ссылке, которую вы должны скопировать в адресную строку, замените мой домен teweb.ru на тот, с которого вы хотите скачать иконку и нажмите Enter. На экране появится искомое изображение, которое можно сохранить при помощи стандартной комбинации клавиш Ctrl+S.
Надеемся, теперь вы знаете, как заполучить понравившийся favicon с чужого сайта.
Обратите внимание, что при использовании сервера от Гугл, иконка не сохраняется с прозрачным фоном, даже если таковой имеется у донора.
Кстати, недавно я опубликовал статью о том, как установить иконку на WordPress. Если это вам необходимо – переходите по ссылке, так как там дана детальная инструкция!
В конце остается добавить, что если вам нужна печатная реклама — рекомендуем обратиться к специалистам на komfort49.info.
Как вытащить иконку с сайта
Часто приходится сталкиваться с тем, что новичок не может скачать favicon с сайта. Сразу надо оговориться, что мы не призываем к плагиату, просто большинство иконок имеются в свободном доступе и не являются авторской собственностью.
Именно поэтому мы покажем, как можно скачать иконку или favicon с другого сайта.
Для этого переходимо по одному из серверов от Google или Яндекс:
В выше указанной ссылке, которую вы должны скопировать в адресную строку, замените мой домен teweb.ru на тот, с которого вы хотите скачать иконку и нажмите Enter. На экране появится искомое изображение, которое можно сохранить при помощи стандартной комбинации клавиш Ctrl+S.
Надеемся, теперь вы знаете, как заполучить понравившийся favicon с чужого сайта.
Обратите внимание, что при использовании сервера от Гугл, иконка не сохраняется с прозрачным фоном, даже если таковой имеется у донора.
Кстати, недавно я опубликовал статью о том, как установить иконку на WordPress. Если это вам необходимо – переходите по ссылке, так как там дана детальная инструкция!
В конце остается добавить, что если вам нужна печатная реклама — рекомендуем обратиться к специалистам на komfort49.info.
Лайфхак: как скачать SVG изображение с сайта
Возможно, вам когда-нибудь нужно было скачать изображение с сайта. И в большинстве вариантов сделать это проще простого. Нужно лишь нажать в браузере правой кнопкой по изображению и нажать «Сохранить картинку как».
Сохранение изображения в браузере
Но что делать если svg-изображение встроено непосредственно в код сайта(svg inline) и просто скачать его не получается?
Вот как это выглядит:
Слева картинка, а справа ее код в html
Казалось бы скачать svg-изображение уже не представляется возможным, но есть один способ. Для этого нужно найти код изображения, которое вы хотите скачать. В браузере (у меня Chrome) нажимаем правой кнопкой и выбираем «Просмотреть код». Находим код нашей svg-картинки и копируем.
Скопируйте код вашего изображения
Далее нужно создать в обычном блокноте текстовый документ (txt) и вставить код svg-изображения в документ. Дальше нажимаем на «Сохранить как» и в расширении файла вместо .txt пишем .svg, после чего сохраняем. То есть, нужно чтобы вместо названиефайла.txt получилось названиефайла.svg.
Скопируйте код в txt файл и сохраните как
Сохраняйте. Готово! Теперь полученное изображение можно использовать как обычный 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.
Если возникли трудности в использовании одного из способов – пишите об этом в комментариях.
Как создать фавикон для сайта: самый подробный гайд
Favicon— это значок сайта. Иконка видна в результатах поиска и во вкладках браузера и обозначает конкретный сайт или страницу. Также фавикон — это значок мобильного приложения на рабочем столе смартфона.
Простыми словами рассказываем, как создать и загрузить фавикон на сайт, а также объясняем, зачем он нужен.
Фавикон — это возможность сделать сайт более узнаваемым: его видно во вкладках браузера, в закладках, в сниппетах поисковой выдачи, на экране смартфона. Фавикон поможет привлечь на сайт больше посетителей, которые возможно станут вашими клиентами. Этот инструмент подчеркивает уникальность и фирменный стиль бренда.
Сам по себе favicon не влияет на ранжирование сайта в поиске и оптимизацию страниц. При этом он выполняет другие, не менее важные функции:
- С фавиконом страница сразу заметна в поисковой выдаче. Без иконки страница не бросается в глаза.
- Возрастает узнаваемость сайта. Фавикон — важная часть бренда. Логотип из favicon запоминается лучше и сразу освежает в памяти пользователя черты конкретного бренда.
- Пользователю легче найти нужный сайт. В выдаче, истории браузера или закладках найти нужный сайт, который отмечен знакомой иконкой, намного легче, чем без нее.
- Фавикон избавляет от ошибок в лог-файлах. Браузер отправляет запрос на файл favicon.ico и, если такой не находится, то возникает ошибка 404.
При создании favicon нужно учитывать несколько параметров — формат, размер и дизайн. Рассмотрим каждый критерий более подробно.
Изначально изображения для favicon существовали только в одном формате — .ico (ико). Он довольно удобный, т.к. позволяет загружать несколько иконок разного размера. Однако браузеры часто выбирали неверный размер этого формата, и фавикон отображался некорректно, например, в низком разрешении.
Позже появились и другие форматы фавикона, они лучше отображались и меньше весили — svg (свг) и .png (пнг).
.svg — векторный формат графики, который смотрится четко в любом разрешении. Именно поэтому .svg отлично подходит для фавиконок, ведь для них не используются сложные изображения с большим количеством мелких деталей. Формат .png позволяет использовать прозрачный фон. Фафикон как бы «парит». Что особенно важно с эстетической точки зрения, если в браузере используется темная тема оформления.
Есть и другие форматы, например, .jpeg и .gif. Однако анимированные изображения могут перетягивать слишком много внимания на себя и отвлекать посетителей от содержимого сайта.
.jpg — весит меньше по сравнению с png, но не поддерживает прозрачность. Это нужно это учитывать.
Рассмотрим рекомендации по формату фавикона от разных поисковых систем. Для Yandex предпочтительнее использовать .svg, но поисковая система также поддерживает иконки в форматах .jpeg, .png, .bmp, .gif (без анимации). Google поддерживает форматы .svg, .ico, .gif без анимации, .jpeg, .png.
Рассмотрим размеры для самого распространенного формата фавикона — .ico.
Favicon.ico можно сравнить с контейнером, в котором содержатся сразу несколько файлов разного размера. Для корректного отображения достаточно использовать три: 16х16, 32х32, 48х48 пикселей. Такой размер будет корректно отображаться на разных браузерах/операционных системах и при необходимости легко масштабируется до нужных параметров.
Кроме того, у разных платформ требования к размеру фавиконок также отличаются. Обычно минимальный размер составляет 16х16 пикселей. Но, например, в соответствии с рекомендациями Яндекса лучше использовать иконки размером 120х120 пикселей, для Google это правило тоже актуально.
Для мобильных устройств нужны иконки большого размера, чтобы использовать их в качестве значков приложений. Так, для Android и Apple лучше подобрать изображения размером 180х180 пикселей.
Кроме формата и размера, важно продумать внешний вид фавикона. Для этого придерживайтесь таких параметров:
- Соответствие тематике сайта. Для сайта конкретной компании лучше взять ее логотип. Однако, если логотип сложный, вытянутый, имеет множество мелких элементов, лучше взять только его часть. Когда у бренда нет логотипа, подойдет тематическое изображение в цветовой гамме, соответствующей тематике сайта.
- Привлечение внимания. Сейчас 90% сайтов имеют фавиконы, а на первой странице поисковой выдачи они вообще есть у всех. Поэтому важно подобрать картинку, которая привлекает внимание и выделяется на фоне остальных. Часто для этого используют специальные символы, например, красную стрелку.
- Простота. Фавикон в закладках браузера, на его вкладках и в поисковой выдаче очень маленький. Поэтому не стоит выбирать картинку со множеством деталей: их просто невозможно разглядеть. Самый лучший вариант — изображение, где будет немного деталей, не больше трех цветов и понятный, однозначный смысл.
- Оригинальность. Фавикон должен быть уникальным — таким, чтобы его не использовали другие ресурсы. Например, если в поисковой выдаче будет несколько сайтов с одинаковыми иконками виде лебедя, ни один из них не будет выделяться. Банальные картинки тоже лучше не использовать.
Чтобы фавикон корректно отображался в разных контекстах, лучше сделать два варианта. Первый — со сплошной заливкой фона. Подходит, когда есть маска для фона. Например, в сетчатых закладках, контекстном меню. Второй вариант — с прозрачным фоном. Такая иконка показывается рядом с URL-адресом: в закладках браузера, в адресной строке и т.д.
Создать фавикон можно разными способами. Например, с помощью Photoshop. Установите специальный плагин, который позволит создать файл в формате ico.
Также есть отдельные программы.
Самый простой способ создать подходящий фавикон — воспользоваться специальными сервисами. Они автоматически конвертируют из ваших изображений коллекцию необходимых фавиконов вместе с кодом для вставки на сайт. Рассмотрим несколько популярных онлайн-генераторов.
Для этого сервиса необходимо изображение размером 260х260 пикселей. В редакторе сервиса можно заменить фон, добавить отступы, изменить цветовую гамму. Сервис позволяет получить набор фавиконов нужных размеров и код для вставки на сайт.
Для работы с сервисом нужен исходник размером не менее 310х310 пикселей. Изменить изображение нельзя: после обработки сервис сгенерирует код для вставки на сайт и предложит скачать пакет favicon.
Сервис не указывает размер исходного изображения. Однако при загрузке не квадратной картинки вам придет предупреждение. Изменить изображение не получится: сервис только выдает файлы и код для их вставки.
Для создания фавикона нужно загрузить изображение размером 310х310 пикселей и весом до 5 Мб. После обработки вы получите готовый пакет файлов. Также внутри будет HTML-код, который нужен, чтобы вставить фавикон на сайт.
Сервис фавикон.бай бесплатный. Чтобы получить готовую иконку, достаточно загрузить в сервис изображение, поправить его при необходимости и нажать кнопку «Скачать фавиконку». Однако сервис не генерирует код для вставки фавикона на сайт.
Еще один полностью бесплатный сервис для создания фавикона. В отличие от предыдущего конвертера, favicon.io — англоязычный ресурс. При этом сервис имеет понятные настройки. Создать фавикон можно из картинки, текста или эмоджи.
Протестируйте несколько разных Favicon Converter Online, чтобы подобрать подходящий.
Есть еще один вариант получения фавикона — скачать его с чужого сайта. Для этого нужно перейти по одной из ссылок, нажать Enter и скопировать изображение:
Вместо example.ru вставьте адрес сайта, с которого хотите извлечь фавикон. Однако вытащить и использовать чужую иконку — не лучший вариант. Во-первых, фавикон может быть защищен авторским правом, и его использование повлечет за собой наказание. Во-вторых, фавикон должен быть индивидуальным: одинаковые логотипы не будут выделяться и не привлекут внимания.
На первый взгляд, идея самостоятельно создавать фавиконы выглядит абсурдной, ведь можно просто пользоваться генераторами. С такой точкой зрения не согласятся многие разработчики. Чтобы угодить всем ОС, браузерам и типам устройств, приходится «штамповать» на генераторах разные версии иконок. Можно пойти более рациональным путем и самостоятельно сформировать минимальный набор фавиконов, которые соответствуют современным требованиям. Разберемся, как это сделать.
Как скачать favicon с сайта?
когда вы просматриваете веб-сайт, значок «favicon» отображается на вкладке или рядом с URL-адресом (или рядом с закладкой).
Если я хочу эту графику, есть ли способ загрузить ее непосредственно с сайта? Я бы предпочел загрузить его непосредственно из интернета, но если все остальное не удастся, я выкопаю его из того места, где он хранится на моем компьютере (Windows 7, Firefox 3.6.6).
15.12.2022 16:52 2839