Katcerina.ru

Деньги в сети
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как скачать иконку с сайта

Создание favicon.ico

С помощью этого сервиса Вы сможете легко преобразовать любое изображение формата jpg, gif, png в favicon.ico. Стандартный размер изображения для favicon 16×16 пикселей. В режиме Эксперт Вы можете сделать иконки размером: 16×16, 24×24, 32×32, 48×48, 96×96, 128×128 и объединить их в один файл. Данный генератор фавикон поможет Вам сгенерировать иконку Favicon для Вашего сайта из изображения любого размера.

На этой странице собраны примеры иконок сайтов:

А это иконки сайтов которые анализировались и строились за последнее время:

Что такое favicon?

Favicon (англ. Favorite Icon) — это небольшая иконка (изображение, картинка) в специальном формате, которая отображается в адресной строке браузера при просмотре сайта, вкладке браузера или в его закладках (“Избранном”).

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

Зачем нужен favicon для сайта?

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

Что лучше изобразить на фавикон?

  • Иконка должна соответствовать тематике сайта.
  • бренд, если у Вас сайт связан с этим брендом. При этом для разных страниц можно отображать разные бренды;
  • Применяйте фавикон, на который хочется кликнуть, это повысит кликабельность при просмотре в поиске Яндекса, Гугла;
  • Сделайте несколько дизайнов фавиконок для различных разделов Вашего сайта.
  • Сделайте несколько дизайнов фавиконок для различных событий (напр. Нового Года, Дня Святого Валентина или Дня космонавтики, :).

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

Как сделать анимированный favicon?

Формат ICO не поддерживает анимацию. Но современные браузеры позволяют использовать формат GIF для миниатюр. Возможно указать для современных браузеров один анимированный файл(favicon.gif), а для древних, типа Intertet Explorer, другой(favicon.ico). Для этого в секцию head внесите следующие две строчки:

Естественно предварительно нужно поместить оба файла в корневую папку сайта.

Как быть, если запрещен показ изображений в браузере?

Если сделать favicon c внедренным изображением в код старницы:

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

Как получить favicon с сайта

Не все вебмастера располагают favicon.ico в корне сайта. Для получения адреса favicon используйте следующий скрипт:

Поисковые системы Google, Яндекс и favicon

Робот поисковых систем кешируют иконки сайтов. Закешированные иконки доступны по следующим запросам:

Кроме этого, Яндекс может сделать Вам «спрайт» из иконок разных сайтов:

Иконки для iPhone и iPad

Даже если Вы не указываете link-ссылку на картинку iphone все равно будет искать в корневой папке сайта файл с именем apple-touch-icon.png и если найдет, то Возьмет из него картинку, закруглит по углам и на нее будет наложен блик автоматически самоим устройством. Для избежания этого вместо apple-touch-icon.png следует написать apple-touch-icon-precomposed.png владельцы айфонов и точей, т.к. для них мы делаем красивую иконюшку размером 57×57 (можно кстати и больше, но это стандартный размер иконки на ланч-скрине), подключая ее так:

Правильно опубликовать и объявить иконки для старых и новых Retina iPad:

Как динамически менять favicon?

HTML5 и favicon

В HTML5 был добавлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:

Как объявить плитку для планшетов на Windows 8?

Объявление для Windows 8.0 выглядит как-то так:

Windows 8.1 и IE 11 ожидают несколько версий изображения, объявленных в browserconfig.xml. Например:

Можно не объявлять, если имя файла не менять:

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

Иконка сайта или favicon (от англ. Favorite icon) — это значок, мини-логотип для web-сайта или отдельной страницы. В браузере отображается во вкладке перед названием страницы. Если Вы обратите взор на вкладку открытой страницы, на которой сейчас находитесь, то слева от её названия увидите favicon моего сайта в виде букв LM . Не сложно догадаться, что это первые буквы моего имени и фамилии. Это один из множества вариантов создания иконки.

Читать еще:  Готовый сайт по натяжным потолкам

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

Зачем нужна иконка? Это важный элемент современного дизайна. Она придаёт некую индивидуальность и оригинальность вашему ресурсу, позволяет выделиться из массы ему подобных. Иконка отражается в результатах поисковой выдачи Яндекса и многие обращают на неё внимание. Если иконка привлекательная — это лишний повод заглянуть на ваш сайт.

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

  • Самый простой способ — скачать в Сети. Благо, таких возможностей предоставлено с лихвой. Введите поисковый запрос «Скачать иконку сайта» и выберите, что Вам нравится.
  • Можно нарисовать иконку самостоятельно. Если Вы владеете навыками работы с программой Photoshop, сделать это будет не сложно.
  • Ну, и третий вариант, который я считаю оптимальным, — это использование онлайн-сервисов. Свою фавиконку я сделал именно таким образом. Поэтому позвольте представить Вам адрес этого онлайн-сервиса: //www.favicon.cc
    Мне он понравился больше остальных.

Здесь можно нарисовать свою иконку или загрузить изображение с компьютера. Используя картинку с компьютера, подготовьте её, отредактировав таким образом, чтобы она была квадратной или сразу придайте ей размеры 16×16 пикселов. Это позволит избежать искажений. После создания иконки, скачайте её на компьютер. Полученное изображение имеет расширение .ico .

Файл иконки загрузите в корневую директорию вашего сайта. И это всё! Более никаких действий от Вас не требуется.

Многие современные браузеры не требуют явного указания на favicon.ico в коде страницы. В таком случае браузер самостоятельно загружает favicon.ico из корня сайта. Это значит, что для установки иконки сайта достаточно её создать и загрузить изображение в корневую папку сайта, а код вставлять не нужно .

Но, если Вы используете устаревшие браузеры, то в разделе HEAD прописывается следующий код:

Где favicon.ico — это файл иконки в корне сайта.

Перезагрузите страницу и проверьте, появилась ли иконка в установленном месте. На сайте она появляется сразу же, а в Яндекс.Вебмастере только после индексации.

Код понадобится так же в случае, если Вы пожелаете использовать изображение с другим расширением (допускается png и gif ) или будете ставить для каждой страницы отдельный значок. В этом случае в секцию HEAD страницы нужно вставлять такой код:

Где image.png — файл иконки.

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

Установка favicon на сайт WordPress

Работая с WordPress, я не перестаю удивляться, до чего же это замечательный движок! Всё просто до безобразия!
Помимо вышеописанного способа, иконку сайта здесь можно установить через административную панель. Для этого необходимо перейти к настройкам активной темы ( Внешний вид → Настроить ) и открыть пункт Название сайта, слоган, логотип :

У других тем возможны другие варианты названий.

Загрузить подготовленное заранее изображение иконки, руководствуясь подсказками системы. Главное требование к изображению — оно должно быть квадратным с размерами не менее 512 пикселов.

Я попробовал загружать картинки меньшего размера, представляете, все равно всё получается!

На этом тема исчерпана.
Всего Вам доброго! Пока. Ваш Л.М.

Как скопировать favicon с другого сайта?

Многие вебмастера на своих WordPress сайтах/блогах используют плагины, которые позволяют прикреплять какие угодно иконки к рубрикам или меню. Если кто не знает, вот названия парочки из таковых: Menu Icons и Category & Page Icons. Плагины действительно полезные, и помогают украсить рубрики и ссылки в меню сайта.

Выглядит это следующим образом:

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

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

У каждого сайта имеется своя favicon картинка, и выглядит она вот так:

Читать еще:  Бесплатный трафик на сайт где взять

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

Копируем favicon с любого сайта

Итак, приведу пример, как скопировать favicon с почтовика WMmail. Скажу сразу, что имеется 2 способа копирования favicon с любого сайта, и знайте, если при помощи одного не получится, то при помощи другого, точно все удастся.

1. Первый способ реализуется при помощи специального яндекс сервиса. Для того чтобы узнать иконку любого сайта, то нужно попросту перейти в браузере по следующей ссылке — favicon.yandex.net/favicon/site.ru

Где « site.ru » нужно заменить на доменное имя сайта, c которого мы хотим скачать favicon. В нашем случае, нужно будет перейти по ссылке — favicon.yandex.net/favicon/wmmail.ru.

После того как перешли, увидите иконку:

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

2. Второй способ тоже простой и заключается в приписке к основному домену следующей приставки — favicon.ico

В нашем случае, ссылка для получения favicon по такому способу будет выглядеть так — wmmail.ru/favicon.ico

Перейдя по ней, вы увидите оригинальную иконку сайта:

Далее опять точно так же сохраняете ее на компьютер.

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

Создаем уникальный Favicon и устанавливаем на сайт

Фавикон (favicon или фавиконка) — это небольшое изображение рядом с названием страницы в поисковой выдаче Яндекса, а также во вкладке сайта.
Так это выглядит в поиске Яндекса:

А так во вкладках браузера:

Зачем нужен фавикон?

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

Кстати, Яндекс.Вебмастер предупреждает об ошибке, если у сайта нет фавиконки. Также ошибка может отобразиться в лог-файлах. Браузеры запрашивают favicon.ico, если не находят нужный файл, сервер фиксирует ошибку 404.

Лог-файл — журнал с системной информацией о работе сервера и действиях пользователей.

Как быстро создать фавикон для сайта

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

Не рисуйте много деталей. Значок очень маленький (32×32 пикселя), поэтому мелкие нюансы будут совершенно не видны читателям.

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

Самостоятельно создать мини-логотип

Открываем любой графический редактор, например, Photoshop и творим. Если на значке будет текст, то размер шрифта следует установить на 8-10 пикселей. У Фотошопа есть специальный плагин для создания значков — «Favicon.ico».

Полезно! Если у вас не получается сохранить файл в формате .ico. То можно сохранить его в PNG или JPEG и после этого найти любой онлайн-конвертер изображений. В поиске пишем «конвертер из PNG в ICO».

Создать значок с помощью онлайн-сервиса

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

Рисуем фавинкон: Favicon.by

Сразу после перехода на этот онлайн-ресурс попадаем на страницу, где уже есть «заготовка» будущей иконки в нужном размере.

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

Добиваемся отличного результата и нажимаем «Скачать». Файл сохранится в требуемом формате с правильным названием.

Создание фавикон через загрузку изображения: Realfavicongenerator.net

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

Берем готовое изображение 260×260 пикселей. Выбираем нужную степень сжатия и настройки для iOS, Android и MacOS Safari. В результате у вас будут все типы иконок и код для вставки.

Скачать готовый файл фавикон

Этот вариант подойдет тем, у кого совсем нет времени. В этом случае идем на Яндекс.Картинки или любой другой ресурс по поиску изображений и пишем «готовый фавикон».

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

Читать еще:  Как сделать на сайте платежную систему

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

Также можно скачать значок на специализированных стоках, например:

Какой формат использовать?

Желательные форматы Favicon: ico, png, svg

Устаревающий формат. Зато поддерживается большинством браузеров.
Он включает в себя значки разных размеров. Поэтому браузеры могут подтянуть иконку более низкого разрешения.

Поддерживается всеми браузерами и платформами.

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

Допустимые форматы: jpeg и gif

Не все браузеры поддерживают отображение таких значков.

Если ваша фавиконка имеет нестандартные форматы png или ico, то лучше проверить ее через сервис caniuse.com. Так вы поймете, поддерживают ли браузеры нужный вам формат.

Продвинутая информация по размерам фавиконов, которая пригодится не всем

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

Не хотите так заморачиваться? Тогда делайте фавикон 32×32 пикселя. И переходите к следующему разделу.

Вот сводная таблица по рекомендуемым размерам. Источник: ux.pub

Для смартфонов

Для Андроида и Эпла размер иконки зависит от типа и плотности экрана. Вдруг, вам это пригодится в работе.

Как поставить Favicon самостоятельно

Стандартно поисковая система Яндекс и другие сервисы будут искать вашу фавиконку в корне сайта по адресу site.ru/favicon.ico. Поэтому наша задача закачать туда наш значок или указать иной путь его размещения.

Через тему сайта WordPress

Начиная с версии WordPress 4.3, можно добавить фавикон из админки WordPress.

Придерживайтесь вот такой последовательности:

  1. Откройте админку
  2. Внешний вид > Настроить > Свойства сайта
  3. Значок сайта > Изменить изображение
  4. Загрузите фавикон
  5. Нажмите кнопку Опубликовать.

Как добавить фавикон на сайт WordPress вручную

Советуем сначала протестировать все на локальном сайте разработки.

  1. Заходим в файлы темы FTP-клиент или файловый менеджер.
  2. Находим папку /wp-content/themes/your-theme.
  3. Загружаем иконку в подпапку, например, Assets.
  4. Запоминаем путь к файлу.

В файте function.php и прописываем путь до фавикона.

function add_favicon() <
echo ‘’;
>
add_action(‘wp_head’, ‘add_favicon’);

Строка после href=«‘.get_template_directory_uri() должна указывать путь к вашему значку. Убедитесь, что вы указали правильное имя файла. Если вы используете формат файла .ico, то это будет один:

function add_favicon() <
echo ‘’;
>
add_action(‘wp_head’, ‘add_favicon’);

Как вставить фавикон через корневой каталог, если сайт не использует CMS

Для установки фавикона более сложным путем заходим в корневой каталог нашего сайта. Например, при помощи программы FileZilla. Тут нужно найти HTML-код главной страницы сайта.

Лучше предварительно сохранить этот файл на компьютере, на случай, если вы неправильно измените исходный код. Открываем HTML-код и ищем строки, которые располагаются между тегами head. В этом месте нужно вставить строку:

Если мы указываем значение «icon», то изображение будет хорошо отображаться во всех современных браузерах. Если указать вместо этого «shortcut icon», то значок будет виден только в Internet Explorer.

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

Здесь нужно прописать формат файла.

Как задать фавиконы для разных устройств?

Пропишите ссылки на иконки между тегами head. Например:

Для десктопа (ico)

Декстоп (png)

Apple

Иконки в устройствах Apple закругляются по углам. Поэтому лучше использовать apple-touch-icon-precomposed вместо apple-touch-icon.

Safari

Андроид

Как задать размеры фавиконок?

Можно загрузить иконку в нескольких размерах: 16×16, 32×32 и 48×48. Вот пример для декстопа:

Как проверить, установился ли фавикон?

Просто погуглите ваш ресурс. Или проверьте сайт в сервисе Realfavicongenerator.

А еще можно воспользоваться вот таким способом. Только вместо «mysite.ru» укажите название вашего сайта:

  • В Яндексе: http://favicon.yandex.net/favicon/mysite.ru.
  • В Гугле: https://www.google.com/s2/favicons?domain=mysite.ru.

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

  • ссылка на фавикон открыта для индексации в robots.txt и отдает ответ сервера HTTP 200.
  • изображение ico или png находится в корне ресурса или к нему специально прописан путь.
  • вы подождали несколько недель. Так как поисковым роботам нужно время, чтобы проиндексировать значок сайта.

Подытожим

  1. Фавикон лучше делать, чем не делать. Это поможет людям идентифицировать ваш сайт.
  2. Создать фавикон можно в Фотошопе или с помощью онлайн-сервисов
  3. Можно создавать иконку сразу в нескольких размерах, чтобы она корректно отображалась на всех устройствах.
  4. Наиболее подходящие форматы: ico или png.
  5. Добавить фавиконку можно через вашу CMS или через корень сайта.

А как вы считаете, у каких сайтов самые удачные фавиконки? Делитесь в комментариях!

Ссылка на основную публикацию
Adblock
detector