Favicon ico для сайта: Сделать 🖼 Favicon для сайта

Содержание

Сделать 🖼 Favicon для сайта

Как пользоваться сервисом для создания favicon?

  1. Нажмите «Выбрать изображение с компьютера» и загрузите картинку в форматах jpg, jpeg, png или gif. Подберите квадратное изображение без мелких деталей.
  2. Нажмите «Создать Favicon»;
  3. Сервис покажет пример того, как будет выглядеть ваш favicon. Если результат вас устраивает, скачайте готовый файл. Вы получите файл favicon.ico для сайта, то есть файл с расширением *.ico, его и надо будет использовать в дальнейшем.

Как установить отдельные фавиконы для мобильных устройств

Для разной аудитории сайта нужна поддержка основных браузеров и платформ — Windows Firefox, iOS Safari, Internet Explorer, Android Chrome и других. Для мобильных устройств часто прописывают отдельные иконки с другими размерами. Для этого указывают тип устройства в rel, к примеру, «apple-touch-icon», и атрибут sizes с размером.

Достаточный пакет

Будет достаточно одного файла favicon.ico с размерами 48×48.

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

Как установить favicon на сайт

  1. Сохраните картинку в корневой каталог сайта с именем favicon.ico, чтобы получился адрес вида https://sitename.ru/favicon.ico. Это путь к изображению. Он понадобится, если вы захотите использовать разные фавиконы для разделов сайта, чтобы пользователи лучше ориентировались в разделах ресурса. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
  2. Добавьте ссылку на размещенный файл в HTML-код главной:
     
    
<link rel="icon" href="https://sitename.ru/favicon.ico" type="image/x-icon">

Зачем делать favicon?

Никакой функции для SEO он не несет, но его использование позволяет повысить узнаваемость сайта, и, как следствие, показателя CTR.

Узнаваемость сайта

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

Информативность

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

Запоминаемость бренда

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

Как добавить иконку сайта в адресную строку браузера?

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

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

Отображение иконки в строке браузера

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon. ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки.

Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег <link>, как показано ниже.

<head>
 <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
</head>

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

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

Создать Favicon

Генератор Favicon — это бесплатный онлайн сервис, который поваляет создавать иконки и значки (файл favicon.ico) для вашего сайта. Данный инструмент позволяет создавать Favicon всех популярных размеров, таких как: 16х16, 32х32, 48х48, 64х64, 128х128. Выберите размер и изображение (JPG, GIF, PNG), которое вы хотите конвертировать в формат ICO с вашего компьютера и нажмите Создать.

Создать фавикон

Для создания favicon необходимо:
  1. Выберите размер вашего фавикона
  2. Выберите файл и нажмите Создать Favicon
  3. Сохраните полученный Favicon на свой компьютер

Как добавить Favicon на сайт?

  1. После создания Favicon через наш инструмент, скачайте его на ваш компьютер.
  2. Загрузите фавикон в корневую директорию вашего сайта, чтобы он был доступен по адресу https://yoursite.com/favicon.ico
  3. Скопируйте код ниже и вставьте в ваш HTML внутри тегов HEAD
    • rel — тип ресурса: icon или icon shortcut
    • href — адрес файла
    • type — тип передаваемых данных. Зависит от формата файла.
      • image/x-icon — для формата ICO;
      • image/gif — для формата GIF;
      • image/jpeg — для формата JPEG;
      • image/png — для формата PNG;
      • image/bmp — для формата BMP.

Примечание. Если в HTML-коде страницы ссылка на фавиконку прописана несколько раз, робот выберет иконку на свое усмотрение. Например, указаны 2 разные иконки, чтобы соответствовать разным поисковым системам.

Требования Яндекса к фавиконке

Примечание: Для отображения в результатах поиска Яндекс загружает фавиконку с HTTPS-версии сайта, если она доступна. Если нет — фавиконка не отображается.
  • Размер: 16×16, 32×32, 120×120 пикселей.
  • Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.

Требования Google к фавиконке

  • Размер: значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например: 16×16, 48×48, 96×96, 144×144 пикселей
  • Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.
  • Убедитесь, что значок сайта хорошо выглядит при разрешении 16×16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.
  • Значок сайта должен служить графическим представлением вашего бренда. Это поможет пользователям быстро узнать ваш сайт при ознакомлении с результатами поиска.

Отображение фавиконки

Если робот загрузил favicon, она появится в результатах поиска в течение двух недель. Примечание. Если робот не может получить доступ к вашей фавиконке, он скачает изображение, например, из тега apple-touch-icon, и использует его для отображения фавиконки в результатах поиска и рекламных кампаниях. Если во время обхода сайт недоступен для робота, может скачаться фавиконка хостинга со страницы-заглушки сайта. Поэтому в поиске вместо вашей фавиконки отобразится произвольная иконка.

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

С месяц назад для блога pervushin.com сделал я иконку, в простонародье favicon. Так вот после долгих размышлений, раздумываний и рассусоливаний я решил написать эпопею о создании своего favicon.ico. В этой статье Вы найдёте небольшие обзоры оказавшихся у меня на пути сервисов по созданию таких иконок, несколько ссылок где можно скачать уже готовые иконки и как эту самую готовую иконку установить на сайт.

В конце поста как обычно Вас ждёт жирный бонус и сладкое. Спасибо за Ваши комментарии и RT pls.

Начну с определения, вдруг кто не знает, favicon — это иконка, значок сайта (блога) или отдельной веб-страницы, которая отображается в адресной строке браузера, в закладках, в журнале, во вкладках и т.д. Стандартный, минимальный размер иконки 16×16, этот размер необходим для вышеуказанных мест, но есть пользователи, которые сохраняют адреса веб-страниц в виде ярлыков на рабочем столе или где-то в папках, в общем для таких целей предусмотрены размеры 24х24, 32х32, 48х48 и 64х64, все эти размеры включаются в один favicon.ico, но главное помнить, что размер файла от этого увеличивается, имею ввиду байты, что затрудняет загрузку сайта.

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

У яндекса для это есть специальный робот, который ищет на сайтах фавикон, мой фавикон находится здесь http://pervushin. com/favicon.yandex.net/favicon/pervushin.com, понимаете да, чтобы проверить свой фавикон, поменяйте адрес сайта на свой. Так вот если Вы сменили иконку, то на яндексе она сразу не появится, ну максимум через месяц.

Создать favicon можно с помощью настольных программ, например Favicon Create или Icon Cool Studio, последняя кстати очень мощная, но лучше использовать онлайн сервисы :).

Favicon генераторы

Favicon.ru

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

Сделать favicon.ico на этом сервисе можно указав путь к картинке на компьютере или в интернете, для создания ярлыков можно включить два дополнительных размера 32х32 и 48х48, также на favicon.ru можно обрезать картинку, в случае если размеры её не пропорциональны.

У меня была готовая картинка 50×50 пикселей, её я и закинул. После сервис показал мне как будет выглядеть иконка, если всё в порядке, то можно её тут же скачать, но мне не понравилось:

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

Favicon.cc

В отличие от первого подопытного на favicon.cc нам сразу предлагают воспользоваться своим графическим редактором. В центре расположен холст, состоящий из 16 горизонтальных и вертикальных квадратиков, каждый квадрат — пиксель, получается холст 16х16, т.е. favicon.ico.

Справа расположилась палитра цветов (оттенков) и несколько инструментов, а именно инструмент прозрачности, пипетка, для определения цвета на холсте и инструмент перетаскивания, которым можно таскать по холсту Ваше что-то там нарисованное :).

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

Рисовать иконку в графическом онлайн редакторе? Мазахизм, не мой метод, потому слева от холста в основном меню кликаю на пункт «Import image»:

Здесь всё довольно просто, указываем путь к изображению (нажатием кнопки «Обзор») и выбираем один из двух имеющихся вариантов обработки загружаемой картинки. Первый подходит к картинке с пропорциональными размерами всех сторон, моя 50х50, второй больше подходит к картинке с разными размерами, при этом варианте изображение сплюснет. Нажимаю кнопку «Upload» и вновь попадаю в редактор, но на холсте уже моя картинка, так сказать попиксельно. Если Вас устраивает конечный результат, можно скачивать иконку, мне не понравилась:

FavIcon from Pics

На очереди FavIcon from Pics, тупой такой, лёгкий до безобразия, ничего лишнего, но на нём я сделал свою фавиконку, которая сейчас стоит на pervushin. com, лучше чем здесь, мне не удалось сделать больше нигде. Самое удивительное, что из картинки которую загружаю (здесь тоже есть такая возможность) на сервис получается такая же шняга, как и у остальных, но этот сервис пошёл дальше, он делает favicon из аватарки твиттера! Кстати, если у кого нет твиттера, рекомендую завести, читаем здесь как, и присоединяемся ко мне :).

Итак, я указал свой логин в твиттере @pervushin_com и нажал заветную кнопку «Generate Favicon«. Попадаем на следующую страницу с дополнительными настройками. Там всё на английском, но разобраться будет не трудно. Во-первых к своей иконке я добавил анимацию в виде бегущей строки «Sergey Pervushin.com». Далее настроил цвет — зелёный (green). Цвет фона прозрачный (transparent). Здесь же можно добавить иконки для iphone, ipad и т.д., но не переусердствуйте, помните про размер.

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

Я свой favicon сделал и мне он нравится, но сервисов ещё очень много, вот ссылки на них, посмотрите, может Вам нужно что-то другое:

* http://pervushin.com/www.cy-pr.com/tools/favicon/
* http://pervushin.com/genfavicon.com/
* http://pervushin.com/www.tools.dynamicdrive.com/favicon/
* http://pervushin.com/favicon-generator.org/
* http://pervushin.com/www.faviconfactory.com/
* http://pervushin.com/shaheeilyas.com/favicon/
* http://pervushin.com/www.degraeve.com/favicon/
* http://pervushin.com/michurin.com.ru/favicon-editor.shtml

Скачать готовый Favicon для сайта

Если Вам лень делать иконку, хотя чего уж тут лениться, дело 2-х минут, то можно скачать готовые, ниже несколько адресов, где этих favicon.ico завались:

1. http://pervushin.com/www.audit4web.ru/favicon/ — более 15000 иконок.
2. http://pervushin.com/www.iconj.com/ — более 18000 иконок, кто больше? Есть также и анимированные. Также и генератор favicon есть, причём очень даже не плохой.

Установка Favicon.ico

У меня движок на wordpress, будем исходить из него, но принципиально установка favicon на других движках или html страницах ничем не отличается и проходит она в два этапа: 1. Загрузка файла на сервер; 2. Прописываем специальные теги в движок. Всё на самом деле очень просто.

Все поисковые роботы ищут иконку в корне сайта, т.е. иконка должна, точнее желательно, хоть и не обязательно, находится по адресу, например, http://pervushin.com//favicon.ico. Но для движков, таких как wordpress, в сети много разных тем, вместе с этими темами в комплекте часто идут свои favicon и пути у них прописаны соответственно расположению этого favicon в папках темы, например адрес.ру/шаблоны/тема/изображения/favicon.ico. Вам необходимо либо просто заменить стандартный ico на свой, либо перепрописать пути, я поступаю именно так.

Закинул оба файла в корень pervushin.com, это favicon.ico и animated_favicon.gif и в файле своего шаблона header.php между тегом <head></head> прописал следующее:

<link rel="shortcut icon" href="http://pervushin.com//favicon.ico" >
 </link><link rel="icon" type="image/gif" href="http://pervushin.com//animated_favicon.gif" >
 </link>

Готово! Стильного Вам фавикона и удачной работы!

Snapshot / @pervushin_com в twitter

Сладкое на сегодня: Славная бабулька, с юморцом :).

Читаем дальше:

11 на запись «Favicon.ico: как сделать и установить на сайт»

Иконка сайта.

Что такое иконка сайта?

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

а также в результатах поиска поисковой системы Яндекс

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

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

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

Для того чтобы указать иконку для страницы сайта необходимо связать эту страницу с подключаемым изображением — иконкой, с помощью тега <link>.

Напомню, тег <link> имеет атрибуты:

  • href — Путь к файлу.
  • rel — Определяет отношения между текущим документом и файлом, на который делается ссылка.
    • shortcut icon — Определяет, что подключаемый файл является иконкой.
    • stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.
    • application/rss+xml — Файл в формате XML для описания ленты новостей.
  • type — MIME тип данных подключаемого файла.

И пишется в голове документа между тегами <head> </head> следовательно вся запись вместе приобретает следующий вид:

<head>
<link rel=»shortcut icon» href=»favicon.ico» type=»image/x-icon»>
</head>

Где favicon.ico название иконки лежащей в корневой папке сайта.

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

<link rel=»shortcut icon» href=»favicon. ico» type=»image/x-icon»>

Однако всё же лучше связывайте иконку со страницей сайта тегом <link>

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Иконка сайта</title>
<link rel=»shortcut icon» href=»../graphics/favicon.ico» type=»image/x-icon»>
</head>
<body>
<h2>Моя любимая страничка!</h2>
<p>Эта страничка использует индивидуальную иконку в виде сердечка.</p>
</body>
</html>

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

Как самостоятельно изготовить файл favicon.

ico?

Способ первый:

Найти в Интернете готовую подходящую иконку в коллекциях иконок..

Способ второй:

Изготовить иконку с помощью какого либо онлайн сервиса. Наиболее популярным сервисом, создающим иконки для сайта, в русскоязычном Интернете, является ресурс www.favicon.ru

Всё просто заходите на данный ресурс, загружаете большое размером изображение (желательно квадратное) только весом не более 300кб.. ну например логотип сайта, жмете кнопку «Создать favicon.ico» на выходе скачиваете уменьшенную копию этого изображения 16х16 (а так же по желанию 32х32 и 48х48) пикселей в формате ico. Достаточно удобный ресурс позволяющий быстро создавать иконки приемлемого качества.

Ну и третий способ:

Лучше всего, конечно, нарисовать иконку самостоятельно, в которой каждый пиксель будет именно таким каким Вы желаете его видеть. Однако большинство популярных графических редакторов типа фотошопа не желают сохранять изображение в формате ico.. Но не беда!! В Интернете гуляет масса редакторов иконок хороших и не очень, платных и бесплатных, функционально простеньких и жутко навороченных.

Лично я пользуюсь не сильно хитрой программкой — редактором иконок, но пользуюсь ей не так, как задумывали авторы.. Я сначала рисую иконку в привычном мне фотошопе, сохраняю её в формате jpg, потом открываю это изображение с помощью этой нехитрой программки и сохраняю его же уже в формате ico. Короче использую программку в качестве «конвертора», а не графического редактора.. программка называется IcoFX впрочем, как уже сказано выше существует куча других программ, так что не стоит останавливаться именно на этой!! Это я к ней приловчился, а Вы, может быть, найдете, что ни будь более удобное для себя.



Фавикон (favicon) — иконка для сайта: инструкция

5. Как добавить favicon на сайт?

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

5.1 Загрузка в корневую папку сайта

Для отображения фавикона, поисковой робот Яндекса ищет необходимую картинку в корневой папке сайта. Поэтому чтобы добавить иконку на сайт, подключитесь по FTP к вашему сайту и загрузите файл с расширением .ico в корневую папку (public_html или htdocs). Предварительно назовите файл favicon.ico. Желательно, чтобы все буквы были в нижнем регистре. После этого браузер должен начать показывать выбранное вами изображение возле названия сайта. 

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

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

Как узнать путь до Favicon.ico на вашем сайте?

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

<lіnk rel="shortcut іcon" type="image/іco" hrеf="httр:путь_до_вашей_иконки/favicon.ico" />

Возможен и другой вариант написания ссылки: 

<lіnk rel="іcon" hrеf="http:путь_до_вашей_иконки/favicon. ico" tуpe="imagе/x-icon">

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

5.2 Добавить код ico в шапку сайта

Для того, чтобы красивые иконки для сайта отображались максимально качественно, они должны быть квадратной формы, а формат картинки должен быть с расширением jpg, bmp, gif или png. 

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

Загрузите изображение в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP-клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов или в связи с вашими собственными настройками.  

Для отображения фавикона в шапке сайта, пропишите следующую строку между тегами <head> и </head> в коде сайта:

<lіnk rеl="shortсut іcon" type="іmage/png" hrеf="/favicon.png"/>

При этом обязательно проверьте правильность написания формата, а также имени изображения. В результате у вас получится HTML код следующего вида:

5.3 Как разместить фавикон на WordPress?

Метод 1. Воспользоваться панелью управления WordPress

С версией WordPress 4.3 и выше, используйте панель управления администратора для добавления фавикона. Зайдя в панель управления, откройте пункт меню “Внешний вид” и затем выберите раздел “Настроить”. В появившемся окне выберите “Свойства сайта”, “Выбрать изображение” и загрузите файл с иконкой, которая и станет новым фавиконом.



После этого сохраните изменения и откройте сайт для проверки отображения фавикона.

Метод 2. С помощью плагина All In One Favicon

Для установки плагина откройте раздел меню “Плагины”, выберите функцию “Добавить новый” и установите All In One Favicon.  

Как только установите плагин, откройте Настройки и выберите плагин All in one Favicon. В строках ICO Frontend и ICO Backend загрузите картинку будущего фавикона и сохраните изменения. Готово. Фавикон установлен. 

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


У Вас не отображается иконка сайта favicon.ico в браузере или в поиске? Давайте рассмотрим возможные причины.

Для начала хочу напомнить про статью Как создать favicon иконку сайта? Там Вы гарантированно сможете создать валидную иконку для сайта.

Вспомним как установить на сайт иконку сайта favicon


Иконка сайта подключается в head перед закрывающим тегом.
<html>

<head>

<title>Где подключить иконку сайта favicon?</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
</head>

<body></body>

</html>

Рассмотрим три вида подключения к сайту иконки favicon
<!-- Если favicon лежит в корне сайта.  РЕКОМЕНДУЕМЫЙ вариант. -->

<link rel="icon" href="/favicon.ico" type="image/x-icon">

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Если favicon лежит в корне сайта. Полный адрес к иконке. -->

<link rel="icon" href="http://yoursite.ru/favicon.ico" type="image/x-icon">

<link rel="shortcut icon" href="http://yoursite.ru/favicon.ico" type="image/x-icon">
<!-- Если favicon лежит в папке Выше. НЕ РЕКОМЕНДУЕМЫЙ вариант. -->

<link rel="icon" href="http://yoursite.ru/путь_к_иконке/favicon.ico" type="image/x-icon">

<link rel="shortcut icon" href="http://yoursite.ru/путь_к_иконке/favicon.ico" type="image/x-icon">

Почему написал у третьего варианта не рекомендуемый? Потому что, например, Яндекс может НЕ отображать Вашу иконку сайта в выдаче по запросу, если она находится в каком-либо подкаталоге, а не в корне. Личное наблюдение

Как индексируется иконка сайта favicon? Почему не отображается сразу после изменений?


Про индексацию иконки сайта favicon хотел бы предупредить, что сайт сначала должен проиндексировать специальным поисковым роботом, прежде чем иконка будет отображаться рядом с сайтом по запросу в поиске. Поэтому иногда следует просто подождать. По времени это от недели до двух месяцев (для молодых сайтов — младше года). Если всё сделано правильно, то просто запасаемся терпением!
Как поступает Гугл не скажу, но заметил, что он показывает иконки не на всех сайтах.

Вы все сделали правильно, но фавикон не хочет отображаться?


Пожалуйста, проверьте, правильно ли создан сам файл и верно ли прописаны пути к нему в теге head в записи про icon (пример записей Выше). Другими словами, узнаем, как его видят поисковики и различные интернет-сервисы, в том числе и браузеры.

Я обновил запись c favicon (иконкой сайта), но у меня по-прежнему ничего не отображается.

Почему?
Бывает так, что в Браузере после изменений не отображается favicon.
Попробуйте почистить кэш в вашем браузере.

Проверка Favicon в поисковых системах Яндекс и Google


Для того, чтобы узнать видят ли иконку любого сайта поисковики, даже не обязательно открывать сам сайт. Для этого достаточно ввести следующий адрес в браузер:
1) Как видит Яндекс — http://favicon.yandex.net/favicon/www.yandex.ru
В записи меняем www.yandex.ru на свой домен.
2) Как видит Google — http://www.google.com/s2/favicons?domain=www.google.com
В записи меняем www.google.com на свой домен.
(если у Вас отображается иконка Земного шара, то не переживайте, так тоже бывает с нормально сделанными сайтами)

Руководство 2020 г. по значкам избранного почти для всех и в любом браузере

Когда-то для создания фавикона требовалось сделать всего одну иконку размером 16×16 пикселей и поместить ее в корневой каталог веб-сайта. Это все еще работает сегодня, хотя и с некоторыми оговорками.

В современных устройствах дисплеи, как правило, имеют дисплеи высокой плотности (ретина). Эти устройства и дисплеи имеют больше пикселей на квадратный дюйм. Конечным результатом является гораздо более четкий текст и изображения. Как правило, графику необходимо оптимизировать для дисплеев с высоким разрешением.На этих устройствах и дисплеях классический фавикон размером 16 x 16 пикселей выглядит пиксельным; таким образом, необходимы дополнительные шаги. Чтобы сделать ситуацию еще более запутанной, многие новые устройства, например, iOS и Android, имеют свои предпочтительные замены значков.

Это руководство по созданию фавиконов для (почти) всех мыслимых браузеров.

Цель состоит в том, чтобы обеспечить наилучшие результаты (без пикселей) с наименьшим объемом работы и, самое главное, сохраняя при этом рассудок.


Изображение: NPR.org не имеет фавиконки для дисплея Retina, поэтому он выглядит пиксельным

Конкретные интересы? Вот что мы рассматриваем в этой статье:

  • Краткая история favicon. ico
  • (в основном) полный список всех известных размеров любимых значков
  • Почему не SVG?
  • Проверка работоспособности: утилиты Photoshop/Automator
  • Что не будут делать эти утилиты
  • Загрузка шаблона Photoshop/macOS Automator/Sketch
  • Как установить действие Favicon Photoshop
  • Использование экшена Photoshop
  • Использование автомата Действие
  • Использование шаблона эскиза
  • Оптимизация
  • Поддержка IE6 – IE10 (и проблема с Safari)
  • Использование IconSlate для создания значка Retina Favicon
  • Онлайн-генератор HTML + XML

Краткая история фавиконки.ико

Первоначально Favicon был представлен Microsoft в марте 1999 года вместе с новой вкладкой «Избранное» в Internet Explorer 5. Номенклатура Microsoft назвала закладки в Internet Explorer «Избранным». В закладках на вкладке «Избранное» можно было добавить значок «Избранное» рядом с каждым URL-адресом. Если бы на веб-сайте был файл favicon.ico, размещенный в корневом каталоге его домена, запись в избранной закладке включала бы пользовательский значок. Вскоре после этого, в 2000 году, Консорциум World Wide Web (W3C) принял фавикон для HTML 4.0 (с намеренно расплывчатыми характеристиками).

Еще в 2001 году веб-браузеры начали использовать значок значка рядом с URL-адресом и вскоре стали повсеместными в Интернете, перейдя на привычные теперь вкладки браузера. Позже и Firefox, и Safari добавили поддержку PNG для фавиконов, что стало первым серьезным изменением в формате фавикона. В 2008 году, после запуска первого iPhone, фавикон совершил еще один важный поворот после того, как Apple представила «apple-touch-icon.png», версию фавикона с более высоким разрешением, используемую для закрепления на док-станции iOS.Это создало прецедент для нескольких размеров значков и помогло закрепить PNG в качестве предпочтительного формата по сравнению с форматом файлов ICO Microsoft Windows.

W3C, признавая необходимость универсальности, включил в HTML5 стандарт для нескольких размеров фавикона, который получил широкое распространение благодаря дисплеям с высокой плотностью, новым пользовательским интерфейсам операционных систем, изменениям в браузерах и мобильным устройствам. Сегодня у нас есть пользовательские значки для всего, от телевизоров Google до плиток Microsoft Windows Metro.

(в основном) полный список всех известных любимых размеров значков

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

Размер Имя Назначение
32×32 favicon-32.png Стандарт для большинства настольных браузеров
128×128 favicon-128.png Значок Интернет-магазина Chrome и маленький значок Windows 8 Star Screen*
152×152 фавикон-152.png Значок iPad touch (Изменение для iOS 7: увеличено с 144×144)
167×167 favicon-167. png Значок iPad Retina touch
(изменение для iOS 10: вместо 152×152, не действует. iOS 10 будет использовать 152×152)
180×180 favicon-180.png iPhone Retina
192×192 favicon-192.png Рекомендация манифеста веб-приложения Google Developer
196×196 фавикон-196.png Значок главного экрана Chrome для Android

Устаревшие фавиконы

Размер Имя Назначение
57×57 favicon-57.png Стандартный домашний экран iOS (iPod Touch, iPhone первого поколения для 3G)
76×76 favicon-76.png Значок домашнего экрана iPad
96×96 фавикон-96.png Значок GoogleTV *
120×120 favicon-120. png Сенсорный значок iPhone Retina (Изменение для iOS 7: увеличено с 114×114)
144×144 favicon-144.png Плитка IE10 Metro для закрепленного сайта*
195×195 favicon-195.png Значок быстрого набора Opera
(не работает в Opera 15 и более поздних версиях)
228×228 favicon-228.png Иконка Opera Coast

Когда эта статья была первоначально написана, это был общий список из 14 значков, считая изменения iOS.В результате сейчас, когда мы приближаемся к 2020 году, мы можем с уверенностью предположить, что доля iOS резко упала, поскольку статистика Apple колеблется всего на 9% устройств, использующих более раннюю версию, чем iOS 12. Используя показатели приложения «Аудиокнига» Дэвида Смита, менее 2%. пользователей используют iOS ниже 10 на момент написания этой статьи.

Итак, основываясь на более разумных принципах, мы можем удалить большую часть шума. Последний раз Google TV обновлялся в 2010 году. Apple перешла на Retina в 2010 году с iPhone 4, а с Touch и iPad — в 2012 году. Opera Speed ​​Dial исчезла в 2013 году, Opera Coast была удалена из магазина приложений Android в 2017 году.Таким образом, с пересмотренным списком у нас осталось семь основных фавиконов (если только у вас нет проекта с очень специфическими устаревшими требованиями). Microsoft потребовала метатеги msapplication-TileColor и msapplication-TileImage, чтобы IE10 в Windows 8 распознал значки Favicons, которые также можно удалить из исходного списка.

Наконец, в манифесте веб-приложения Google отмечается, что Chrome принимает фавиконы с шагом 48 пикселей и по умолчанию имеет значение 192 или 512. Ради здравого смысла мы будем придерживаться только 192.

  • 7 фавиконок
  • Ссылки в теге вашего веб-сайта для каждого размера
  • Специальный файл XML для плиток меню «Пуск» Windows (8.1 и выше) (для IE11+ и Windows 10 требуется файл browserconfig. xml.)

Почему не SVG?

Некоторые читатели, просматривающие этот список, могут заинтересоваться масштабируемой векторной графикой (SVG) как более разумным решением вместо создания значков во всех мыслимых разрешениях, поскольку значки являются одним из лучших вариантов использования векторных изображений.На момент написания этого только Firefox и Safari поддерживают значки SVG (с некоторыми оговорками). См. CanIuse.com для получения более подробной информации.

(Примечание автора: во время написания этой статьи, после проверки около 50 основных веб-сайтов, Instagram был единственным сайтом, на веб-сайте которого была опция SVG favicon)

Проверка работоспособности: Photoshop / Automator Actions / Шаблон эскиза

Я создал три разных способа создания 14 размеров фавиконки. Три варианта следующие:

  1. Экшен Photoshop . Если у вас есть Adobe Photoshop, это позволит вам использовать экшен Photoshop для быстрого создания 14 значков из исходного файла. Экшены Photoshop позволяют Photoshop выполнять автоматизированные задачи, такие как изменение размера и экспорт файлов.
  2. Automator — macOS/OS X предоставляет утилиту сценариев на уровне ОС, которая позволяет автоматизировать такие задачи, как перемещение/переименование файлов или использование различных функций приложения, таких как предварительный просмотр. Я создал сценарий автомата, который будет выполнять те же функции, что и экшен Photoshop. Преимущество в том, что для этого не требуется Photoshop, но требуется Mac.
  3. Шаблон эскиза — это наименее автоматизированная функция.Это пустой шаблон со всеми настройками экспорта с 14 отдельными размерами. Просто вставьте значок в направляющие и нажмите «Экспорт», и он экспортирует все 14 размеров фавикона в формате PNG.

То, что вам абсолютно необходимо:

  • Квадратное изображение PNG, 228 x 228 или больше.
  • Photoshop (Win/Mac) или macOS/OS X или Sketch

Приятно иметь:

  • Изображение с альфа-слоем (прозрачный фон)

Поддерживаемые браузеры:

IE11, Edge, Chrome 4+, Firefox 2+, Opera 10. 1+, Safari 3.1+, iOS Safari 6+, Google TV, Android Browser 2.1+, Chrome для Android, Firefox для Android, UC Browser для Android, Samsung Internet, QQ Browser, Chrome Store, закрепленные сайты Windows 8+.

Что эти утилиты делать не будут:

К сожалению, эта утилита не создает классический файл favicon.ico. Photoshop по-прежнему не может создать файл .ico, как и Automator или Sketch. Дополнительные сведения см. в разделе Поддержка IE6 — IE10 (и проблема с Safari) в этом посте.

Также это не будет «лечить» значки.Значки размером 32 x 32 пикселя и 16 x 16 пикселей могут потребовать ручного редактирования в графической программе. Помните, что более чем возможно создавать отдельные версии значков в зависимости от разрешения. Эта утилита представляет собой метод дробовика, который позволит вам улучшить базовый минимум после того, как все значки будут созданы. Чтобы значки с низким разрешением выглядели лучше всего, я настоятельно рекомендую рассмотреть возможность ручного редактирования значков 16 x 16 пикселей и значков 32 x 32 пикселей.

Загрузка шаблона Photoshop/macOS Automator/Sketch

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

Как установить действие Favicon Photoshop

  1. Загрузите экшен Photoshop и дважды щелкните, чтобы распаковать
  2. В Photoshop в меню действий щелкните меню гамбургера и выберите действия загрузки
  3. Найдите создателя фавиконки

Использование экшена Photoshop

Изображение по умолчанию должно быть квадратным и иметь размер более 228 x 228 пикселей (я рекомендую использовать исходное изображение с более высоким разрешением). Откройте изображение, которое вы хотите использовать для своего фавикона.Нажмите «Воспроизвести», и действие создаст значки 14 размеров в формате PNG.

Использование сценария Automator

Перетащите файл в скрипт Automator. Изображение по умолчанию должно быть квадратным и иметь размер более 228 x 228 пикселей (я рекомендую использовать исходное изображение с более высоким разрешением). Нажмите «Воспроизвести», и Automator создаст 14 размеров значков в формате PNG.

Использование шаблона эскиза

Откройте файл эскиза. Вставьте свою графику в направляющие и нажмите «Экспорт» и выберите экспорт «favicon».

Оптимизация

Неоптимизированные файлы PNG из Photoshop имеют довольно большой размер. Я настоятельно рекомендую пользователям macOS использовать бесплатное приложение ImageOptim для сжатия PNG без потерь, а пользователям Linux — Trimage. Оба просты в использовании. Перетащите все вновь созданные файлы PNG, чтобы сократить ценные килобайты изображений без снижения качества. Пользователи macOS/Linux также могут использовать PNGOUT, утилиту интерфейса командной строки для оптимизации PNG.

Для более технически подкованных пользователей macOS утилита оптимизации PNG ImageAlpha (работает в тандеме с ImageOptim) позволяет пользователям еще больше использовать индексированные цветовые профили для уменьшения размера файлов.

Наконец, PNGquant по умолчанию работает из Photoshop для Windows/OS X, а TinyPNG предоставляет бесплатный сервис, который можно использовать в веб-браузере на любой платформе.

Поддержка IE6 – IE10 (и проблема с Safari)

Для самых одержимых: IE10 и более ранние версии не поддерживают иконки PNG, только ICO. В зависимости от источника, IE10 и более ранние версии по-прежнему составляют примерно 0,2%-1,4% пользователей Интернета в Северной Америке в апреле 2017 года. К счастью, из месяца в месяц это число продолжает уменьшаться, но различается в зависимости от региона земного шара и даже от страны. / языковая основа.IE10 был выпущен 4 сентября 2012 года в качестве браузера по умолчанию в Windows 8 и включен в Windows 7 SP1, но поскольку Windows 10 постепенно заменяет Windows 8, пользователи Internet Explorer все чаще переходят на замену IE от Microsoft, Edge.

Если вы решите включить favicon.ico для старых пользователей IE, есть важное предостережение Safari. На момент написания этой статьи, если в ваш HTML включены и ICO, и PNG, настольная версия Safari будет использовать файл ICO вместо PNG. Это проблема, так как большинство генераторов значков создают только значки размером 16 x 16 пикселей.На дисплеях Retina будет отображаться менее привлекательная иконка 16 x 16 вместо красивой PNG 32 x 32. Тем не менее, без каких-либо затрат для пользователей IE формат файла .ico от MS может поддерживать значок размером 16 x 16 пикселей и 32 x 32 пикселя в одном файле. Пользователи IE10 и более ранних версий увидят значок 16 x 16, тогда как пользователи Retina Safari могут наслаждаться фавиконом с гораздо более высоким разрешением 32 x 32 пикселей.

Для создания фавиконов, совместимых с Retina, требуется несколько дополнительных шагов, ниже представлена ​​адаптированная версия «DaringFireball» Джона Грубера.com: рекомендация «Создание фавиконов Retina Caliber». Этот метод требует покупки IconSlate (5 долларов США).

Использование IconSlate для создания фавиконки сетчатки (метод DaringFireball)

  1. Откройте IconSlate и создайте новый проект. Выберите только формат .ico, щелкните стрелку рядом с ico и установите только флажки 32 и 16.
  2. Назовите свою иконку «favicon» (без кавычек)
  3. Выделите квадрат 32 и вставьте значок размером 32 x 32 пикселя
  4. Выделите квадрат 16 и вставьте свой значок 32 x 32 пикселей или, если у вас есть собственный значок 16 x 16 пикселей, вставьте в него этот файл.
  5. Нажмите значок «Сборка» (если по какой-то причине значок «Сборка» неактивен, перейдите в «Файл» -> «Сборка»
    6. ).

Онлайн-генератор HTML + XML

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

  1. Введите путь к вашим любимым значкам. (если вы решили создать favicon.ico, поместите его в корень вашего домена независимо от других ваших значков).
  2. Выберите цвет фона для значка плитки Windows.
  3. Прокрутите вниз до кода, скопируйте и вставьте его или загрузите файлы.
  4. Поместите файл XML в тот же каталог, что и ваши любимые значки.

См. Pen Favicon HTML/Browser XML Generator от Грега Ганта (@fuzzywalrus) на CodePen.

Манифест веб-приложения

Манифест веб-приложения — это простой файл JSON, в котором подробно описывается, как веб-приложение должно работать, когда веб-приложение «установлено» (связано с панелью приложений Chrome). Этот файл JSON включает объявления для фавиконов.Дополнительные сведения см. в манифесте веб-приложения

.

Поздравляем! Готово!

Хороший способ протестировать новые любимые значки — использовать мобильное устройство или мобильный симулятор и закрепить свой веб-сайт на док-станции или домашнем экране. Вы должны увидеть новый значок фавикона на док-станции/главном экране.

Присоединяйтесь к веселью: Внесите свой вклад в проект github здесь: https://github. com/fuzzywalrus/Photoshop-FavIcon-Action

[Обновлено 28.10.2019 для версии 2020 с сильно сокращенным набором значков для здравомыслия]

Информация о фавиконе.ико

Обновлено: 08.05.2020, автор: Computer Hope

Что такое favicon.ico?

favicon.ico — это небольшой значок, который можно найти в строке URL-адреса и в закладках, созданных веб-браузерами.

Например, на изображении выше есть небольшой значок () перед URL-адресом Computer Hope.

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

Фавикон можно создать с помощью любого бесплатного генератора значков или в бесплатном онлайн-генераторе значков, таком как favicon.cc.Файл favicon.ico должен быть размером 16×16, содержать 16 цветов и сохраняться как файл .ico.

Наконец, файл favicon.ico должен быть загружен в корневой каталог на сервере, на котором размещена ваша веб-страница.

Можно ли анимировать значок?

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

Может ли файл называться как-то иначе, кроме favicon.ико?

Да, добавьте в свой HTML-код приведенный ниже тег в разделе вашего кода.

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

Фавикон также можно взять с другого веб-сайта. Например, чтобы использовать значок Computer Hope на своем сайте, вы можете добавить приведенный ниже тег в раздел.

 <ссылка rel="значок ярлыка" href="https://www.computerhope.com/favicon.ico">
Подсказка

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

Что такое favicon.gif?

Более современные интернет-браузеры используют favicon.gif в дополнение к favicon.ико. Если вы разработчик веб-сайта или блога, мы предлагаем использовать файл favicon.gif в дополнение к favicon.ico. Поместите файлы в корневой каталог вашего сайта и любые подкаталоги, доступные через Интернет, чтобы предотвратить появление ошибки 404 в журнале вашего сервера.

Почему мой браузер не показывает фавикон?

Фавикон может не отображаться по одной из перечисленных ниже причин.

  1. Если вы или кто-то другой, использующий ваш компьютер, недавно очистил ваш интернет-кеш, значки значков будут потеряны, поскольку они хранятся в этом временном кеше.
  2. Страница не загружалась в последнее время или браузер не ищет фавикона в неправильном месте. Попробуйте обновить страницу браузера (нажатие F5 на клавиатуре — это обычное сочетание клавиш для обновления страницы).
  3. Если вы являетесь веб-мастером веб-страницы и не можете отобразить favicon. ico, убедитесь, что значок находится в корневом каталоге с соответствующими разрешениями. Если это подтверждено и страница находится в другом каталоге, попробуйте поместить файл favicon.ico в этот каталог.
  4. Наконец, в более ранних браузерах возникали различные проблемы, связанные с файлом favicon.ico. Убедитесь, что вы используете последнюю доступную версию интернет-браузера для вашей операционной системы.

Добавление фавиконки — Документация Flask (1.1.x)

«Favicon» — это значок, используемый браузерами для вкладок и закладок. Это помогает выделить ваш веб-сайт и придать ему уникальный бренд.

Распространенный вопрос: как добавить фавикон в приложение Flask.Первый из Конечно, вам нужна икона. Он должен быть 16×16 пикселей и в файле ICO формат. Это не требование, а стандарт де-факто, поддерживаемый всеми соответствующие браузеры. Поместите значок в свой статический каталог как favicon.ico .

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

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

 app.add_url_rule('/favicon.ico',
                 redirect_to=url_for('static', имя файла='favicon.ico'))

Если вы хотите сохранить дополнительный запрос перенаправления, вы также можете написать представление используя send_from_directory() :

 импорт ОС
импорт из фляги send_from_directory

@приложение.маршрут('/favicon. ico')
определение фавикона():
    вернуть send_from_directory (os.path.join (app.root_path, 'статический'),
                               'favicon.ico', mimetype='image/vnd.microsoft.icon')

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

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

См. также

Как легко отображать фавиконку в результатах поиска (2022)

Как отобразить ваш значок в результатах поиска — В этой статье я покажу вам, как отобразить ваш значок в результатах поиска.

В моем случае значок отображался на вкладке браузера при посещении моего веб-сайта, но не отображался на страницах результатов поиска Google (SERP).

Решение, которое я предлагаю, было протестировано на веб-сайте WordPress, но оно применимо практически к любому веб-сайту.

Если у вас возникла та же проблема и вам нужна помощь, обязательно обратитесь к нашим службам веб-обслуживания.

Что такое фавикон?

Это определение «favicon», которое вы можете найти в Википедии (источник: wikipedia.org):

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

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

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

Используется большинством компаний и брендов.

По некоторым данным, наоборот, если вы не показываете фавикон (источник: quora. com):

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

Влияет ли фавикон на SEO?

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

В течение многих лет Google подчеркивал важность удобства работы со страницей, представив Core Web Vitals.

Если вы хотите узнать об этом больше, обязательно прочтите мою статью «Часто задаваемые вопросы о Core Web Vitals & Page Experience».

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

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

Как отобразить ваш фавикон в результатах поиска

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

Где «/path/to/favicon.ico» необходимо заменить URL-адресом вашего фавикона.

Кроме того, для отображения вашего значка в результатах поиска он должен соответствовать следующим рекомендациям Google:

  • И файл favicon, и домашняя страница должны быть доступными для сканирования
  • Ваш фавикон должен быть визуальным представлением бренда вашего веб-сайта,
  • Ваш значок должен быть кратен квадрату 48 пикселей, например: 48x48px, 96x96px, 144x144px и т. д.
  • URL-адрес фавикона должен быть стабильным (не меняйте URL-адрес часто)
  • Google не будет показывать фавиконки, которые считает неприемлемыми, включая порнографию или символы ненависти

Обратите внимание, что это не гарантирует, что ваш значок будет отображаться в результатах поиска. Гугл еще раз:

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

Источники

https://en.wikipedia.org/wiki/Favicon
https://www.quora.com/Does-having-a-favicon-for-your-website-affect-SEO
https://support.google .com/webmasters/answer/92
?hl=en
https://stories.freepik.com/illustration/about-us-page/rafiki

Что такое фавикон, зачем он нужен вашему сайту и как его создать

31 января 2020 г. | 12min read

Blog / SEO Insights / Почему каждому веб-сайту нужен фавикон и как его правильно создать

Фавикон — это маленькое квадратное изображение, которое представляет веб-сайт в веб-браузерах.Если вы прямо сейчас взглянете на адресную строку своего браузера, я уверен, вы увидите несколько фавиконов, в том числе иконку SE Ranking. Как правило, на фавиконе присутствует логотип, первая буква названия компании или просто изображение, отражающее специфику веб-сайта, который он представляет.

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

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

От Internet Explorer до поисковой выдачи Google

Еще в 1999 году в Internet Explorer был введен фавикон, который помогал пользователям отличать веб-страницы, добавленные в закладки, от других.А поскольку страницы с закладками назывались (и, вероятно, до сих пор) «Избранными» в Internet Explorer, слова «избранное» и «значок» были смешаны вместе, чтобы создать новый термин.

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

2. Помимо адресной строки, фавиконки можно найти и в истории браузера.

3. Страницы с закладками также будут иметь фавиконку, как на панели закладок…

4. …, так и в разделе «Другие закладки».

5. С мая 2019 года Google использует фавиконы в поисковой выдаче для мобильных устройств, а в начале 2020 года поисковая выдача на ПК также получила новый вид.

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

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

Соответствие техническим требованиям

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

Но с чего же начать? Начните с выбора правильного формата и размера фавикона.

Формат фавиконки

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

Раньше Internet Explorer поддерживал только этот формат файла, но современные веб-браузеры позволяют использовать значки PNG, а некоторые браузеры даже поддерживают значки GIF, JPEG и SVG. Единственным исключением здесь являются более ранние версии Internet Explorer, такие как 10 и ниже, — они совместимы только с файлами ICO.

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

Фавиконы в форматах файлов SVG, GIF и JPEG не так хороши с точки зрения совместимости с браузерами.Однако это может измениться в будущем. Формат SVG (масштабируемые векторные изображения) может стать новой нормой, поскольку его использование решит проблему создания нескольких фавиконов разного размера для всех популярных устройств. Таким образом, хотя в настоящее время только несколько браузеров поддерживают значки SVG, другие вполне могут скоро их догнать.

Чтобы узнать, какие форматы favicon поддерживаются разными браузерами, посетите веб-сайт Can I Use. Здесь вы можете увидеть, например, какие версии браузеров совместимы с иконками PNG и SVG.

Размер фавиконки

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

Итак, какой размер фавикона предпочтительнее? Google рекомендует использовать максимально возможное разрешение 192×192. Недавно некоторые веб-мастера получили письмо от Google, в котором им рекомендовалось использовать фавиконы с высоким разрешением, чтобы получать больше кликов.На данный момент Google просто растягивает существующие значки с низким разрешением, когда требуется больший размер — например, для домашнего экрана Android. В результате все изображения выглядят размытыми и мешают работе пользователя.

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

  • Используйте квадратную иконку.
  • Фавикон должен представлять только ваш бренд и не содержать недопустимых символов (например, свастики) — в противном случае Google не покажет его и вместо этого будет использовать общий символ фавикона.
  • Файл Favicon должен быть доступен для поисковых роботов Google.

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

Обращение к Интернету за помощью в создании фавикона

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

Можно ли этого избежать?

Конечно.На самом деле существует несколько способов создания фавикона сайта, например:

1) Создать его в графическом редакторе типа Photoshop с помощью специального плагина Favicon.ico.

2) Оформить в специальных онлайн-сервисах (например, Katvin или favicon.cc) и потом скачать оттуда в подходящем формате.

3) Использовать существующее изображение, например, вашего логотипа и загрузить его в онлайн-генератор фавиконов, таких как Favicon.io, Realfavicongenerator.net и т. д.

4) Загрузить готовые фавиконы из специальных баз данных, таких как Flaticon или Findicons с тысячами вариантов на выбор.

После загрузки сгенерированного фавикона вам останется только добавить его на свой сайт.

Украшение вашего сайта фавиконкой

Сначала загрузите свою фавиконку в корневой каталог сайта с помощью файлового менеджера, такого как Filezilla. Затем все, что вам нужно сделать, это вставить следующий фрагмент кода в метатег:

   

    ... 

     

     

    ...

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

Простота не значит хуже в дизайне фавикона

Прежде чем вы побежите записывать свою следующую идею фавикона, почему бы не внимательно посмотреть на результаты поиска по вашим целевым ключевым словам? Как выглядят фавиконы, которые у них есть?

И пока вы будете это делать, задайте себе следующие вопросы:

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

Может ли анимированный GIF-фавикон помочь вам выделиться? Или это просто мозолит глаза поисковикам, создавая эффект, который (скорее всего) создаст впечатление, что ваш сайт еще не закончил загрузку.

Вы четко понимаете свой фавикон, когда он размером 16×16 пикселей? Старайтесь, чтобы ваш фавикон не содержал мелких деталей, а также не пытайтесь включить в него все мыслимые цвета.

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

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

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

Проверка вашего фавикона на наличие критических ошибок

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

  • http://www .google.com/s2/favicons?domain=mysite.com

Есть еще один способ проверить, как фавикон выглядит на разных устройствах: с помощью специальных онлайн-сервисов, таких как Realfavicongenerator.

Однако, если ваш значок не отображается корректно или вообще не отображается в Google по какой-либо причине, начните с проверки следующих вещей:

  1. Находится ли графическое изображение в корневой папке ресурса в файле ICO, PNG или GIF формат?
  2. Правильно ли прописан код, ведущий к изображению на страницах ресурса?
  3. Фавикон понятен и уникален?
  4. Доступен ли файл фавикона для поисковых роботов?

Хочу отметить, что путь к изображению напрямую влияет на то, насколько хорошо отображается фавикон. Если вы хотите каким-либо образом удалить или отредактировать свой значок, все, что вам нужно сделать, это удалить или изменить файл favicon.ico (JPEG, GIF, PNG).

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

Почему без фавикона не обойтись

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

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

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

Знаете, как говорят, что дьявол кроется в деталях? Что ж, ваш фавикон — это очень маленькая деталь, которая может повлиять на общественное восприятие вашего сайта и бренда, их узнаваемость и даже объем трафика, который он получает из поиска, поэтому не стоит его недооценивать.

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

11228 просмотров

Эндрю — контент-маркетолог, писатель, редактор и ведущий вебинаров в SE Ranking, а также приглашенный участник различных маркетинговых медиа. Он увлечен контентом, маркетингом, социальными сетями и лучшими практиками SEO и использует свой опыт, чтобы помочь компаниям более эффективно охватить свою глобальную аудиторию.Когда он не пишет о SEO и маркетинге, его можно найти проводящим время со своим котом, наслаждающимся видеоигрой, слишком много смотрящим футбол или играющим на гитаре (именно в таком порядке).

Добавление фавикона в ваш магазин · Справочный центр Shopify

Эта страница была напечатана 26 января 2022 г. Актуальную версию можно найти на странице https://help.shopify.com/en/manual/online-store/images/add-favicon.

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

Создать значок

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

Идеальный размер фавиконки — 16×16 пикселей или 32×32 пикселя. Если ваш файл favicon слишком велик, он будет уменьшен до 32×32 пикселей, когда вы загрузите его в Shopify.

Добавьте фавиконку в свой интернет-магазин

Наконечник

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

  1. В админке Shopify перейдите в Интернет-магазин > Темы .
  2. Найдите тему, которую хотите изменить, и нажмите Настроить .
  1. В приложении Shopify нажмите Store .
  2. В разделе Каналы продаж нажмите Интернет-магазин .
  3. Нажмите Управление темами .
  4. Найдите тему, которую хотите изменить, и нажмите Настроить .
  5. Коснитесь Редактировать .
  1. В приложении Shopify нажмите Store .
  2. В разделе Каналы продаж нажмите Интернет-магазин .
  3. Нажмите Управление темами .
  4. Найдите тему, которую хотите изменить, и нажмите Настроить .
  5. Коснитесь Редактировать .
  1. Нажмите Настройки темы .
  2. Нажмите Фавикон .
  3. В области Favicon image щелкните Select image , а затем выполните одно из следующих действий:
    • Чтобы выбрать изображение, которое вы уже загрузили в свою админку Shopify, щелкните вкладку Библиотека .
    • Чтобы выбрать изображение с локального компьютера, щелкните вкладку Библиотека , а затем щелкните Загрузить .
  4. Добавьте замещающий текст к изображению фавиконки:
    1. Щелкните Редактировать .
    2. В окне Редактировать изображение введите краткое описание изображения.
    3. Щелкните Сохранить .
  5. Щелкните Сохранить .

Как изменить значок или фавикон в адресной строке.ико?

Проблема:

Могу ли я изменить файл «favicon.ico» для своего веб-сайта (ов)?

Решение:

Да! Это довольно легко сделать.
Файл favicon.ico обычно представляет собой простое изображение размером 16×16, отображаемое в строке состояния браузера, на вкладках и/или в строке заголовка. Чтобы изменить это на свое, просто сделайте следующее:
  1. Создайте «favicon. ico» из вашего предпочтительного изображения. Вы можете использовать инструмент для редактирования изображений, такой как Adobe Photoshop, GIMP, MS Paint и т. д., или использовать этот веб-сайт: http://www.favicon.cc/.

  2. Загрузите изображение в «корневой каталог» вашего веб-сайта. Если это ваш основной домен, каталог «/public_html/». Если это субдомен или дополнительный домен, обратитесь к разделу cPanel → Домены → Субдомены или cPanel → Менеджер домена, чтобы узнать, к какому каталогу относится домен.

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

Рекомендуемое содержание справки

При просмотре в Internet Explorer мой favicon.ico не загружается.

Статья базы знаний 130 926 просмотров теги: значок т.е.

Как я могу добавить значок избранного (favicon) на свой сайт.

Статья базы знаний 304 474 просмотра теги: значок

Что такое значок избранного и как его изменить?

Статья базы знаний 92 146 просмотров теги: значок

Связанное содержимое справки

Я пытаюсь отредактировать свою веб-страницу и не знаю, как это сделать? Мне нужно знать, как зайти на сайт и исправить это. На моей веб-странице ошибка в первом абзаце. Я не знаю, как это исправить? Вы можете помочь?


У меня проблемы со спамом. Я считаю, что мой адрес электронной почты был украден (удален с моего сайта и продан спамерам). Могу ли я скрыть свой адрес электронной почты, но при этом получать сообщения от людей?


Как внести свой IP-адрес в белый список? Я не могу войти в MySQL с удаленного компьютера с помощью инструмента администрирования MySQL (phpMyAdmin, Navicat, MySQLFront, MySQL-Admin и т. д.).


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


Объясняет, как редактировать файл .хтаксесс

Статья базы знаний 295 949 просмотров тэги: хтакцесс

Чтобы установить форум phpBB с помощью MOJO Marketplace, войдите в cPanel и прокрутите вниз до категории «Программное обеспечение/услуги».Нажмите на значок MOJO Marketplace. Щелкните значок phpBB. Нажмите Установить сейчас bu


Как изменить конфигурацию PHP — VPS или выделенный


В этой статье объясняется, как настроить, удалить или изменить задание Cron.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *