17.11.2019

Создание favicon.ico

Создаем favicon

Инструкция по созданию и размещению фавикона

 

Приветствую всех!

При создании сайтов либо их SEO оптимизации, приходится общаться с людьми разного уровня компьютерной грамотности. Вот после одного такого общения я решил написать статью, подробно описывающую все этапы по созданию фавикона — «..картинки вверху, там, где названия пишутся..».
Фавикон (favicon) — это маленькая пользовательская иконка, которая отображается во вкладках браузера и находится слева от заголовка (Title) страницы. В качестве фавикона, чаще всего, используют логотип сайта, уменьшенный до 16 x 16 пикселей. Ниже приведен пример сайта, который имеет фавикон и тот, который не имеет.

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

Руководство по созданию фавикона

 

Шаг 1: Создаем свой образ
Если у вас уже есть логотип или изображение, которое представляет ваш сайт, просто откройте этот файл с изображением в графическом редакторе, например Adobe Photoshop или Fireworks. Если у вас еще нет такого редактора на компьютере, есть и другие варианты, такие как онлайн редактор pixlr.com.
Если вокруг вашего логотипа есть много белого пространства, не забудьте обрезать его, а затем уже уменьшить до требуемого размера 16 х 16 пикселей (я как-то сделал размер 32 Х 32 и нормально прокатило). Если логотип очень сложный по дизайну, и не хочет отображаться в размере 16 X 16 пикселей, его можно упростить, или даже использовать другое изображение, подходящее о смыслу и дизайну, к вашему сайту в целом. В этом случае постарайтесь включить в фавикон основные цвета вашего сайта. Но все же, лучше использовать логотип сайта.
После того как вы уменьшили размер изображения до 16 X 16 пикселей, сохраните файл в формате JPG, PNG, GIF,BMP, или TIF.

Шаг 2: преобразовать изображение
Теперь необходимо преобразовать изображение в файл ICO. Есть несколько интернет инструментов, которые можно использовать для достижения этой цели. Хороший, бесплатный генератор всевозможных иконок доступен по адресу prodraw.net . Просто загрузите ваше изображение, выделите размер значков, и все. Вы можете скачать ваш новый файл с расширением ICO. Но, естественно есть путь значительно легче:
Просто выделяем файл, кликаем правой кнопкой мыши, выбираем переименовать и меняем разрешение JPG, PNG, GIF, BMP, или TIF на ICO (для этого у вас должна быть активирована функция «Показывать расширения файлов » Пуск ->> Панель управления ->> Параметры папок ->> Вид ->> снять галочку в пункте «Скрывать расширения для зарегистрированных типов файлов»).

Шаг 3: Загрузите изображения
Теперь, когда у вас есть свой файл favicon.ico, вам нужно загрузить его в корневой каталог вашего сайта. Изображение должно быть видимым, когда вы переходите по адресу http://ваш сайт/favicon.ico после его загрузки (конечно заменив «ваш сайт» действительным именем домена). Не загружайте фавикон в папку с изображениями, такую как: http://ваш сайт/images/favicon.ico !!!

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

*< link href=”favicon.ico” rel=”shortcut” type=”image/vnd.microsoft.icon” data-mce-href=”favicon.ico” / >

* — При копировании кода не забываем удалять пробел после < и перед >

Имейте в виду, что в разделе <head> вашего веб-сайта будут и другие элементы, такие как заголовок и мета-описания, а также ссылки на файлы CSS. Приведенный выше код можно добавить в любом месте между < head> < /head>.

Ну, вот в принципе и все, что я хотел по этому поводу сказать.

P.S.

Лайкаем, оцениваем, твиттим-ретвиттим, репостим и т.д. Вообщем делаем все, что обычно не делаем )))) Всем спасибо и успехов  !

14 комментариев к «Создание favicon.ico»

  1. А чем не подойдет папка http:// ваш сайт/images/favicon.ico если в коде можно указать link href=»/images/favicon.ico». И кавычки зачем каждый раз дважды писать?)

  2. elimS — Я думаю, что если указать путь, то можно и из других папок подтягивать. Но если без добавления кода, то только из главной папки. Вы же у себя на сайте в корень положили ;). Что касается двойных кавычек, спасибо, дал маху, сейчас поправим..

  3. Спасибо за советы.
    Сделал как вы советуете, правда не очень мне нравится то, что вышло но лучше чем то, что было. Так что оставил.

  4. А как долго favicon обновляется?
    Заменил на свой, но до сих пор показывается старый.
    Почитал комментарии, у многих бывает месяцами обновляется..

  5. Добрый день, Александр! На сайте сразу меняется, а вот в поисковой выдаче (например в Яндексе) через 2-3 недели, как показывает практика.
    Яндекс пишет — …»Если пиктограмма сайта размещена правильно, и хотя бы одна из страниц вашего сайта показывается в результатах поиска Яндекса, то после посещения сайта роботом она появится в поиске.»…
    P.S. У вас на сайте я не заметил фавикона, видимо что-то не так сделали.

  6. Вроде ж есть даже специальные апдейты у Яндекса именно для favicon. Но с его то «скоростью» 2-3 недели, как они пишут, можно смело на 2 умножать.

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

  8. Добрый день, Сергей! Photoshop вам поможет создать фавикон нужного качества.

  9. Действительно, проще разместить иконку в корне, тогда не нужно ни кода, ни плагина (WordPress).

  10. Есть сайт замечательный favicon.cc всегда там делаю иконки.
    Плюс там огромная галерея готовых иконок структурированная по тегам.
    Очень удобно.

  11. Тоже хотел сказать про favicon.cc — лучший он лайн сервис. После загрузки сразу видно, как будет выглядеть.

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

    И еще фавикон лучше заливать не в корень сайта, а в папку шаблона сайта.

  12. Спасибо, очень полезно Создал иконку для своего сайта

  13. Рисовать самой конечно хорошо, но когда умеешь это делать 🙂
    Может новичкам (а так понимаю Вы пишите именно для них) было проще «скопировать» иконку с чужого сайта? Понимаю, что это не совсем корректно, но так проще на первых порах, да и по времени занимает секунды, правда поиск «той самой иконки» может занять достаточное долгое время.

  14. Ага, на сервисах можно рисовать пикселами. Уметь бы еще.. (

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

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