Создать онлайн фавикон для сайта: Сделать 🖼 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 с размерами 48x48.

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

Как установить 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 помогают сделать вкладку с вашим сайтом узнаваемой, это важно, когда пользователь одновременно открывает несколько ресурсов. С заметным фавиконом ваш сайт не потеряется среди других открытых вкладок.

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

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

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

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

Как создать фавикон для сайта. Пошаговая инструкция от А до Я

Содержание:
1.Что такое фавикон?
2.Почему фавикон важен?
3.Как создать фавикон?
4. Как установить фавикон на сайт?

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

Идеальный пример — фавикон сайта. Знаете ли вы, что такое фавикон? Эффективно ли вы его используете?

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

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

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

Фавикон выполняет следующие функции:
— Брендинг.
— Идентификация сайта пользователем (удобство использования).
— Придает сайту профессиональный вид.

Остановимся более подробно на основных преимуществах использования фавиконов.

Узнаваемость бренда

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

Доверие

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

Повторные посещения

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

Экономит время пользователя

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

Преимущества для SEO

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

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

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

Для этого следуйте пошаговой инструкции:

Шаг 1. Зайдите на Logaster и нажмите «Создать логотип»

Шаг 2. Создайте логотип

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

Шаг 3. Выберите понравившийся логотип

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

Как выбрать правильный дизайн?

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

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

Шаг 5. Создайте и скачайте дизайн фавикона

На странице бренда выберите “Фавикон”.

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

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

Найти вдохновения для фавиконки можно на сайтах:

The Favicon Gallery
Delta Tango Bravo
Fresh Favicons

Шаг 6. Скачайте фавикон

Вы можете скачать фавикон совершенно бесплатно в формате PNG и ICO.

Где я могу использовать фавикон?

Вы можете использовать фавикон:

— на сайте;
— мобильных устройствах. Пользователь может добавить фавикон на домашний экран своего устройства (нечто вроде закладки) — Android, IOS, Windows Phone и т. п;
— программах и приложениях для РC/Mac.

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

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

Шаг 1.
Вам необходимо загрузить файл favicon.ico на сервер. Чтобы это сделать, вам нужно скачать и установить ftp клиент, например, FileZilla.

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

Шаг 2.
Теперь вам нужно отредактировать HTML-страницу вашего сайта, чтобы помочь браузерам находить изображение вашего фавикона. При открытом окне FTP, найдите и скачайте с сервера файл index.html или header.php.

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

Откройте файл index.html в текстовом редакторе — блокнот, Notepad++, Sublime Text.

Если ваш сайт содержит чистый HTML, вставьте специальный код в область HEAD файла index.html.

Если вы используете WordPress, вставьте приведенный ниже код в область HEAD файла header.php.

Сделав это, загрузите файл обратно туда, где вы его взяли. Готово! Перезагрузите страницу вашего сайта, чтобы увидеть фавикон.

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

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

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

Favicon — что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы иконок

11 мая 2020

  1. Что такое Фавикон и зачем он нужен для сайта
  2. Как создать Favicon
  3. Онлайн генераторы и галереи иконок
  4. Как установить или поменять Favicon на сайте

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Разговор в сегодняшней статье пойдет о так называемых иконках Favicon.ico. Мы разберемся, что такое фавикон, почему в обязательном порядке его нужно устанавливать на своем сайте и как самому создать иконку нужного размера.

Чуть ранее я уже писал про то, где можно взять иконки для сайта и упомянутые там сервисы (в той статье) можно использовать для поиска подходящих вариантов Favicon.ico, но есть и специальные онлайн-генераторы (favicon generator), как отечественные, так и зарубежные, а также специализированные коллекции и галереи с подходящими по размеру фавиконами. Ну, и естественно мы поговорим о том, как настроить и подключить их к своему сайту.

Что такое Фавикон и зачем он нужен для сайта

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

Само по себе название «фавикон» произошло от английского словосочетания FAVorites ICON, означающего — иконка для «Избранного» (так называются закладки в браузере Internet Explorer). Зачем она нужна? Очевидно, что так гораздо проще отыскивать взглядом нужную вам закладку, ибо легче искать знакомый значок, чем читать названия сайтов.

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

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

А также, что немаловажно, поисковая система Яндекс отображает Favicon в своей выдаче (результатах поиска) для каждого ресурса, если у него этот значок будет иметься (был добавлен и правильно настроен владельцем сайта, а робот Яндекса успел уже его проиндексировать).

У Яндекса имеется специальный бот для индексации фавиконов под названием YandexFavicons (у них даже апдейты бывают, после которых и имеет смысл проверять наличие нового и обновленного Favicon.ico рядом с вашим сайтом в выдаче), в задачу которого входит сбор и обновление иконок для всех сайтов. Робот Яндекса, специализирующийся на их индексации, посещает сайты с периодичностью от нескольких дней до одного месяца (апы, соответственно, очень редкие получаются).

Поэтому не стоит ждать того, что недавно созданный в online generator или сделанный самостоятельно фавикон сразу же появится в поисковой выдаче Яндекса рядом с описанием вашего ресурса. Должно будет пройти какое-то время. Яндекс, после того как найдет Favicon.ico у вас на сервере, преобразует ее в формат PNG (из графического формата ICO) и с этого момента фавикон вашего сайта будет доступен по адресу:

http://favicon.yandex.net/favicon/ktonanovenkogo.ru

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

Если у вашего проекта Favicon еще не настроен, то самое время задуматься о его создании и установке, т.к. это позволит вам привлекать большее количество посетителей с страниц Яндекса (из поисковой выдачи), ибо рядом с адресом вашего проекта будет красоваться эта иконка, побуждая пользователей выбрать вас, а не соседа по выдаче).

В принципе, Favicon.ico нужного размера вы можете сделать и сами, так же у вас будет возможность создать его с помощью онлайн генераторов (из загруженных вами картинок) или же просто скачать целиком их online коллекцию или галерею.

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

В общем, выгода создания яркого и запоминающегося значка (мини-логотипа) для своего сайта очевидна (прежде всего это узнаваемость «бренда» и все хорошее, что из этого следует). Осталось только понять, как его создать и поставить на свой сайт, а также, что из себя должен представлять этот графический файл? На второй вопрос ответить проще — по определению Favicon должен быть сохранен в формате ICO, размещен в корне сайта (хотя, можно и другом месте), а его размер при этом должен составлять 16 на 16 пикселей.

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

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

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

Как создать Favicon онлайн и где можно скачать их коллекцию

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

  1. Faviсon.cc — довольно-таки удобный онлайн-генератор фавиконов. Используя его вы можете, например, создать свою иконку с нуля (полный эксклюзив), нарисовав ее попиксельно. Для этого вам нужно будет нажать в левой части окна сервиса на кнопку «Create New Favcon».

    В центре страницы генератора расположена область, где каждый квадратик является пикселем вашей будущей фавиконки. Ваша задача состоит в закрашивании разными цветами этих квадратиков. Для закрашивания одного квадратика цветом нужно поставить галочку в правой части окна сервиса в поле «Color Picker», выбрать на расположенной там же палитре нужный цвет и щелкнуть по нужному квадратику. Для удаления неправильной закраски поставьте галочку в поле «transparent» и щелкните по квадратику, в результате чего он станет бесцветным (прозрачным).

    Для перемещения пикселя по холсту генератора вам нужно будет поставить галочку в поле «move». Результат своих трудов в реальном масштабе вы сможете наблюдать в области «Preview» под холстом. Если созданный вами Фавикон вам подходит, то нажмите на кнопку «Download» для его сохранения к себе на компьютер. В результате вы получите графический файл, который сможете затем скачать и загрузить на сервер хостинга.

    Теперь вы знаете как сделать мини-логотип для своего сайта с нуля. Но если вы графическими талантами не обладаете, то можете на сервис онлайн генератора загрузить любую картинку для будущего фавикона, которая будет служить болванкой. Картинка может быть абсолютно любого размера и формата. Для загрузки файла значка на онлайн сервис вам нужно будет нажать в левой части окна сервиса на кнопку «Import Image».

    В открывшемся окне, нажав на кнопку «Обзор», найдите на своем компьютере подходящее изображение. Затем выберите, что делать с соотношением сторон вашей картинки при преобразовании его в формат 16 на 16 (квадрат). Это актуально, если загружаемое вами изображение не квадратное. В этом случае возможны два варианта: оставить соотношение сторон неизменным (Keep dimensions), либо преобразовать картинку к квадратному виду (Shrink to square icon). Во втором случае изображение будущей фавиконки будет искажено по одной из осей.

    Для загрузки в online generator и преобразования вашей картинки нужно будет нажать на кнопку «Upload». Созданная из него Favicon.ico будет доступна к редактированию точно так же, как и нарисованная вами. Когда закончите колдовать над шедевром, то нажмите на кнопку «Download» для того, чтобы скачать его к себе на компьютер.

    На этом онлайн сервисе также имеется возможность использовать коллекции фавиконов, созданные другими его пользователями и выложенные в общий доступ. Для того, чтобы посмотреть имеющиеся в галереи экспонаты, вам нужно будет нажать в левой части окна либо на кнопку «Latest Favicons» для просмотра коллекций отсортированных по дате создания, либо на кнопку «Top Rated Favicons» для просмотра галерей отсортированных по рейтингу.
  2. Favicon.ru — когда-то этот сервис был значительно проще описанного выше онлайн генератора, но последнее время он стал практически его аналогом, но только на русском языке. Favicon.ru позволяет не только преобразовывать любое имеющееся у вас изображение (на компьютере или в интернете) в формат ICO с размером 16 на 16 пикселей, но и дает возможность нарисовать его с нуля попиксельно.

    Этот вариант online favicon generator примечателен, пожалуй, только тем, что он отечественный. Поэтому он и попал в эту статью. Итак, для работы с ним вам нужно на главной странице вверху нажать на кнопку «Выберите файл» и указать путь до нужного изображения на вашем компьютере. Загруженное и преобразованное в формат Favicon.ico изображение можно будет подкорректировать, а затем сохранить к себе на компьютер. Все просто и удобно.

  3. Logaster.ru — это онлайн генератор логотипов, но помимо логотипов он еще создает и фавикон. В отличии от всех других сервисов, вам не нужно рисовать дизайн фавикона или конвертировать ее с логотипа.Для того, чтобы создать фавикон, сначала необходимо ввести название сайта или компании и выбрать вид деятельности. Сервис предложит готовые к использованию несколько десятков шаблонов фавикона. Более подробно, как создать фавикон, можно прочитать здесь. После создания Favicon.ico, вы можете скачать файл к себе на компьютер в формате ICO или PNG.

После этого вам только остается нажать на кнопку «Создать». На открывшейся странице вы увидите ссылку для скачивания получившегося фавикона.

Подборка онлайн генераторов, коллекции и галереи фавиконов

Если вам по каким-либо причинам не понравились описанные выше favicon generator, то могу предложить попытать счастье на одном из следующих бесплатных онлайн-сервисов:

  1. FaviconGenerator — позволяет преобразовать в нужный формат фавикона любое загруженное с вашего компьютера изображение (загружать можно картинки в формате PNG, JPEG, JPG, GIF).
  2. AntiFavicon — достаточно интересный Favicon Generator. На нем вы можете создать фавикон с надписью. Текст надписи вам нужно будет ввести в поля «Top text» и «Bottom tex», а цветовую гамму — настроить в области «Colors».
  3. FavIcon from Pics — еще один простой онлайн сервис — указываете путь до картинки на своем компьютере, преобразуете и скачиваете результирующий файл в формате ICO и GIF.
  4. Iconj — примечательно то, то созданную иконку вы можете либо скачать, либо оставить на сервисе и получить на этот файл ссылку
  5. DeGraeve — достаточно мощный Favicon Generator, по функционалу похож на рассмотренный ранее Faviсon.cc. Здесь тоже можно сделать все либо с нуля, либо загрузить изображение, которое в последствии можно подкорректировать и скачать уже в формате ICO подходящего размера.
  6. Generator — позволяет как генерировать фавикон из загруженного изображения, так и создать ее с нуля в специальном редакторе.
  7. Онлайн редактор иконок favicon.ico — ну, как бы, все при нем — и создание фавиконов с нуля, и доработка уже имеющегося изображения.
  8. Online Favicon — очень функциональный инструмент для создания и редактирования мини-логотипов
  9. Free Favicon Generator — на случай, если ничего из выше предложенного списка вас не устроит.
  10. Фавикон-генератор — простенько и со вкусом...

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

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

Если у вас нет желания или возможности (вы не художник и ни когда им не были), то проще всего будет попробовать поискать в галереях с коллекциями бесплатных фавиконов:

  1. Iconj — достаточно большая коллекция значков, разработанных другими людьми и выложенных в общий доступ
  2. Favicon.cc — 55 тысяч различных вариантов на все случаи жизни. Имеются также анимированные фавиконы, которые правда будут видны только в браузере FireFox
  3. The Favicon Gallery — еще чутка подходящих по размеру иконочек

Если вы знаете еще какие-то подобные ресурсы, то я добавлю ваши ссылки в этот список.

Как установить Favicon на сайт и прописать путь до него

Ваш браузер и поисковый робот Яндекса будут искать фавикон прежде всего в корневой папке вашего сайта. Поэтому можно просто подключиться к сайту по FTP и загрузить в его корневую директорию (обычно это папки public_htm или htdocs) ваш файлик Favicon.ico (лучше его название писать с маленькой буквы). Откройте теперь ваш ресурс в каком-нибудь браузере и посмотрите, не поменялась ли пиктограмма на вкладке. Поменялась? Нет? Ну, ничего страшного.

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

Откройте исходный код любой страницы вашего сайта. Чтобы посмотреть ее исходный код, достаточно будет щелкнуть по странице правой кнопкой мыши и выбрать соответствующий пункт контекстного меню (например, «Исходный код» в старой Opera, либо «Исходный код страницы» в Мазила Фаерфокс, либо «Просмотр кода страницы» в Google Chrome, либо «Просмотр HTML-кода» в IE) или нажать сочетание клавиш Ctrl+U. Теперь поищите в верхней части кода страницы строку, задающую путь до favicon.ico.

Она может выглядеть примерно так:

<link rel="shortcut icon" type="image/ico" href="http:путь_до_вашей_иконки/favicon.ico" />

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

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

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

В Joomla Favicon обычно живет в папке с используемым вами шаблоном (путь до нее в Joomla 1.5 прописывался в файле index.php из каталога этого же шаблона,а вот в Joomla 3 все стало несколько сложнее). Т.е. для смены фавикона в Джумле достаточно будет пройти по этому пути и залить туда свой файлик favicon.ico, а на вопрос о замене ответить утвердительно:

/templates/папка_с_используемым_шаблоном_оформления/favicon.ico

Файлик favicon в WordPress по умолчанию тоже может лежать в папке с используемой вами темой (там же и задается путь до него):

/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon.ico

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

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

В каком именно файле шаблона нужно прописать эти строки, зависит от движка вашего сайта. Например, в в WordPress вам нужно открыть на редактирование файл header.php из папки с используемой вами темой оформления: wp-content/themes/Папка_с_вашей_темой_оформления. Открываете header.php в редакторе и в самом его начале находите открывающий Html тег HEAD. В любом месте за ним, но до закрывающего HEAD прописываете одну из приведенных выше строчек кода с указанием пути до вашего графического файла мини-логотипа.

Как установить анимированный фавикон? В принципе, точно так же, как и обычный. Будет отличаться только код, вставляемый в шаблон вашего сайта, с помощью которого вы указываете браузерам и поисковому роботу Яндекса путь до нужного графического файла. Дело в том, что анимированный Favicon будет иметь расширение GIF, и, следовательно, в строках кода нужно будет прописать примерно так:

 <link rel="shortcut icon" href="/img/favicon. gif" type="image/gif" >
 <link rel="icon" href="/img/favicon.gif" type="image/gif" >

Вот и вся разница между анимированными favicon и обычными. Но следует учесть, что будет работать анимированная иконка только в FireFox, в остальных же браузерах она будет статичной. Яндекс же, при загрузке вашего анимированного фавикона, преобразует его в статичный формат PNG. Но, по-моему, овчинка выделки не стоит — устанавливать вместо обычного мини-логотипа для сайта анимированный не имеет особого смысла. Но это только мое ИМХО.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

15 генераторов favicon для сайта / Полезное в сети / Постовой

Вы, наверное, замечали небольшой значок, который отображается в адресной строке браузера, рядом с адресом сайта или блога. Этот же значок обычно отображается на панели закладок рядом с названием сайта или страницы. Называется этот значок — favicon (аббр. от англ. “favorites icon” — «значок для избранного»). Он имеет, как правило, стандартный размер — 16x16, 32x32, 48x48, 64x64, 128x128 — и расширение .ICO, хотя некоторые браузеры поддерживают также расширения .GIF и .PNG.

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

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

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

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

Favicon Generator
С помощью Favicon-generator можно создать favicon из любого изображения, или же выбрать из галереи уже готовых решений. Возможен поиск готовых favicon по цветовой гамме. На выходе получаете .ICO размером 16x16, или же zip архив с целым набором иконок для разных систем (web, Android, Microsoft и iOS) и разных размеров. Предварительный просмотр результатов отсутствует, так что Вы не сможете оценить качество полученных изображений, на загрузив их.
Кроме генератора favicon разработчики предлагают также графический редактор, обладающий основными инструментами для создания изображения и обеспечивающий предварительный просмотр полученных результатов непосредственно в процессе рисования.

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

Prowdraw
Бесплатный online продукт для преобразования любого изображения в favicon. Поддерживает загрузку изображений в формате JPG, GIF, PNG, BMP и TIF. На выходе генерирует ICO файл одного из четырех выбранных размеров (16x16, 32x32, 48x48, 128x128) с четырьмя различными уровнями резкости. Все четыре иконки отображаются на странице результатов, так что Вы можете сравнить и выбрать для загрузки наиболее приемлемый результат.

Dynamic Drive Favicon Generator
Предельно простой инструмент для создания favicon из существующего изображения. Поддерживаемые входные форматы: gif, jpg, png, и bmp (в gif и png поддерживается прозрачность). В дополнение к стандартному размеру 16x16 может генерировать Windows-иконки размером 48x48 и 32x32. Дополнительные настройки отсутствуют, однако кроме генератора favicon разработчик предлагает еще и отдельный продукт — favicon-редактор для создания иконок «с чистого листа».

Favicomatic
Помимо генерирования иконок самых разнообразных размеров, этот «заботливый» генератор favicon создает еще и фрагмент кода для вставки на страницы сайта (можно указать адрес Вашего сайта для генерирования корректной ссылки) и предоставляет возможность сохранить архивный файл с результатами работы непосредственно в Google Drive.

Favikon
Вся инструкция по использованию этого инструмента приведена в подзаголовке сайта — загрузи изображение, скадрируй его и скачай полученный favicon в формате ICO или PNG. Какие-либо инструменты, кроме crop, отсутствуют.

FavIcon Pro
Еще один простой и незамысловатый инструмент для создания favicon. Преобразует изображение формата JPG, GIF, PNG в файл ICO одного из следующих размеров: 16x16, 32x32, 48x48, 64x64, 128x128. Рядом со ссылкой на скачивание можно увидеть полученный результат.

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

Favicon Online Generator
Простой и легкий в использовании графический online редактор, обладающий, тем не менее, всеми необходимыми инструментами для быстрого создания стильной и качественной favicon. Имеется возможность выбора размера (16x16 и 32x32), загрузки исходного и предварительный просмотр получившегося изображения.

Favico
FavICO — бесплатный online конвертер графических файлов в favicon. Поддерживает GIF/JPG/PNG файлы в качестве исходных и создает на выходе ICO размером 16x16 или 32x32 пикселей.

Faviconit
Несколько специфический конвертер, ориентированный на создание favicon из весьма больших изображений — исходный файл должен иметь размеры не менее 310x310 пикселей, объемом до 1Мб. Среди расширенных опций возможно задать имя файла, версию и расположение на сервере (если предполагается его размещение не в корневой директории) и получить готовый код для вставки в заголовок страницы.

Faviconr
Faviconr способен генерировать favicon из файлов jpg, gif, или png объемом не более 150 кБ. Создает стандартный ICO-файл размером 16x16 без каких-либо возможностей более тонкой настройки. Способен, впрочем, учитывать прозрачность цвета в исходном файле.

Как сделать иконку для сайта. Как установить Favicon на сайт

Приветствую вас, читатели Seo bloga Fomika! Сегодня поговорим о FaviconФавикон для сайтаЧто это такое и зачем он нужен для блога?

Как создать его и установить на блог? Обо всём этом будет сегодняшний пост.

Итак,что такое Фавикон? Это Иконка блога (сайта). Сегодня переоценить эту мелочь невозможно. Это визитная карточка блога, это то что отличает блог от миллионов других. Вот в поиске Яндекса Фавиконы сайтов выводятся и это имеет большое значение (я считаю). Сайт сразу может запомниться яркой, интересной, непосредственной иконкой.

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

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

Как и где создать Фавикон для сайта

Сервис по созданию Фавиконов — favicon. cc поможет создать вам свою уникальную иконку для сайта. Регистрироваться на этом сервисе не обязательно.

Он на английском языке к сожалению, но если вы работаете на Гугл Хром (как я), то он быстро переведёт вам эту страничку. Там в принципе нет ничего сложного. Выбираете цвет фавикончика и рисуете его, тыкая курсором в квадратики)))

Можно:

  1. Создать Favicon из готового изображения;
  2. Посмотреть последние созданные Favicon;
  3. Посмотреть лучшие фавиконы (и я не думаю что вы захотите ставить себе на сайт чей-то фавик, хотя дело ваше)

Под цифрой 4 я обозначил стирательную резинку(ставьте галочку  и стирайте) и под цифрой 5 можно передвинуть фавикон. Вообщем всё там очень просто.

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

Загрузить только что созданный вами фавикончик вы сможете нажав на кнопку Download Favicon

Идём дальше. Ещё один сервис для создания фавиконов — favicon.ru Это к счастью русский сервис, разберётесь без перевода.

Всё предельно ясно. Выбираете файл картинки из своего компьютера (размер картинки не должен превышать 300Кв), либо указываете адрес картинки в интернете и нажимаете/Создать фавикон/, после чего этот сервис выдаёт вам результат вашего фавика.

Дальше вы можете/Обрезать картинку/ и /Редактировать картинку/ ну и конечно /Создать ещё одну картинку/

Ещё Список сервисов Онлайн-генераторов иконок для сайта:

  1. favicon-generator.org
  2. degraeve.com
  3. favicongenerator.com
  4. antifavicon.com
  5. chami.com
  6. webscriptlab.com

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

  • iconj.com — сервис с огромной базой иконок. Также имеется возможность сгенерировать  (создать из уже имеющегося изображения) иконку и создать анимационный фавик-вкладка Animated Favicon
  • favicon. co.uk — тоже огромная база готовых иконок для сайта

Как установить Фавикон на сайт под управлением движка WordPress

Как я уже говорил выше,из поисковых систем, изображение Favicon в результатах поиска выдаёт только Яндекс. Для этого они создали специального робота, в задачи которого входит сбор информации о фавиконе. Этот робот индексирует фавиконы, обновляет информацию о них. Режим работы этого робота применимо к любому сайту — от несколько дней до 1 месяца.

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

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

Итак, давайте прикрепим наш фавикон к сайту. Теория такая: — Нужно файл фавикона положить в корневую папку вашего блога(сайта). Для этого нужно подключиться к вашему хостингу через Ftp клиент FileZilla и закачать ваш фавикон в папку public html.

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

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

&lt;head&gt;
 &lt;link rel=&quot;shortcut icon&quot;
 href=&quot;http://dengi-iz-ineta.ru/favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;
 &lt;link rel=&quot;icon&quot; href=&quot;http://dengi-iz-ineta.ru/favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;

Как прописать код в файле header. php? Можете скопировать эти строчки, только поменяйте адрес сайта на свой.

Для этого нужно также зайти на хостинг через Ftp клиент FileZilla и с помощью Notepad++  открыть файл header.php, который находится в папке с вашей темой -wp-content/themes/Папка с вашей темой оформления/ и после открывающего тега HEAD вставить туда этот код.

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

Ответ: — абсолютно также как мы устанавливали обычный фавикон. Отличие лишь в том что у файла будет другое расширение — GIF, а следовательно изменится и наш код.

&lt;head&gt;
&lt;link rel=&quot;shortcut icon&quot;
href=&quot;http://dengi-iz-ineta.ru/favicon.gif&quot; type=&quot;image/gif&quot; /&gt;
&lt;link rel=&quot;icon&quot; href=&quot;http://dengi-iz-ineta.ru/favicon.gif&quot; type=&quot;image/gif&quot; /&gt;

Яндекс, загружая ваш анимированный фавикон будет преобразовывать формат GIF в статичный PNG, поэтому в выдаче этого поисковика все иконки сайтов не двигаются… Хочу напомнить что анимированная иконка будет отображаться только в браузере FireFox.

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

С уважением, Алексей Фомицкий.

Статьи по теме:

Понравилась статья - поделись с друзьями!


Онлайн-генератор значков

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


Что такое Favicon?

Фавиконы - это маленькие значки, которые обычно можно увидеть в адресной строке веб-сайтов, списке закладок и вкладках. Эти значки отличают ваш веб-сайт от веб-сайтов конкурентов и помогают найти ваш веб-сайт, когда списки закладок пользователей переполнены.
Существует множество бесплатных программ для создания изображений значков, но большинство из них не поддерживает.ico файл. Следовательно, вам придется загрузить дополнительный плагин. После того, как вы закончите создание значка, его необходимо изменить размер, так как значки должны быть размером 16 X 16 или 32 x 32 пикселей. Пример значка: Google, Yahoo, Bing, Pinterest (см. Изображение ниже).


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

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


  1. 1.Генератор Favicon

Этот бесплатный онлайн-инструмент поможет вам преобразовать логотип, изображение и файл фотографии в стандартный формат значков * .ICO. Простые шаги: загрузите файл изображения, создайте файл значка и загрузите его. Для достижения наилучших результатов вы можете использовать для загрузки квадратное изображение. А если вам нужен прозрачный значок, используйте файл GIF или PNG с прозрачным фоном. (пример инструмента для создания значков изображений)


  1. 2. Favicon Creator

    Создайте фавикон.ico для вашего веб-сайта мгновенно с помощью нашего онлайн-инструмента рисования значков (Draw, Pixel Color, Eraser, Reset Editor) и загрузите его бесплатно. Создайте формат файла значка веб-сайта из файла изображения и фотографии. Это очень полезный онлайн-инструмент для каждого веб-дизайнера, разработчика и блогера. Это просто и быстро. (Пример инструмента для создания значков изображений)

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


Как добавить значок на свой сайт:

  • Создайте свой значок на этом веб-сайте.
  • Поместите файл favicon.ico в корневую папку своего веб-сайта
  • Напишите следующий код в свой html: rel = "ярлык" href = "/ favicon.ico" type = "image / x-icon">
  • Посетите www.yourwebsite.com/favicon.ico , чтобы убедиться, что ваш значок там.

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

Как создать фавикон для вашего сайта. Пошаговое руководство от А до Я

  1. Что такое значок?
  2. Почему фавикон важен?
  3. Как создать фавикон?
  4. Где я могу использовать значок?
  5. Как установить фавикон на свой сайт?

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

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

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

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

Фавикон имеет следующие функции:
- Брендинг.
- Идентификация сайта пользователем (юзабилити).
- Придает веб-сайту профессиональный вид.
Давайте подробнее расскажем об основных преимуществах значка.

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

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

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

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

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

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

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

Шаг 1.Введите название своей компании и нажмите «Создать логотип»

Шаг 2. Выберите логотип, который вам нравится
Logaster сгенерирует вам десятки вариантов логотипа. Если у вас уже есть какое-то видение своего будущего бренда, например, вы хотите видеть его в определенном цвете, у вас есть возможность установить отрасль своего бизнеса, цветовую палитру, чтобы сузить варианты выбора. Если вам понравились несколько логотипов, сохраните их в «Избранное», вернитесь позже и выберите лучший.

Шаг 3. Настройте свой логотип
Редактор предлагает множество возможностей при изменении дизайна вашего логотипа. Во-первых, ограничений на редактирование нет. Вы можете изменить название своей компании, шрифт или цвет, а также значок, макет логотипа или любой другой элемент. И все это совершенно бесплатно. Не забывайте нажимать «Сохранить», чтобы не потерять внесенные изменения.

Шаг 4. Выберите изображение для дизайна фавикона
Теперь ваш логотип готов. И вам нужно выбрать логотип для вашего будущего дизайна фавикона. Для этого на странице вашего логотипа нажмите кнопку «Набор социальных сетей», расположенную в левой строке меню. Затем прокрутите вниз до LinkedIn Social Assets и выберите значок своего логотипа (LinkedIn - квадратный логотип размером 60 * 60) для загрузки.

Шаг 7. Конвертируйте файл PNG в ICO
Следующим шагом будет преобразование вашего файла в ICO. Введите в поиске Google «конвертировать .PNG в .ICO онлайн» и выберите одну из предложенных услуг.Большинство сервисов предлагают установить нестандартные размеры. Но обратите внимание, что значок может быть 32 × 32, 64 × 64 или 16 × 16 .

Чтобы найти вдохновение для фавикона, посетите один из следующих веб-сайтов:
The Favicon Gallery

Fresh Favicons

Где я могу использовать фавикон?

Вы можете использовать значок:
- Онлайн;
- На мобильных устройствах. Пользователь может добавить значок на главный экран своего устройства (например, закладку) - Android, IOS, Windows Phone и т. Д .;
- Приложения для ПК / Mac.

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

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

Шаг 1.
Необходимо загрузить на сервер файл favicon.ico. Для этого вам необходимо скачать и установить ftp-клиент, например FileZilla.
Затем введите логин и пароль и скачайте файл.Прочтите более подробные инструкции о том, как скачать файл значка здесь.

Шаг 2.
Теперь вам нужно отредактировать HTML-страницу вашего сайта, чтобы помочь браузерам найти ваше изображение фавикона. Пока окно FTP открыто, найдите и загрузите с сервера файл index.html или header.php.
Перед тем, как редактировать код, обязательно сделайте копии файлов, чтобы восстановить их в случае ошибок.
Откройте файл index.html в текстовом редакторе - Блокнот, Блокнот ++, Sublime Text.

Если ваш веб-сайт содержит чистый HTML, вставьте специальный код в индекс файла HEAD.html.

Если вы используете WordPress, вставьте следующий код в файл HEAD header.php.
Как только это будет сделано, загрузите файл обратно туда, где вы его получили. Готово! Пожалуйста, перезагрузите страницу вашего сайта, чтобы увидеть значок.

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

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

Генератор Favicon

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


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

Краткое руководство FAVICON HOWTO

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

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

Значок favicon (сокращение от «Значок избранного»), также известный как значок страницы, представляет собой значок, связанный с определенным веб-сайтом или веб-страницей. Веб-дизайнер может создать такой значок, и многие графические веб-браузеры, такие как последние версии Internet Explorer, Firefox, Mozilla, Opera, Safari и Konquerorcan, могут затем использовать их.Браузеры, поддерживающие значки, могут отображать их в строке URL-адреса браузера, рядом с названием сайта в списках закладок и рядом с заголовком страницы в интерфейсе документа с вкладками.

Как использовать фавикон на вашем сайте

Первоначальный способ определения значка заключался в размещении файла с именем favicon.ico в корневом каталоге веб-сервера. Затем это будет автоматически использоваться при отображении избранного (закладок) Internet Explorer. Позже, однако, была создана более гибкая система, использующая HTML для указания местоположения значка для любой данной страницы.Это достигается с помощью элемента ссылки, например: в разделе документа. Таким образом, можно использовать любое изображение подходящего размера (1616 пикселей или больше), и хотя многие по-прежнему используют формат .ico, другие браузеры теперь также поддерживают форматы изображений GIF и PNG.

Для оптимальной поддержки браузером необходимо соблюдать следующие правила:

  • Включите оба типа элементов:
  • Элементы ссылки должны находиться внутри элемента head (между и) в HTML.
  • Для XHTML элемент ссылки должен быть пустым (заканчиваться />)
  • Href может, но не обязательно, указывать на местоположение /favicon.ico. Он также может указывать на любое другое удобное место на вашем сайте.
  • Изображение может быть в формате ICO, PNG или GIF.
  • The.Формат файла ico будет правильно читаться большинством браузеров.

Примечание: Файл с именем favicon.ico, расположенный в корневом каталоге документа, также будет найден некоторыми браузерами, которые не обрабатывают элементы ссылки, даже если на него нет ссылок из любого места на вашем сайте.

Об этом сайте

Этот сайт работает с использованием только программного обеспечения с открытым исходным кодом на сервере Linux с использованием смеси сценариев Javascript и Tcl, библиотеки Gd и механизма шрифтов Free Type.Программа и HTML редактировались с помощью редактора vim.

Отзывы

Мы рады получать комментарии, пишите на antirez (at) gmail (dot) com обо всем, что связано с этим сайтом.


Коллекция лучших веб-инструментов для веб-разработчиков и дизайнеров


Генераторы графики
Pixelbutton Создание кнопок в антипиксельном стиле. Очень красиво и удобно.
Brilliant Button Maker - еще один генератор кнопок в антипиксельном стиле, менее быстрый, но позволяющий включать изображения в кнопки.
Генератор случайного текста полезен для проверки макетов страниц с реалистичным текстом.
Обычный конвертер текста в изображение с функцией защиты от распознавания текста.
Email Icon Generator, превращайте электронные письма в изображения, чтобы предотвратить спам. Веб-сервис
Fractals Generator, генерирует наборы Мандельброта в реальном времени с красивыми цветами.

Инструменты цвета
Генератор цветовых схем может спасти вас, если вы сомневаетесь в хороших цветах для ваших страниц.
Color Palette Generator создает цветовую палитру, соответствующую предоставленному вами изображению.

Поисковые системы / SEO
Лучшие каталоги с бесплатным размещением веб-сайтов. Хорошая отправная точка для получения ссылки.
99 бесплатных инструментов SEO - это набор качественных инструментов SEO. Инструмент
Overtune Keyword Selector Tool показывает пользователям общие поисковые запросы по данной теме. Средство просмотра
Overtune BIDs полезно для проверки того, сколько рекламодатели могут заплатить за клик по заданному поисковому запросу.
Robots.txt Generator, выберите, какой искатель разрешить / запретить, какой каталог ограничить и так далее.
Visitors Web Log Analyzer - это бесплатный анализатор журналов со специальными отчетами Google.

Партнерские программы для заработка на веб-сайтах
Chitika, показывайте баннеры о таких продуктах, как Ipod или ноутбуки, зарабатывайте за каждый клик.
AdSense, вы можете зарабатывать, показывая рекламу Google на своем сайте.

Дополнительные ссылки
Archivio Discussioni Newsgroups (ita)
Archivio Discussioni Scientifiche (ita)
Economia e Borsa (ita)
Обсуждения sull'arte (ita)

Хотите, чтобы ваш сайт был здесь? напишите письмо на адрес antirez (at) gmail (dot) com для доработки.

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

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