Содержание

что это, для чего нужен, форматы favicon

Favicon — иконка сайта, в переводе «значок для избранного» (FAVorite ICON). Обычно Favicon сайта отображает логотип компании, первую букву ее названия или какое-либо изображение, характеризующее тематику/направленность сайта.

SEO продвижение в ИТ

Где можно встретить Favicon и для чего он нужен

Фавикон можно увидеть:

  • на открытой вкладке в браузере около названия страницы или сайта;
  • в браузерной истории;
  • в панели закладок;
  • в панели «Избранное»;
  • в мобильной и обычной выдаче поисковых систем.

Неважно, где именно вы увидите Favicon, ведь главная его задача — привлечь к себе внимание, запомниться и в будущем ассоциироваться с конкретным сайтом.

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

Доступные форматы и основные параметры Favicon

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

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

Размеры — второй важный параметр для Favicon. Ранее иконки сайтов могли иметь размеры лишь 16 на 16 пикселей. А современные браузеры поддерживают изображения размерами 32 на 32 пикселя.

Для создания Favicon в интернете есть множество онлайн-сервисов — генераторов. Иконка для сайта может быть разработана в каком-либо графическом редакторе.

Поддержка браузерами

Ранее браузеры поддерживали исключительно ICO-формат, но сегодня веб-мастера могут использовать более широкий набор форматов Favicon:

Исключение — браузер Internet Explorer 10 версии и более ранних. Он поддерживает исключительно формат ICO.

Все остальные современные браузеры (по типу Google Chrome, Mozilla Firefox и т. д.) могут работать с анимированными Фавикон формата png. И такое решение позволяет владельцам сайтов еще сильнее выделять свои ресурсы среди конкурентных.

Анимированные png-иконки сайтов отличаются высоким качеством изображения, которое не страдает ни в мобильном, ни в десктопном браузере. Основной недостаток иконок формата svg, gif, jpeg заключается в том, что не каждый браузер их поддерживает.

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

Редактор favicon.ico онлайн

Редактор favicon.ico онлайн

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

Но кроме этого редактора на сайте теперь имеется онлайн конвертер, который позволяет преобразовать один или более PNG в ICO.

Если вы видите этот текст, значит что-то пошло не так. Возможно у вас отключён JavaScript.

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

Загрузка иконок и файлов

В мае 2014 года запущена новая функция (о которой многие и давно просили) — загрузка изображений из файла. Расскажу о специфике.

От браузера требуется поддержка двух достаточно современных технологий — HTML5 convas и file API. То есть, вам понадобится Internet Explorer не ниже версии 10, или Firefox 28 и выше, или Google Crome 31 и выше. Подойдёт последние версии Safari и других браузеров.

Формат картинки в файле любой, поддерживаемый вашим браузером. Все браузеры поддерживают JPEG, PNG и GIF. Многие браузеры поддерживают и другие форматы.

Размер картинки может быть любым в пределах разумного. Картинка будет уменьшена до 16×16.

Цветность будет уменьшена до 16 цветов. Редактор пытается построить адаптивную палитру, но алгоритм пока далёк от совершенства. Я бы рекомендовал сперва подготовить картинку в полноценном редакторе.

Прозрачность преобразуется к однобитной по границе 50%.

Буду рад любым отзывам и либо уберу эту функцию, если она никому не нужна, либо доработаю, если обнаружатся какие-то ошибки. Спасибо.

favicon — это небольшая картинка, являющаяся логотипом сайта. Она появляется в шапках вкладок, в адресной строке (кроме новейших версий Chrome и Firefox †), в закладках.

В одном файле favicon.ico может быть несколько изображений разного размера. Чаще всего используется изображение 16×16. Бо́льшие размеры используются, например, в Windows, при создании закладки прямо на рабочем столе. В этом случае размер зависит от версии операционной системы и настроек рабочего стола.

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

Проще всего просто положить иконку в корень сайта. Она должна стать доступна по адресу

http://ваш_домен/favicon.ico. Именно тут её будут искать браузеры.

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

Вы так же можете явно указать браузерам, что у вас есть favicon.

Для этого надо включить в секцию <head> код такого вида:

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

Что касается type, тут есть неоднозначность. Стандартным типом является image/x-icon. Я бы советовал использовать его. Однако, особо древние версии IE предпочитают тип

image/vnd.microsoft.icon. Подозреваю, что все современные браузеры поддерживают этот тип, но кто знает. Каждые пару месяцев появляется новый современный браузер и поручиться за все современные браузеры я не могу.

Возможно вас так же заинтересует конвертер PNG в ICO и онлайн генератор обоев, фонов и заливок.





Отправить

Как настроить корректное отображение favicon сайта на различных устройствах

Favicon (favorite icon) — маленький значок (обычно логотип или часть логотипа), который отображается во вкладке браузера рядом с заголовком (title) страницы. На сегодняшний день у этой иконки существует еще множество предназначений. В этой статье мы рассмотрим основные из них. А также пройдемся по основным форматам и типам favicon.

Для чего нужен Favicon?

1. Иконка на вкладке браузера

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

2. Иконка в закладках браузера

Если сохранить страницу сайта в закладках браузера, то рядом с названием сохраняемой закладки будет также отображаться и иконка favicon. Также этот значок будет отображаться в настройках браузера в разделах «Закладки» и «История».

3. Иконка в поисковой выдаче

Поисковые системы Яндекс и Google выводят favicon слева от ссылки на страницу сайта. Это важный фактор, т.к. на сайты, имеющие favicon, кликают чаще, чем на сайты без favicon.

4. Иконка на рабочем столе компьютера

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

5. Иконка в рейтингах и на стартовых страницах

При регистрации сайта в различных внешних рейтингах и сервисах, рядом с названием и ссылкой часто также отображается и иконка favicon. Наличие favicon также выгодно выделяет сайт на фоне остальных.

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

Какой должен быть формат файла Favicon?

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

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

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

Какой должен быть размер Favicon?

Исторически сложились три стандартных формата favicon: 16×16, 32×32, 48×48. Однако в последние годы веб-платформы развились очень разносторонне, и на сегодняшний день включают в себя смартфоны, планшеты, телевизоры. На всех этих устройствах используются различные браузеры для доступа в интернет. Исходя из этого начали появляться и другие форматы favicon, такие как 96×96, 128×128, 196×196 и некоторые другие.

Очень сильно повлияло на стандарты размеров favicon появление первых iPhone и знаменитых retina-экранов от Apple с удвоенной плотностью пикселей, диктующих свои размеры изображений для favicon.

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

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

  • 57×57 — iPhone (iOS 6 и ниже, экран Classic)
  • 60×60 — iPhone (iOS 7, экран Classic)
  • 72×72 — iPad (iOS 6 и ниже, экран Classic)
  • 76×76 — iPad (iOS 7, экран Classic)
  • 114×114 — iPhone (iOS 6 и ниже, экран Retina)
  • 120×120 — iPhone (iOS 7, экран Retina)
  • 144×144 — iPad (iOS 6 и ниже, экран Retina)
  • 152×152 — iPad (iOS 7, экран Retina)
  • 180×180 — iPhone (iOS 8 и выше, экран 6 Plus)

Для устройств на Windows

  • 70×70 — закладки в Edge и плитка в Пуск (размер: Мелкий)
  • 150×150 — плитка в Пуск (размер: Средний)
  • 310×150 — плитка в Пуск (размер: Широкий)
  • 310×310 — плитка в Пуск (размер: Крупный)

Остальные случаи

  • 16×16 — для закладок браузеров
  • 32×32 — для закладок на панели задач
  • 96×96 — для ярлыков на рабочем столе

Например, на нашем сайте qmedia.by это выглядит следующим образом:

Корректная favicon-иконка с прозрачностью

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

Простой вариант

Делается favicon-иконка легко. В любом графическом редакторе готовим картинку размером 32×32 пикселя. Сегодня лучше именно такой размер, а не 16×16, как было ранее. Большая иконка без проблем подхватывается браузерами, а на всяких устройствах с Retina-дисплеями выглядит более гладко и красиво.

Под Windows могу рекомендовать редактор Paint.Net. Он бесплатен и все что нужно в нем есть.

Просто открываем в нем картинку, если нужно изменяем ее размер до 32×32.

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

Картинку можно подготовить с прозрачным фоном. Если значок/буква, или что там у вас, заполняет не все пространство изображения, как в примере буква «D», то прозрачность крайне желательна. Сохранять результат следует в формат PNG 32-бит. Только так получится сделать PNG с прозрачностью.

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

Я пробовал разные сайты для генерации favicon-иконок, но именно этот мне понравился. Он делает корректную иконку/файл, который 100% открывается везде. Кроме того он не уродует контуры изображения на прозрачном фоне и вообще делает иконку с прозрачностью так, как надо.

Размещать файл favicon.ico следует обязательно в корне сайта.

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

В HTML-коде сайта favicon.ico прописывается внутри тега head так:

<link rel="shortcut icon" href="favicon.ico" >

Рекомендуемый вариант

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

Иконки для папок и Иконки Favicon на сайт

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

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

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

  • Поддержка большого количества форматов для взято с l*ady-win.ru_взято с la*dy-win.ru загрузки моего изображения.
  • Поддержка прозрачности.
  • Выдача размера по моим критериям.

Первый сервис: Dynamic Drive

Очень неплохой и быстрый. Поддерживает прозрачность, берет все форматы. Но есть ограничение на загрузку изображения по весу – максимум 150 kb. Поэтому здесь не обойтись без программы, где нам сначала надо будет изменить вес файла, да и размер заодно. Выдает всего три размера на выбор – 16Х16, 32Х32 и 48Х48 и выводит только в формате ico.

 

 

 

Второй сервис: Converticon

Супер сервис, на мой взгляд, отвечает всем моим критериям и даже больше.
Поддержка прозрачности, загрузка любого размера, но правда только в формате взят_о* с lady-win.ru_взято с lady-win.ru ico, cur, png, gif, jpeg. В принципе этих форматов должно хватить. А выводит он просто сказка, на выбор куча разных размеров, и формата два — ico и png. Очень мне пригодится, потому что моя любимая программа ACDSee Pro не работает с прозрачностью 🙁

 

 

Я тут немножко забылась и не убрала галочку с «оригинальный размер», в итоге получила иконку размером 2366 Х 2344 px. Хорррошая такая иконка получилась 🙂

 

Создание иконок для сайта

Вот эти онлайн сервисы могут взято с lady-win.r_u_взято с lady*-win.ru делать иконки для наших папок  и иконки фавикон для сайтов. Иконки для сайтов обычно имеют размер 16Х16. На первом сайте даже дают код для вставки в шаблон. Если вы не знаете как поставить фавикон на свой сайт поделюсь своим опытом. Так как у всех шаблоны разные и по-разному настраиваются – на истину не претендую, но мой аленький цветочек-фавикончик как видите, работает. Итак, ваши действия:

  1. Сделать на сайте онлайн фавикон в формате ico и с размером 16Х16 — favicon.ico
  2. Загрузить через ftp фавикон в корневую папку — http://ваш_сайт.ru/favicon.ico
  3. Зайти в админку, открыть редактор, открыть — Заголовок (header.php).
  4. Найти </head>  и взято с lady_-win.ru*взято с *lady-win.ru ПЕРЕД ним вставить вот этот код:
[php]
[/php]

Вместо ваш_сайт, вставьте ваш сайт 🙂

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

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

       взято с lady-w*in.ru_взято с lady_-win.ru  

 Качаем новогодние иконки.

Красивые обои новогодние

Почему не отображается иконка сайта 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 на свой домен.
(если у Вас отображается иконка Земного шара, то не переживайте, так тоже бывает с нормально сделанными сайтами)

Иконка сайта — как создать иконку favicon для Blogger?

Иконка сайта, favicon, которая отображается на вкладке маленьким значком, это по большому счёту украшательство. Но красивая иконка сайта сделает его заметнее — конечно, стандартная favicon на блогодвижках Blogger тоже ничего, но она одна и та же у всех на Blogger. Оригинальная иконка это и лицо сайта, и хороший тон дизайнера. Сделать favicon самому нетрудно, а для размещения её потребуется вставить только одну строчку в код шаблона. Итак , заводим себе аккаунт на любом хостинге картинок (та же Picasa подойдёт), берём любой графический редактор и создаём favicon ico за пять минут.

Создать favicon — просто!
Для этого нужно пять минут, немного терпения и графический редактор.

  1. Загружаем ваш любимый графический редактор (Adobe Photoshop, GIMP, Cinepaint…) и создаём изображение размером 16х16 или 22х22 пикселя. Рисуем, творим и создаём favicon — можно взять из элементов оформления блога или из любого понравившегося изображения. Главное, чтобы изображение было несложным — помните, ваш холст всего 22х22 пикселя!
  2. Сохраняем результат в формате png или ico. Есть мнение, что favicon ico предпочтительнее, однако favicon png так же хорошо отображаются (во всяком случае, Blogger-ом).
  3. Загружаем получившийся favicon на хостинг изображений, берём оттуда прямую ссылку на наш favicon.
    Следующие шаги специфичны для блогохостинга Blogger, однако идея для других движков должна быть сходной.
  4. Теперь заходим в Панель управления блогами в Blogger, нажимаем Макет и там — Править HTML.
  5. В коде блога ищем:

    <title><data:blog.pagetitle/></title>
  6. Сразу под этим кодом вставляем такой:
    <link href='http://где.ваша.картинка.png' rel='shortcut icon'/>
  7. Приведённый код должен быть между тегами
    <head> ... </head>
  8. Сохраняем шаблон и перезагружаем страницу. Всё, теперь на вкладке должна появиться созданная иконка.
Пример можно увидеть хотя бы на этом блоге — посмотрите на вкладку с этим постом, наверху должна быть иконка этого блога, жёлтый кленовый лист.

Ссылки
При написании этого поста и правке шаблона руководствовался тем и этим постами.

Значок Favicon — Ошибки — Сообщество Glide

Деннис #1

URL-адрес моего приложения: https://smartcryptoapp.glideapp.io

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

Страдает той же проблемой.Я думаю, это ошибка. @Mark @david, что ты здесь думаешь?

Криво #3

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

Даже после этого ничего не меняется.

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

Деннис #6

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

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

Скриншот рабочего стола:

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

Карлос #8

Со мной тоже такое случилось. Очистка данных браузера решила мою проблему.

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

Спасибо

Я давно этого не делал, но помню, что удалял приложение и очищал кеш. Я думаю, что иногда изменения в конечном итоге переносятся вниз, но я не могу это проверить. У меня есть опыт только с Android.

Павел #11

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

Icon vs Favicon — в чем разница?

Альтернативные формы

* Эйкон, икон

Существительное

( en существительное )
  • Изображение, символ, изображение или другое представление, обычно являющееся объектом религиозного поклонения.
  • Религиозная картина, часто выполненная на деревянных панелях.
  • Человек или вещь, являющиеся лучшим примером определенной профессии или какого-либо занятия.
  • Этот человек icon в бизнесе; он олицетворяет лояльность и хорошее деловое чутье.
  • Небольшое изображение, представляющее что-то (например, значок на экране компьютера, который при нажатии выполняет какую-либо функцию.)
  • (лингвистика) Тип существительного, при котором форма отражает и определяется референтом; звукоподражательные слова обязательно все значки. См. также (, символ ) и (, индекс ).
  • Графические представления файлов, программ и папок на компьютере.
  • Производные термины
    * аниконизм, аниконизм * иконизм

    Связанные термины
    * знаковый * иконоборчество, иконоборчество, иконоборчество * иконизировать * иконография * иконостас

    Анаграммы

    * * * —-

    Английский

    Существительное

    ( en существительное )
  • (веб-дизайн) Значок, связанный с определенным веб-сайтом и обычно отображаемый в адресной строке браузера, просматривающего этот сайт.
  • * 2000 , Журнал ПК , Vol. 19, вып. 19-20, с. 127,
  • Единственный способ восстановить фавиконку — это удалить ссылку из папки «Избранное» и создать ее заново.
  • * 2002 , Эджуб Каян, Энциклопедия информационных технологий и сокращения , с. 195 ,
  • Бесплатный онлайн-редактор favicon ‘ позволяет опытным веб-мастерам создавать свои собственные ‘ favicon и использовать их при разработке или обслуживании веб-сайта.
  • * 2006 , Рихард Вагнер, Веб-дизайн до и после изменений , стр. 206 ,
  • Однако вы можете добиться большего успеха, создав свой собственный фавикон для своего веб-сайта — как раз то, что вам нужно, чтобы добавить профессиональный штрих.
  • * 2009 , Steve Souders, Еще более быстрые веб-сайты , страница 158 ,
  • Обязательно создайте фавикон .Поскольку браузер все равно запросит этот файл, нет причин возвращать ошибку 404 Page Not Found, особенно если ваш обработчик 404 потребляет соединение с базой данных или другие дорогостоящие ресурсы.
  • * 2009 , Мэнни Эрнандес, Нин для чайников , стр. 312 ,
  • Фавиконы — это маленькие милые значки, которые появляются в адресной строке браузера при посещении некоторых сайтов.
  • * 2010 , Джанет Маджуре, Научитесь визуально WordPress , страница 132 ,
  • Вы можете использовать значок favicon , предоставленный вашим веб-узлом.
    Не беспокойтесь о правильном произношении favicon . Определенного произношения нет.

    Связанные термины
    *смайлик

    Добавление фавикона — Документация 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-тип, и он будет угадан, но мы можем а также укажите его, чтобы избежать дополнительных угадываний, так как это всегда будет такой же.

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

    См. также

    Как установить WordPress Favicon | Иконки сайта

     Значок сайта – это уникальный значок для вашего веб-сайта. Он отображается на панели управления WordPress.com, на вкладке браузера посетителей вашего сайта, а также в виде закладки и значка приложения на главном экране при сохранении в браузере или телефоне. Вот несколько примеров:

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

    Посмотрите короткое видео о том, как добавить или изменить значок сайта ниже.

    Добавить значок сайта

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

    1. Перейти к Мой сайт → Внешний вид → Настроить → Идентификация сайта.
    2. Нажмите Выберите значок сайта . Будет показана ваша медиатека.
    3. Выберите существующее изображение или загрузите новое.

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

    1. Нажмите Выберите . Затем вам может быть предоставлена ​​​​возможность обрезать изображение, чтобы убедиться, что оно квадратное. Вы также можете пропустить шаг обрезки, если хотите.
    2. Нажмите кнопку Сохранить изменения , когда вас устроит значок.

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

    ↑ Содержание ↑

    Удаление значка сайта

    Вы можете удалить пользовательский значок сайта, выбрав Мой сайт → Внешний вид → Настроить → Идентификация сайта и нажав кнопку Удалить .

    Помогите нам стать лучше:

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

    Все о фавиконах (и сенсорных значках)

    На этой неделе я решил изучить, как правильно использовать значки сайтов (и, соответственно, мобильные «сенсорные значки») в разных браузерах.Хотя на эту тему уже есть немало статей, я решил написать этот пост, чтобы собрать воедино все, что я исследовал, и представить это в удобном для себя и, надеюсь, для вас формате.

    Основы

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

    .
    • Адресная строка
    • Панель ссылок
    • Закладки
    • Вкладки
    • Значок на рабочем столе

    Если мы не укажем, где найти значок, все основные браузеры (начиная с IE5) по умолчанию будут искать файл с именем «favicon.ico» в корневом каталоге веб-сайта. Это означает, что технически нам не нужно ничего объявлять, чтобы иметь рабочий значок.

    Однако использование формата ico может иметь ограничения. Он не поддерживает прозрачность и не оптимизирован для Интернета. В настоящее время мы можем использовать более широкий спектр форматов, включая png, gif, jpeg и, в некоторых случаях, svg.

    Декларация Favicon и тег ссылки

    При отклонении от значения по умолчанию значки можно объявлять с помощью тега .Тег принимает следующие атрибуты —

      
      

    Отн.

    Атрибут rel используется для объявления отношения между html-документом и связанным элементом. Мы используем это, среди прочего, для связывания таблиц стилей. Что касается значков, в официальной документации HTML указано, что этот атрибут должен быть установлен как —

    .
      <ссылка rel="icon">
      

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

      
      

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

    Тип

    Атрибут type определяет формат типа MIME связываемого элемента. Например, файл ico имеет тип image/x-icon , а файл png image/png .

    Согласно W3C, указание типа является «чисто рекомендательным»:

    «Атрибут type используется в качестве подсказки для пользовательских агентов, чтобы они могли избежать получения ресурсов, которые они не поддерживают… Пользовательские агенты не должны считать атрибут type авторитетным»

    Несмотря на это, IE 9 и 10 требуют указания атрибута типа. В этих версиях, хотя необходимость определять атрибут rel как значок ярлыка была удалена, вместо этого была добавлена ​​необходимость указывать тип носителя как image/x-icon .

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

    Размеры

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

    номер

    Указывает расположение фавикона.

    Собираем вместе

    Браузер Ссылка «отн.»/ «тип» Принятые форматы
    IE 8 и ниже ссылка rel=»значок ярлыка» ико
    ИЭ 9, ИЭ 10 link rel=»icon» type=»image/x-icon» или
    link rel=»shortcut icon»
    ико
    ИЭ 11 ссылка rel=”icon” ico, png, gif
    Хром ссылка rel=”icon” ico, png, gif
    Firefox ссылка rel=”icon” ico, png, gif, svg*
    Сафари ссылка rel=”icon” ico, png, gif
    Опера ссылка rel=”icon” ico, png, gif

    Исходя из этих различий, может показаться, что лучшим методом будет объявление двух версий — файлов png с использованием современного метода и файла ico с использованием метода IE8.

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

    Из-за этого лучшим решением может быть объявление только файлов формата png и разрешение старым браузерам использовать значение по умолчанию в качестве запасного варианта.

      
    
    
    
    
    
    
    
      

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

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

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

    Для Windows эти значки определяются с помощью метатега.

    Для Windows 8/IE 10 —

      
    
      

    Для Windows 8.1/ИЭ 11 —

      
    
    
    
    
    <конфигурация браузера>
      
        <плитка>
          
          
          
          
          #009900
        
      
    
      

     

    Вот (почти) все! Для такой небольшой части сайта фавиконки требуют слишком много частей.Для очень простых сайтов я, вероятно, просто буду использовать формат ico, если мне не нужно что-то более причудливое. Я просто не могу дождаться, когда фавиконы SVG станут чем-то особенным, хотя до этого еще далеко!

    Favicon — иконка для веб-страницы

    20 сентября 2005 г., обновлено 30 января 2009 г.

    в Internet Explorer, Mozilla Firefox, Opera и Google Chrome.

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

    Favicon дает идентификатор веб-сайта

    Favicon — это небольшое изображение, отображаемое интернет-браузером:

    • в адресной строке,
    • в панели и меню Избранное (Закладки),
    • современные браузеры также отображают их во вкладках,
    • , а также есть расширение для Firefox, которое отображает фавиконки на страницах поиска Google.


    Фавикон в адресной строке и на панели закладок веб-браузера

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

    Что нового в IE9 и Widnows 7

    Создание фавиконки

    Favicon — это обычная иконка с изображениями размером 16×16 пикселей. Для лучшей совместимости должно быть изображение с 16 цветами или 256 цветами. Браузеры также могут использовать гладкое 32-битное изображение с альфа-каналом.Изображения с большими размерами не нужны (если только вы не хотите ориентироваться на пользователей, работающих в режимах с высоким разрешением, но поддержка этого в браузерах очень непоследовательна) и только увеличит размер файла значка -> его загрузка займет больше времени, поэтому оставь их.

    Вы можете создать фавиконку в любом редакторе иконок. Используйте редактор значков RealWorld или выберите один из других редакторов значков (список редакторов значков есть в нашем каталоге). Если вы хотите создать фавиконку, ничего не устанавливая, воспользуйтесь онлайн-конструктором иконок.Он поддерживает 256 цветов с прозрачностью, а также может преобразовывать изображения в значки. Получив значок, переименуйте его в favicon.ico и загрузите на свой веб-сервер.

    Назначение фавиконки странице

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

        

    В следующем примере показан полный HTML-код очень простой страницы с иконкой:

      
    <голова>
    Название моей страницы
    
    
    <тело>
    Моя страница не пуста. Видеть?
    
      

    Специфические примечания для браузера

    Internet Explorer

    Internet Explorer поддерживает значки избранного, начиная с версии 5.0. На самом деле довольно сложно заставить IE5 или IE6 показывать фавикон. Если значок не отображается, попробуйте выполнить одно из следующих действий:

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

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

    Mozilla Firefox, Opera, Google Chrome

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

    Анимированные иконки

    Firefox позволяет использовать любые изображения в качестве фавиконок, включая анимацию .gif. Opera тоже это умеет, но не анимирует картинку.Если вам нужен анимированный значок, просто создайте favicon.gif и используйте тот же HTML-код, что и выше. Если вы добавите две строки в раздел , анимированный значок будет использоваться Firefox, а обычный — другими браузерами.

      
      

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

    Частые проблемы и решения

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

    • Если вы изменили значок в своем веб-сайте, вы видите старый значок (или нет значка) в браузере, обновите страницу или очистите кеш. Если вы не знаете, как очистить кеш, но по-прежнему видите старую иконку, попробуйте протестировать свою сеть с другого компьютера.Вы можете спросить своих друзей на своей любимой доске обсуждений, увидят ли они ваш новый значок.
    • Не переименовывайте .bmp в .ico. Я действительно серьезно. Вам нужно преобразовать картинку в иконку одним из способов, описанных выше. В то время как Firefox примет этот фальшивый .ico, другие могут не принять.
    • Еще раз: если можете, сделайте фавикон доступным по адресу www. ваш сервер .com/favicon.ico с правильными заголовками. Это убережет вас от многих неприятностей. Проверьте, доступен ли ваш значок, указав его URL-адрес в поле адреса.Он должен либо отображаться в браузере как картинка, либо должно появиться диалоговое окно загрузки. Если вместо этого вы видите бессмысленный текст, ваш веб-браузер неправильно настроен для обработки файлов .ico.
    • Значки (файлы .ico) могут содержать несколько изображений разных размеров и разной глубины цвета. Если ваш значок содержит несколько изображений, и вы меняете только одно из них, вы можете не увидеть изменения в своем браузере, потому что он показывает вам изображение, отличное от файла .ico.
    • Фавиконы не работают в некоторых браузерах, если вы протестируете их локально, открыв файл .html (без веб-сервера).
    Анонимный .

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

    Ваш адрес email не будет опубликован.